Webページに軽快な視差効果、スクロールすると要素が近づいてくるエフェクトを実装できる軽量のJavaScript -PushIn.js
Post on:2022年6月6日
sponsors
Webページにインタラクティブな視差効果のアニメーションを実装できる軽量のJavaScriptを紹介します。
スクロールすると要素が近づいてくるエフェクトは、Appleのランディングページなどでもよく見かけます。スクロールすると要素が押し出されるように近づくプッシュイン、スクロールすると要素に向かってカメラが近づくドリーインなどのエフェクトを簡単に実装できます。
PushIn.jsの特徴
PushIn.jsはJavaScriptとCSSを使用して、ユーザーがWebページをスクロールしたときに指定した要素のスケールを操作することにより、要素が移動するような錯覚を作り出します。ブラウザに組み込まれているrequestAnimationFrameを使用しており、互換性のあるパフォーマンスの高いエクスペリエンスを提供します。
ES5準拠のすべてのブラウザをサポートします（IE8以下を除く）。
- 依存関係はなし、単体で動作します。
canvas要素はなし。- WebGLもなし。
- MITライセンスで、商用プロジェクトでも無料で使用できます。
PushIn.jsのデモ
デモではシンプルなものから、ネコまで楽しめます。
デモページ: Simple - Zero configuration
シンプルなデモ、パラメーターなしでCSSも最小限、ゼロ構成のセットアップです。
デモページ: Responsive design
pushIn.jsに組み込まれているレスポンシブ機能を使用したデモ。各ブレークポイントのエフェクトのレイアウトと動作を制御します。
デモページ: Building scenes with images
ネコに向かってドリーインします。
PushIn.jsの使い方
Step 1: 外部ファイル
当スクリプトとスタイルシートを外部ファイルとして記述します。
|
1 2 |
<link rel="stylesheet" href="https://unpkg.com/pushin/dist/pushin.min.css"> <script type="text/javascript" src="https://unpkg.com/pushin/dist/umd/pushin.min.js"></script> |
Step 2: HTML
視差効果を与えたい要素に、.pushin-layerを記述します。
|
1 2 3 4 5 6 7 8 |
<div class="pushin"> <div class="pushin-scene"> <div class="pushin-layer">This is the first layer you'll see.</div> <div class="pushin-layer"> This is a second layer, which will be positioned behind the first one. </div> </div> </div> |
Step 3: JavaScript
スクリプトを初期化して、実行します。
|
1 2 3 4 |
import { PushIn } from 'pushin'; const container = document.querySelector('.pushin'); new PushIn(container).start(); |
Step 4: アニメーションの設定
HTMLのdata属性で、アニメーションを設定できます。
|
1 2 3 4 5 6 7 8 9 |
<div class="pushin-scene" data-pushin-from="300,500"> <div class="pushin-layer"> <!-- This layer will be active when the window top scrolls down to 300px on mobile devices, and 500px on tablets or larger. --> </div> </div> |
詳しくは、PushIn.js - HTML attributes referenceをご覧ください。
sponsors
