• 북마크
  • 1:1문의
  • 새글
  • 회원가입
  • 로그인

JavaScript/jQuery

  • Home
  • 스터디
  • JavaScript/jQuery

타이포그래피 표현

2,893 2015.11.19 00:34

첨부파일

짧은주소

본문

인녕하세요. 이윰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
- 이윰MOUNT 메일보내기 아이디로 검색 - 회원등급 : 씨앗/Level 5 - 포인트 : 199,181
레벨 5
경험치 2,707

Progress Bar 71%

- 가입일 : 2015-09-15 19:48:51
- 서명 : 안녕하세요. 이윰의 MOUNT입니다.
- 자기소개 :
댓글목록

비즈팔님의 댓글

사이트에 적용하면 한층 멋스럽겠네요. ^^
감사합니다.

축하합니다. 첫댓글 포인트 75포인트를 획득하였습니다.

크롱크롱님의 댓글

진짜 끝내주는 효과네요...

joosam님의 댓글

진짜 유용한 꿀팁만 주시는군요... 고맙습니다~~

축하합니다. 행운의 포인트 77포인트를 획득하였습니다.

LOGIN
사이드 메뉴

최신글이 없습니다.

최신글이 없습니다.

출석 랭킹

오늘의 랭킹

회원사진

닉네임

개근왕

최다1위

shadow shadow
Ranking

    출력할 랭킹이 없습니다.

  • 01 shadow
    674,374
  • 02 신비
    335,419
  • 03 가을하늘
    204,735
  • 04 mame
    202,630
  • 05 이윰MOUNT
    199,181
  • 06 미스코리아
    163,939
  • 07 레오나르도
    147,576
  • 08 테크니션
    142,655
  • 09 이윰IN
    135,258
  • 10 비온뒤맑음
    127,882
  • 01 shadow
    28,916
  • 02 joosam
    23,606
  • 03 티보리
    21,954
  • 04 홍인
    18,644
  • 05 레오나르도
    18,088
  • 06 이윰IN
    17,983
  • 07 도깨비
    16,614
  • 08 이윰EGG
    16,045
  • 09 자이언트
    14,698
  • 10 미스트
    14,379