저번에 이 블로그에서 textillate 플러그인에 대해서 언급한 적이 있었습니다.


이 플러그인에 대해서 유의할 점과 더불어, 좀 더 자세히 설명하고자 합니다.




textillate 플러그인을 사용할 때에는 유의할 점이 있습니다.


지금부터 그 부분을 이야기하도록 하죠.


textillate 플러그인이 동작하는 부분을 포함한 소스코드는 다음과 같이 작성했습니다.


<section class="copyright">

<a href="" data-toggle="modal" data-target="#myModal001">

<div class="title">!</div>

<div class="contents">미대입시의열정과<strong>진정한크리에이티브</strong>를드리겠습니다</div>

</a>

</section>


이 소스코드를 적용 후 jQuery로 textillate 플러그인을 동작시켰습니다.


<script>

$(document).ready(function(){

$("section.copyright .title").textillate({ loop:false, in: { effect: 'fadeIn' }});

$("section.copyright .contents").textillate({ loop:true, in: { effect: 'fadeIn', shuffle: true }, out: { effect: 'fadeOut', shuffle: true } });

});

</script>


그런데 이것의 결과에 한가지 문제가 생겼습니다.


class의 contents 안에 <strong> 태그에 적용된 CSS 속성이 없어져 버립니다.


이 현상은 브라우저에서 소스코드를 실행시켜 보면 원인이 뭔지를 발견하실 수 있을 것입니다.


원래 있던 태그는 스크립트에 의해 ul.text 속성으로 숨겨지고, 새로운 span 태그가 생성되어 스크립트에 의해 동작되기 때문입니다. 원래 있던 태그에 <strong> 태그가 포함되어 있으므로, display:none; 처리되어 사라진 것입니다.


<div class="contents">

<span style="visibility: hidden;">

<span class="word1" style="display: inline-block; transform: translate3d(0px, 0px, 0px);">

<span class="char1 animated fadeIn" style="display: inline-block; visibility: visible;">미</span>

<span class="char2 animated fadeIn" style="display: inline-block; visibility: visible;">대</span>

<span class="char3" style="display: inline-block; visibility: hidden;">입</span>

<span class="char4 animated fadeIn" style="display: inline-block; visibility: visible;">시</span>

<span class="char5" style="display: inline-block; visibility: hidden;">의</span>

<span class="char6 animated fadeIn" style="display: inline-block; visibility: visible;">열</span>

<span class="char7" style="display: inline-block; visibility: hidden;">정</span>

<span class="char8 animated fadeIn" style="display: inline-block; visibility: visible;">과</span>

<span class="char9" style="display: inline-block; visibility: hidden;">진</span>

<span class="char10 animated fadeIn" style="display: inline-block; visibility: visible;">정</span>

<span class="char11 animated fadeIn" style="display: inline-block; visibility: visible;">한</span>

<span class="char12 animated fadeIn" style="display: inline-block; visibility: visible;">크</span>

<span class="char13 animated fadeIn" style="display: inline-block; visibility: visible;">리</span>

<span class="char14 animated fadeIn" style="display: inline-block; visibility: visible;">에</span>

<span class="char15 animated fadeIn" style="display: inline-block; visibility: visible;">이</span>

<span class="char16" style="display: inline-block; visibility: hidden;">티</span>

<span class="char17 animated fadeIn" style="display: inline-block; visibility: visible;">브</span>

<span class="char18 animated fadeIn" style="display: inline-block; visibility: visible;">를</span>

<span class="char19" style="display: inline-block; visibility: visible;">드</span>

<span class="char20" style="display: inline-block; visibility: hidden;">리</span>

<span class="char21" style="display: inline-block; visibility: hidden;">겠</span>

<span class="char22 animated fadeIn" style="display: inline-block; visibility: visible;">습</span>

<span class="char23 animated fadeIn" style="display: inline-block; visibility: visible;">니</span>

<span class="char24 animated fadeIn" style="display: inline-block; visibility: visible;">다</span>

</span>

</span>

    <ul class="texts" style="display: none;">

       <li class="current">미대입시의열정과<strong class="current">진정한크리에이티브</strong>를드리겠습니다</li>

    </ul>

</div>


이 플러그인의 경우 띄어쓰기를 하면 word1 ~ word* 까지 번호가 매겨지고, 그 단락 내의 단어는 char1 ~ char* 까지 번호가 매겨지는 방식으로 span 태그가 새로 삽입되어 실행됩니다.


따라서 이 부분을 스타일시트로 지정해서 바꿔줘야, 글자의 일부 영역에 원하는 효과를 줄 수 있습니다.


심지어는 글자를 굵게 하는 등의 간단한 효과도요.


지금같은 경우에는 '진정한크리에이티브' 라는 단어에 글자를 굵게 하는 효과를 줄 텐데, 여기에 해당되는 태그는 span.char9 ~ span.char17 까지 입니다. 하지만 이걸 일일히 CSS로 선택해서 일일히 효과를 주는 것은 완전 노가다에 유지보수 측면에서도 문제가 발생합니다. 보통 가장 쉬운 방법이기 하지만... 이렇게 생각하기 쉽죠.


section.copyright .contents span.char9{font-weight:bold;}

section.copyright .contents span.char10{font-weight:bold;}

...

중략

...

section.copyright .contents span.char17{font-weight:bold;}


얼마나 무식한 방법입니까...


이럴 때에는, 범위를 지정할 수 있는 CSS3 속성을 쓰는 것이 좋습니다.


section.copyright .contents span:nth-child(n+9):nth-child(-n+17){font-weight:bold;}






그러니까 핵심은, 이런 플러그인을 사용할 때에는 CSS3의 범위 지정하는 방법을 사용하는게 좋다는 겁니다. CSS3의 범위 지정에 대해서 더 알고 싶으면 다음 사이트를 방문해서 학습해 보시기 바랍니다. 영어의 압박이 있지만, 소스코드랑 그림만 봐도 무슨 뜻인지 거의 이해할 수 있으실 겁니다.


http://nthmaster.com/





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 정도영 2016.01.06 08:23 신고  댓글주소  수정/삭제  댓글쓰기

    이쯤되면 제겐 외국어군요. 좋은 내용 같은데....읽을 지식이 없음이 안타깝습니다. 좋은 한 해 되시길....

티스토리 툴바