안녕하세요. 오늘은 움직이는 로고만들기에 대해서 알아보겠습니다.
기존에 로고에 관련해서는 여러개의 포스팅을 진행 한적이 있습니다.
※ 이 것을 먼저 보고 오시면 도움이 이글을 이해하는데 도움이 됩니다.
http://cocosoft.kr/386 - 블로그 로고 벡터이미지 svg파일로 만들기 및 사용법
일러스트로 벡터 이미지 path 선따는 법을 알고 오시면 정말 재밌습니다.
인트로
우선 저는 웹언어 웹코딩 웹디자인 전문ㅠ 전공자도 아니고 아예 문외한 비전공자입니다.
그래서 지식의 깊이가 얇으며, 부족한 점도 많지만.. 잘못 설명하는 점도 있을 수있지만 ㅠ_ㅠ 양해를 해주시고
봐주시면 좋을 것 같네요.
사실 지금 글을 적으면서도 이러한 방법으로 하는게 맞는 것인지는 모르겠지만
최대한 아는 방법을 설명하겠습니다!!
암튼 요즘 블로그 꾸미기한다고 다양한 블로그 및 웹사이트들에서 많은 디자인을 보고 있는데
전부는 아니지만 일부 상업적 홈페이지들보다 제블로그가 더 예쁜 것 같기도해서 나름 뿌듯하기도 합니다.
옆길로샜네요 ㅠ 거두절미하고 오늘의 다룰 주제는
바로 써지듯이 움직이는 글씨체를 적용하는 방법을 해보겠습니다.
이러한 선을 따라 그려지는 듯한 글씨가 써지는 효과를 내는 방법은 크게 세가지가 있다고 생각되네요.
1. 이미지나 동영상 파일 사용하기
1) GIF 파일 - 장점 : 손쉽게 설치가능, 단점 : 부드럽게 만들기 어렵고 수정이 매우 어렵다.
( 저는 현재 이미지는 GIF인데, 영상으로 해당 효과를 녹화한 후 약 170 프레임을 찍어서 만들었습니다. )
2) 동영상 파일 (webM)- 장점 : 고화질 저용량의 영상을 첨부할 수 있다, 단점 : 브라우저별로 지원여부가 차이가 있음
2. JS 플러그인을 사용하기
(공통 장점 - 웬만한 브라우저에서 다보인다)
1)greensock의 DrawSVG plugin.js
See the Pen 코코소프트 로고 by JCM (@cocosoft) on CodePen.
해당 코드는 DrawSVG plugin으로 제작되었습니다.
정말 간편하게 한번에 복잡하고 그려지는 효과를 만들 수 있습니다.
다만 아쉽게 유료스크립트입니다.. 1년에 $50 입니다.
2)jQuery의 DrawSVG 플러그인
See the Pen jQuery DrawSvg + delay + fill +callback by JCM (@cocosoft) on CodePen.
아주 가볍게 만들어진 js입니다. 2KB!!
다만 진짜 선그려지는 것 밖에 없습니다..
fill이나 크기 조절은 CSS 를 더 추가해야합니다.
3. 아니!!!!!!! CSS만으로도 가능한 방법이 있었습니다. pure CSS
( 장점 - SVG파일이 필요없이 손쉽게 만들 수 있다.
단점 - 하나하나 효과를 주려면 일일히 코드를 전부 다 넣어야하기 때문에 코드낭비
구형 익플에서는 안나온다)
See the Pen jqMJLz by JCM (@cocosoft) on CodePen.
@keyframes 방식은 파이어폭스에서 선그리기는 안나오는 줄 알았는데 파이어폭스에서도 나옵니다.
모바일도 당연히 깨끗하게 깨짐없이 나오겠죠??!!
따로 SVG 파일을 만들 필요없이!!! 누구나 글씨만 적는 것으로만으로도 쉽게 가능합니다.
이쁜 웹폰트를 사용한다면 훨씬 좋겠죠???
위 코드에 적용된 글씨 체는
https://fonts.googleapis.com/css?family=Alex+Brush 입니다.
HTML 부분에 붙여넣기 해줍니다.
<div class="drawsvg">
<svg version="1.1" viewBox="0 0 700 300">
<symbol id="fade-text">
<text x="45%" y="40%" text-anchor="middle">I Love ♡</text>
<text x="55%" y="60%" text-anchor="middle">cocosoft</text>
</symbol>
<g>
<use class="stroke" xlink:href="#fade-text"/>
<use class="fill" xlink:href="#fade-text"/>
</g>
</svg>
</div>
x, y 값과 viewBox 사이즈 조절을 해주면 됩니다.
CSS 부분에 붙여넣기 해줍니다.
.drawsvg,svg {width: 100%; height: 300px}
.stroke {stroke: #000; stroke-width: 1px; stroke-dasharray: 0 250;
stroke-opacity: 1; fill: none;
-webkit-animation: stroke_offset 8s infinite;
animation: stroke_offset 8s infinite;
-webkit-animation-timing-function: cubic-bezier(.25, .46, .45, .94);
animation-timing-function: cubic-bezier(.25, .46, .45, .94)
}
@-webkit-keyframes stroke_offset {
100%, 25% {stroke-dasharray: 0 250; stroke-opacity: 1
}
50%, 75% {stroke-dasharray: 250 0; stroke-opacity: .75
}
55%, 70% {stroke-dasharray: 250 0; stroke-opacity: 0
}
}
@keyframes stroke_offset {
100%, 25% {stroke-dasharray: 0 250; stroke-opacity: 1
}
50%, 75% {stroke-dasharray: 250 0; stroke-opacity: .75
}
55%, 70% {stroke-dasharray: 250 0; stroke-opacity: 0
}
}
.fill { fill: #000; fill-opacity: 0;
-webkit-animation: fill_offset 8s infinite;
animation: fill_offset 8s infinite;
-webkit-animation-timing-function: cubic-bezier(.25, .46, .45, .94);
animation-timing-function: cubic-bezier(.25, .46, .45, .94)
}
@-webkit-keyframes fill_offset {
100%, 25%, 35%, 90% {
fill-opacity: 0
}
50%, 70% {
fill-opacity: 1
}
}
@keyframes fill_offset {
100%, 25%, 35%, 90% {
fill-opacity: 0
}
50%, 70% {
fill-opacity: 1
}
}
#fade-text { font-family: 'Alex Brush', cursive; font-size: 4em}
@import url(https://fonts.googleapis.com/css?family=Alex+Brush);
누구나 손쉽게 글씨체 만으로도 그려지는 효과를 만들 수가 있습니다!!
그럼 다들 예쁜 효과를 만들길 바랍니다+_+!!
