Webページに軽快な視差効果、スクロールすると要素が近づいてくるエフェクトを実装できる軽量のJavaScript -PushIn.js

Webページにインタラクティブな視差効果のアニメーションを実装できる軽量のJavaScriptを紹介します。

スクロールすると要素が近づいてくるエフェクトは、Appleのランディングページなどでもよく見かけます。スクロールすると要素が押し出されるように近づくプッシュイン、スクロールすると要素に向かってカメラが近づくドリーインなどのエフェクトを簡単に実装できます。

Webページに軽快な視差効果、スクロールすると要素が近づいてくるエフェクトを実装できる軽量のJavaScript -PushIn.js

PushIn.js
PushIn.js -GitHub

PushIn.jsの特徴

PushIn.jsはJavaScriptとCSSを使用して、ユーザーがWebページをスクロールしたときに指定した要素のスケールを操作することにより、要素が移動するような錯覚を作り出します。ブラウザに組み込まれているrequestAnimationFrameを使用しており、互換性のあるパフォーマンスの高いエクスペリエンスを提供します。

ES5準拠のすべてのブラウザをサポートします(IE8以下を除く)。

サイトのキャプチャ

PushIn.js

  • 依存関係はなし、単体で動作します。
  • canvas要素はなし。
  • WebGLもなし。
  • MITライセンスで、商用プロジェクトでも無料で使用できます。

PushIn.jsのデモ

デモではシンプルなものから、ネコまで楽しめます。

デモのキャプチャ

デモページ: Simple - Zero configuration
シンプルなデモ、パラメーターなしでCSSも最小限、ゼロ構成のセットアップです。

デモのキャプチャ

デモページ: Responsive design
pushIn.jsに組み込まれているレスポンシブ機能を使用したデモ。各ブレークポイントのエフェクトのレイアウトと動作を制御します。

デモのキャプチャ

デモページ: Building scenes with images
ネコに向かってドリーインします。

PushIn.jsの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。

Step 2: HTML

視差効果を与えたい要素に、.pushin-layerを記述します。

Step 3: JavaScript

スクリプトを初期化して、実行します。

Step 4: アニメーションの設定

HTMLのdata属性で、アニメーションを設定できます。

詳しくは、PushIn.js - HTML attributes referenceをご覧ください。

sponsors

top of page

©2022 coliss