動きのあるホームページブログ!!

  • TOP
  • ブログ
  • スクロールする際に画像をフェードさせるJavascriptプラグインのご紹介!!
20161004blog_img1

動くホームページブログ!!

スクロールする際に画像をフェードさせるJavascriptプラグインのご紹介!!

サイト上のぼかされた画像をスクロールに合わせて画像を表示してくれるjavascriptプラグインの「Progressively」ご紹介です。

具体的には、ユーザーがスクロールをして、目的の画像が画面上にスクロールされた時にぼかしをかけた画像が徐々に表示をされるような仕組みです。

また、いくつかのオプションがありますので、表示方法も変更することも可能です。

スクロールした際になんらかのエフェクトがあると注目を集めることができるプラグインです。

下の画像をご覧いただくとわかるとおり、
二つあるIPhoneがぼかされ、次の画像では表示されております。
これは画面上の位置に画像がくるとフェードするように表示されるようになります。

20161004blog_img2

20161004blog_img3

実装方法

HEADの記述

<link rel="stylesheet" src="progressively.min.css"> 

<script type="text/javascript" src="progressively.min.js">

初期化

<script>
    progressively.init({
        onLoadComplete: function() {
            console.log('All images loaded!');
        }
    });
    </script>

HTMLの記述

<figure class="progressive">
            <img class="progressive__img progressive--not-loaded" data-progressive="img/img_001.jpg" src="img/img_001.jpg">
        </figure>

こちらからデモを確認することができます。

Gitからファイルをダウンロードするにはこちら

この記事が気に入ったら
いいね!お願いします。

最新情報をお届けします

関連記事

  1. 20160204blog

    動くホームページブログ!!

    WEB上で本をめくるような電子カタログプラグインのご紹介!!

    本をめくるような電子カタログプラグイン「turn.js」のご紹介です。…

  2. jQuery bluroverlay.js Plugin Demo
  3. 20160825blog

    動くホームページブログ!!

    PDFファイルを手軽に電子カタログに変換できるWEBサービス紹介!!

    今回ご紹介させて頂くのは誰でも手軽にPDFファイルを本のようにめくれる…

  4. ice_screenshot_20160831-012703

    動くホームページブログ!!

    RTLテキスト対応JQueryのコンテンツスライダー・グライダーの作成方法

    グライダーとは自動再生やカスタムスライドコントロール、無限ループ、自動…

  5. bsN695_ipadwosousasurute

    動くホームページブログ!!

    背景動画を用いたWEBサイト!!

    背景動画を用いることによってサイトの雰囲気、サービスの具体的な内容を動…

  6. 20160921blog_img

    動くホームページブログ!!

    レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法!!

    レスポンシブ対応の自動フルスクリーン背景スライドの作成方法のご紹介です…

おすすめ記事

  1. ice_screenshot_20160831-012703
  2. 20160825blog
  3. CoverVid
  4. 20160810blog1
  5. 9eebd6ae3e003dafbcb134405e540da0_s
  6. 20160801blog
  7. 20160630_1

最近の記事

  1. ドラッグ&ドロップ機能を可能にするモーダルポップアッププラグ…
  2. スクロールする際に画像をフェードさせるJavascriptプ…
  3. レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法…
  4. Googleが公表するSEOランキングの3大要素!
  5. RTLテキスト対応JQueryのコンテンツスライダー・グライ…

アーカイブ

  1. 201601190

    制作ツールブログ!!

    ワードプレスを運営するなら入れておきたいお勧めのプラグイン②
  2. CoverVid

    動くホームページブログ!!

    背景にフルスクリーン動画を表示させる「covervid.js」の紹介です!
  3. 201601190

    制作ツールブログ!!

    ワードプレスを運営するなら入れておきたいお勧めのプラグイン①
  4. ice_screenshot_20160101-170519

    SEO対策

    うっかり忘れてしまいそうな検索エンジンへの登録!!
  5. 20160721blog_img1

    WEBデザイン

    WEBデザインには欠かせないフォント特集!!