Scrollmagic：楽しいWebデザイン

Webデザインのトレンドは、通常一時的な期間にユーザーに強く受け入れられるサイトの実現に採用されているスタイルに似ています。 2016年のこれまでのトレンドの一部であり、2017年も引き続き調子を整えると思われるのは、 アニメーションとスクロールの多い長いセクションです。

このスタイルがユーザーにとって非常に魅力的で楽しいものであることは秘密ではありません。アニメーションを使用すれば、よく使用されている限り、サイトのナビゲートを直感的で楽しいものにすることができます。このため、jQuery ScrollMagicプラグインを使用して、 ウェブサイトにアニメーションスクロールを含めるチュートリアルを作成しました。

ScrollMagicは、ウェブサイトを移動するときに相互作用を実現するためにJavaScriptで作成されたライブラリです。これは、その前身のSuperscrolloramaを完全に書き直したものであり、そのアーキテクチャは、簡単なカスタマイズと拡張性を提供するプラグインに基づいています。

以下のいくつかを実装したい場合に最適です。

サイトの位置または変位に基づくアニメーション。アニメーションをトリガーするか、スクロールの動きと同期させます。それほど努力することなく視差効果を追加します。無限のスクロールでページを作成し、ajaxでコンテンツのロードを処理します。

ScrollMagicの機能

最適化されたパフォーマンス、軽量、柔軟性、拡張性を可能にします。イベント管理とオブジェクト指向プログラミング。 アダプティブWebデザインをサポートします。 双方向 （水平および垂直）の動きをサポートします。コンテナー（div）内の動きをサポートします。、1つのページに複数表示されます。Firefox26以降、Chrome 30以降、Safari 5.1以降、Opera 10以降、IE 9以降のブラウザで完全に機能します 。GitHubリポジトリには、詳細なドキュメントと多くのアプリケーション例があります。

ScrollMagicを入手する

さまざまな方法で入手できます。

1：GitHub

git clone git：//github.com/janpaepke/ScrollMagic.git

2：バウアー

bower install scrollmagic

3：ノードパッケージマネージャー

npm install scrollmagic

4：CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

Outlookでメールのデザインをカスタマイズする方法もご覧ください。

インストールと使用

インストールは非常に簡単です。使用したいhtmlファイルにカーネルファイルのみを含めます。

;

使用のために、プラグインは1つ以上のシーンが追加されるコントローラー指向のデザインパターンを提供します。これらのシーンは、コンテナが特定のポイントに移動したときにコンテナで何が起こるかを定義するために使用されます。

これは基本的な例です：

// init controller var controller = new ScrollMagic.Controller（）; //シーンを作成しますnew ScrollMagic.Scene（{duration：100、//シーンは100pxのスクロール距離の間続く必要がありますoffset：50 // 50pxのスクロール後にこのシーンを開始します}）.setPin（ "#my-sticky- element "）//シーンの期間の要素を固定します.addTo（controller）; //シーンをコントローラーに割り当てます

より高度な例は、複数のオフセットを実現することであり、そのソースコードは次のようになります。

$（function（）{//ドキュメントの準備ができるまで待つ// initコントローラーvarコントローラー= new ScrollMagic.Controller（）; //トゥイーンを構築var tween = TweenMax.to（ "#animate"、0.5、{scale：3、ease ：Linear.easeNone}）; //シーンを構築var scene = new ScrollMagic.Scene（{triggerElement： "#multiDirect"、duration：400、offset：250}）.setTween（tween）.setPin（ "#animate"） addIndicators（{name： "resize"}）//インジケーターを追加（プラグインが必要）.addTo（controller）; // init controller horizontal var controller_h = new ScrollMagic.Controller（{vertical：false}）; // tween horizontal varを構築するtween_h = TweenMax.to（ "#animate"、0.5、{rotation：360、ease：Linear.easeNone}）; //シーンvar scene_h = new ScrollMagic.Scene（{duration：700}）.setTween（tween_h）を構築します。 setPin（ "#animate"）.addIndicators（{name： "rotate"}）//インジケーターを追加（プラグインが必要）.addTo（controller_h）;}）;

プラグインのドキュメントで、ソースコードを含む多くの例を見つけることができます。

USBスティックを使用してWindows 10のクリーンインストールを行う方法

目次: