묻고답하기
클릭하면 움직이는 로고
2014.05.16 08:59
/*--[ Logo ]--*/
.garden-logo{float:left}
#logo{position:relative}
#logo .garden-logoi{display:inline-block; width:233px; height:31px; margin-top:30px; background:url(../img/logo.png) no-repeat}
#logo img{margin-top:30px}
위는 로고관련 css 내용입니다.
아래 사이트 처럼 로고에 마우스 오버시 좌우로 흔들리는 효과를 넣고싶은데, 방법좀 알려주십시오.
http://a-cube.co.kr 이 사이트 처럼 로고에 마우스를 가져가면 좌우로 흔들흔들 하는 소스코드를 배울 수 있을까요?
댓글 7
-
XE힘들당휴
2014.05.16 10:35
-
앤서니.
2014.05.16 19:22
아... 정말 감사합니다. 잘 사용하겠습니다!!
-
XE힘들당휴
2014.05.16 19:44
쪽지 잘 받아보았습니다
id값은 한 개만 지정가능합니다.
보내주신 코드 중에 이 부분이 로고가 들어가는 부분인 것 같은데요
<div class="garden-logo"> <a href="{getFullUrl()}" id="logo" tabindex="2"> <!--@if($layout_info->logo)--><img src="{$layout_info->logo}" alt="{Context::getSiteTitle()}"|cond="$current_version > '1.7.0.0'" title="{Context::getSiteTitle()}"|cond="$current_version > '1.7.0.0'" style="margin-top:{$layout_info->logo_y}px"|cond="$layout_info->logo_y" /> <!--@else--><span class="garden-logoi" title="{Context::getSiteTitle()}"|cond="$current_version > '1.7.0.0'"></span><!--@endif--> </a> </div>여기서 <div id="hoverlogo" class="garden-logo animated"> 이 부분에 이렇게 주시면 될 겁니다.
jQuery 부분도 헤더나 레이아웃에 삽입해 주시구요 그래도 안되시면 쪽지로 보내드린 주소에서 확인해 가면서
수정해보세요
-
앤서니.
2014.05.16 20:32
네 다시 해보겠습니다 정말 너무 감사드립니다... (__)
-
앤서니.
2014.05.16 20:34
답글중에 아랫 부분 부터 끝까지 복사해서 붙여넣기 하면 되는게 맞는거지요?
-이렇게 시작하는 css 코드가 맞는건지 잘 몰라서요...
-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;} -
XE힘들당휴
2014.05.16 20:52
누락이 되었네요 ㅠㅠ 죄송합니다 위에 댓글 다시 한번 보세요 수정했습니다
-
앤서니.
2014.05.16 21:07
우와~~~~ 이제 잘 됩니다!!! 정말 감사드립니다!!!
음
헤더 부분에 추가
<script type="application/javascript"> $g = jQuery.noConflict() $g(function () { //logo anim $g("#hoverlogo").hover( function () { $g("#hoverlogo").addClass('wobble'); }, function () { $g("#hoverlogo").removeClass('wobble'); } ); }); </script>스타일에 추가
.animated{ -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -ms-animation-fill-mode:both; -o-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -moz-animation-duration:1s; -ms-animation-duration:1s; -o-animation-duration:1s; animation-duration:1s; } .animated.hinge{ -webkit-animation-duration:1.5s; -moz-animation-duration:1.5s; -ms-animation-duration:1.5s; -o-animation-duration:1.5s; animation-duration:1.5s; } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); } 15% { -webkit-transform: translateX(-10%) rotate(-5deg); } 30% { -webkit-transform: translateX(8%) rotate(3deg); } 45% { -webkit-transform: translateX(-6%) rotate(-3deg); } 60% { -webkit-transform: translateX(4%) rotate(2deg); } 75% { -webkit-transform: translateX(-2%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0%); } 15% { -moz-transform: translateX(-10%) rotate(-5deg); } 30% { -moz-transform: translateX(8%) rotate(3deg); } 45% { -moz-transform: translateX(-6%) rotate(-3deg); } 60% { -moz-transform: translateX(4%) rotate(2deg); } 75% { -moz-transform: translateX(-2%) rotate(-1deg); } 100% { -moz-transform: translateX(0%); } } @-o-keyframes wobble { 0% { -o-transform: translateX(0%); } 15% { -o-transform: translateX(-10%) rotate(-5deg); } 30% { -o-transform: translateX(8%) rotate(3deg); } 45% { -o-transform: translateX(-6%) rotate(-3deg); } 60% { -o-transform: translateX(4%) rotate(2deg); } 75% { -o-transform: translateX(-2%) rotate(-1deg); } 100% { -o-transform: translateX(0%); } } @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-10%) rotate(-5deg); } 30% { transform: translateX(8%) rotate(3deg); } 45% { transform: translateX(-6%) rotate(-3deg); } 60% { transform: translateX(4%) rotate(2deg); } 75% { transform: translateX(-2%) rotate(-1deg); } 100% { transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble; }효과를 줄 div id값에 hoverlogo추가
class값에 animated 추가
이상입니다. 효과가 이뻐서 저도 적용해봤다는