【jQuery】スクロールで画像に3D効果を掛けられる「tiltedpage_scroll.js」
ランディングページ等のペラページや商品一覧など、要素に3D効果を掛けられるので、アイデア次第では面白い見せ方ができそうなプラグインです。
tiltedpage_scroll.js
Githubに公開されてますのでファイル一式をダウンロードしてください。
使い方はjqueryとダウンロードした「jquery.tiltedpage-scroll.js」を読み込ませます。
Java File
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery.tiltedpage-scroll.js"></script>
あとは以下のようにhtmlを記述してjavaで適用する要素を指定して完成です。
html
<div class="main"> <section class="page1"> ... </section> <section class="page2"> ... </section> ... <section class="last-page"> ... </section> </div>
Java
$(".main").tiltedpage_scroll({ sectionContainer: "> section", angle: 50, opacity: true, scale: true, outAnimation: true });
\ Webデザインに関するお役立ち情報を定期的に配信中 /
- グラデーションのアニメーションを実装できる「Granim.js」
- 動きのあるバブルを背景に設定することができる「bubbly-bg」
- 【jQuery】ページにマーカーを実装することができる「markerPen」
- 【jQuery】チルトホバーエフェクトを実装できる「Tilt.js」
- 【jQuery】ロールオーバー時にテキストをシャッフルさせる「chaffle.js」
- WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )
- 無料で使えるフリーイラスト素材サイト(商用利用可)
- 無料で使用できるフリー画像・写真素材サイト(国内/海外)
- Webデザインの参考サイト | Web Design Clip - Webデザインクリップ -
- LP・ランディングページの参考サイト | Web Design Clip [L]