[JS]ページのスクロール時、天地に紙を折り曲げるエフェクトを加えるスクリプト -FoldScroll

スクロールする際、天地の位置にあるパネルにアニメーションで紙を折り曲げるエフェクトを加えるjQueryのプラグインを紹介します。

サイトのキャプチャ

FoldScroll

この3Dのエフェクトは実験的なもので、紙を折り曲げるエフェクトにはCSS3のperspectiveを使用しているため、現在のところ対応ブラウザはChrome, Safariのみです。

サイトのキャプチャ

Chromeで表示

天のパネルが折り曲がってるのですが、キャプチャだと絵的につまらないですね。

Safari対応なので、iOSでも動作します。

サイトのキャプチャ

iOSで表示

滑らかさと紙の質感がもう少しあると、かなり気持ちいいエフェクトになりそうです。

スクリプトのダウンロードや使い方は、GitHubに掲載されています。

top of page

©2017 coliss