
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)
});
Comments
Got something to add? You can just leave a comment.
주인장만 볼 수 있는 비밀 댓글입니다.
reply edit
^^;
reply edit
오... 확대축소를 이용한 효과네요!!
저런식으로 활용할 수 있다니... 그저 감탄할뿐 -.-d
reply edit
네 멋진 아이디어죠.
reply edit
플래시에서만 구현 가능한 것 같이 보이는.. 그야말로 쳐다볼 수밖에 없는 효과네요 =ㅅ=;
reply edit
아.. 투명한 부분을 이용한 확대 축소 효과였군요. 생각보다 오묘한 방법인데요?!
응용하면 굳이 JQuery 프레임워크를 이용하지 않아도 잘 쓸수 있겠군요 ㅎㅎ
reply edit
그쵸, 웹은 전부 트릭이에요;
reply edit
Your Reaction Time!