본문으로 바로가기

안녕하세요. 오늘은 움직이는 로고만들기에 대해서 알아보겠습니다.

기존에 로고에 관련해서는 여러개의 포스팅을 진행 한적이 있습니다.


※ 이 것을 먼저 보고 오시면 도움이 이글을 이해하는데 도움이 됩니다. 

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);


누구나 손쉽게 글씨체 만으로도 그려지는 효과를 만들 수가 있습니다!!


그럼 다들 예쁜 효과를 만들길 바랍니다+_+!!


신고

댓글을 달아 주세요

  1. BlogIcon SONYLOVE 2016.03.15 01:14 신고

    오오오오... 멋진데요.
    저도 css 로 하나 만들어야겠네요. ㅎㅎ
    완전 감사합니다. ㅋㅋ
    아 저는 요즘 심플모드로 전환했어요. ㅎㅎ

    • BlogIcon COCOSOFT COCO Media 2016.03.15 01:19 신고

      CSS만으로도 간단하게 적용가능하니깐 좋은 것 같아요.. 괜히 어려운 스크립트 파일 만지다가 힘들었는데 ㅠ 찾다보니 발견하게 되네요 ㅎㅎ

      이쁜 글씨체만 찾으면 한글도 사용가능하니 좋은 것 같아요!
      다만 아직 viewbox 사이즈 조절이 미숙해서 ㅠ 사이즈 조절하는 것만 좀 더 해봐야겟어요ㅠ ㅎㅎ

      아님 x값 y값 앱애고 한줄로 표현해도 간단하게 되는 것 같아요^^

    • BlogIcon SONYLOVE 2016.03.15 02:27 신고

      한줄로 하긴 했는데 설치할만한 적당한 위치를 못찾아서 아쉬워요;;
      코코님도 편안한 밤 되세요. ^_^;

  2. BlogIcon gon 2016.03.16 15:05 신고

    코코님 블로그보고 많이 배우고 있습니다.
    그동안 CSS를 대충 때려잡기 식으로 수정한 것이 반응형 스킨 오면서 완전 포기모드입니다... -.-;;
    하지만 코코님 블로그 보고 쉽게 하나씩 배워갑니다.

  3. BlogIcon COCOSOFT COCO Media 2016.03.16 17:22 신고

    댓글 테스트

  4. BlogIcon 첼시♬ 2016.03.18 14:58 신고

    와.. 신기하네요!
    기본 스킨만 겨우 적용해서 쓰는 제게는 신세계..+_+
    글씨가 예뻐서 그런가 선 그려지는 것만 보이는 효과도 예뻐요. :D

    • BlogIcon COCOSOFT COCO Media 2016.03.18 15:37 신고

      넵+_+ 나중에 하나씩 꾸미기 해보는 것도 재밌어요!! 텍스트만있으면 가능하니 +_+ 로고나 제목같은데 사용하면 좋구요 ㅎㅎ 더쉽게 적용할 수 있게 앞으로 많은 포스팅하겠습니다 ㅎㅎ!!

티스토리 툴바