타이포그래피 표현
4,299
2015.11.19 00:34
첨부파일
-
- 첨부파일: typography.zip (4.0K)10 2015-11-19 00:34:53
관련링크
-
224회 연결
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=1GE 주소복사
본문
인녕하세요. 이윰MOUNT 입니다.^^
오늘은 shine이라는 자바스크립트 라이브러리를 활용하여 간단하게 타이포그래피를 표현하는 방법을 알아보겠습니다.
문자에 입체감을 주고 마우스를 움직이면 커서 위치에 따라 그림자 효과가 움직이는 표현을 아주 간단하고 쉽게 응용할 수 있습니다.
아래 링크를 클릭하면 예제를 보실 수 있습니다.
http://theme.eyoom.net/study/js/typography/index.html
본문 상단의 첨부한 파일을 다운받아 typography 폴더내 index.html 파일을 브라우저로 열어보면 동일한 화면이 출력됩니다.
index.html 파일을 열어보면
<script src="./js/shine.min.js"></script>
<style>
body {
background: #e5e5e5;
}
.demo-text {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%;
display: table;
height: auto;
color: #fff;
text-align: center;
font-size: 150px;
font-family: 'Georgia', sans-serif;
font-weight: 800;
}
</style>
</head>
<body>
<h1 id="headline" class="demo-text">eyoom.net</h1>
<script type="text/javascript">
var shine = new Shine(document.getElementById('headline'));
function handleMouseMove(event) {
shine.light.position.x = event.clientX;
shine.light.position.y = event.clientY;
shine.draw();
}
window.addEventListener('mousemove', handleMouseMove, false);
</script>
</body>
shine.min.js 파일을 불러오고,
간단한 css로 h1 태그의 스타일을 설정한 것을 볼수 있습니다.
그리고 script 몇줄 추가 해 주면 끝입니다.
아주 간단하죠. script 소스는 따로 설명할 것도 없어서... 그대로 응용하여 사용하시면 될것 같습니다.
감사합니다.
0
좋아요!
2
레벨 5
경험치 2,707
Progress Bar 71%
- 가입일 : 2015-09-15 19:48:51
- 서명 : 안녕하세요. 이윰의 MOUNT입니다.
- 자기소개 :
댓글목록
비즈팔님의 댓글
사이트에 적용하면 한층 멋스럽겠네요. ^^
감사합니다.
축하합니다. 첫댓글 포인트 75포인트를 획득하였습니다.
크롱크롱님의 댓글
진짜 끝내주는 효과네요...
joosam님의 댓글
진짜 유용한 꿀팁만 주시는군요... 고맙습니다~~
축하합니다. 행운의 포인트 77포인트를 획득하였습니다.