Rev. 2.73


Soh Tanaka씨는 jQuery와 CSS를 이용해서 간단한 페이지 벗겨내기 효과를 만들었습니다. 이 것을 응용하면 호기심을 유발하는 광고 컨텐츠를 배치하거나 색다른 페이지 전환효과를 연출할 수 있습니다. 멋진 아이디어네요. 유사한 jQuery 플러그인 으로 Elliott Kember씨의 "The Sexy Curls"도 있습니다.

$("#pageflip").hover(function() { //On hover...
  $("#pageflip img , .msg_block").stop()
    .animate({ //Animate and expand the image and the msg_block (Width + height)
      width: '307px', height: '319px'
    }, 500);
  } , function() {
    $("#pageflip img").stop().animate({ //On hover out, go back to original size 50x52
      width: '50px', height: '52px'
    }, 220);
    $(".msg_block").stop().animate({ //On hover out, go back to original size 50x50
      width: '50px', height: '50px'
    }, 200); //Note this one retracts a bit faster (to prevent glitching in IE)


Got something to add? You can just leave a comment.

Your Reaction Time!