ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 サイトを作っていると「スクロールに応じて何かをさせたい」なんてことをよく思ったりするのではないでしょうか。 0から書いてもいいのですが、簡単にできたら、というときのためのプラグイン「ScrollMagic」を試してみました。 こんな例のような動きがつけられちゃうらしいので、早速紹介していきます。 使うための準備 まずはこちらのGitHubから。 ScrollMagicはjQuery PluginなのでjQueryが必須なのはもちろん、TweenMaxといったライブラリも必要になります。 読み込むときには当然それらも必要になりますので、↓のような感じで準備しましょう。 <script src="js/TweenMax.min.js"></script> <script src="js/jquery.min.js"></script> <script src="
ScrollMagic2系を使って、スクロールに応じたアニメーションをさせてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、づやです。 以前、ScrollMagicについて「ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう」という記事を書いたのですが、気づいたらバージョンが上がって少し使い方が変わっていたので、現時点（2015年06月）での最新バージョン2.0.5の使い方を書こうと思います。 大きな変更点 1番の変更点は、jQueryとGSAP（TweenMax）が必須ではなくなった点です。 いままでは、メジャーなライブラリとは言え2つのライブラリが必須ということで、選択できないシーンもあったのではないでしょうか。 こちらの変更点により、ScrollMagicを選択できるプロジェクトは増えそうです。別途プラグインを読み込むことにより、以前のようにGSAPも使用することが可能です。 また、新たにvelocity.jsにも対応できるようになっています。 スクロールに合わせたア
縦方向にスクロールするクールなティッカーを実装できるjQueryプラグイン「vTicker」:phpspot開発日誌
vTicker 縦方向にスクロールするクールなティッカーを実装できるjQueryプラグイン「vTicker」 ティッカーというと横スクロールなものをイメージされる方も少なくないかもしれませんが、縦にカッコよくスクロールするティッカーが実装できます テキストはulリストで定義して初期化するだけで使えます 最新ニュース等を１行で表示したい場合に使えるプラグインですね 関連エントリ エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 テーブル内容を入力値でフィルタリングできるjQueryプラグイン「FilterTable」 レスポンシブでタッチ端末で使えるオーディオプレイヤ実装jQueryプラグイン「AudioPlayer」 マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」 アプリ風のなめらかなサイドメニューが実装できるjQue
[JS]使い勝手のよい、パネルをスクロールに追従させるスクリプト -Sticky Sidebar
Demo 2 赤枠のナビゲーションは左のカラム内の移動、黒枠のパネルは黒枠内のみ、右のバスケットはページ内全てです。 また、中央のテキスト「Remove」をクリックすると、一時的にそのパネルだけ追従をやめます。 Sticky Sidebarの使い方 オーソドックスなデモを例に実装方法を紹介します。 外部ファイル スクリプトを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <script src="jquery.easing.1.3.js"></script> <script src="stickysidebar.jquery.js"></script> HTML ページは2カラムで、サイドバーにパネルをdiv要素で実装します。 <div id="main">コンテンツ</div> <div id="side"> <div id="
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Examples - ScrollMagic
