マウスオーバーで紙がペロっとめくれ上がる演出を実現するコード 『3D Hover Folding Effect』

3D Hover Folding Effect
このエントリーをはてなブックマークに追加
PR

3D Hover Folding Effect
By Silke Voigts

DEMO 表示

3d2

 

紙に見立てたエリアをマウスオーバーすることで、ぺろっとめくれ上がる演出がアニメーション化されたものです、めくれ上がった下に何か画像を置いておけば、それが見えるような形で何かに使えそうです

原理は、DIVで何個かに縦にスライスしてそれぞれに3Dに変形するようにしたのものにアニメーション効果を与えることでめくれ上がっている演出を表現しています

 

こちらの作者さんが参考にした画像に3D効果を与えたエフェクトの作成チュートリアルのページ

http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/

 

コードをダウンロード

DOWNLOAD
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)