おすすめグッズや役立つ情報ブログ

Sedori Plan

jQuery

Web初心者がjQuery 「champagne.js」を使ってランダムにコンテンツがフェードインする方法(サンプル付き)

投稿日:

サイトのメインの画像が小さかったり、何枚も画像があった時にどうやったらインパクトがある表示方法があるか悩んだことがあります。

今回は、web初心者向けにwebサイト上で配布しているスクリプトを使ってランダムにコンテンツがフェードインするjQueryを実装します。

Web初心者がjQuery 「champagne.js」を使ってランダムにコンテンツがフェードインする方法(サンプル付き)

URLhttp://freshtilledsoil.github.io/champagne/

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

ファイルをダウンロード STEP2

ファイルをダウンロード

Download from Github」がありますのでクリックしてください。
「Download from Github」をクリックするとファイル一式をダウンロードできます。

データを解凍します STEP3

「Download from Github」をサイトからダウンロードして、zipファイルを解凍します。

データを解凍します

データが入っています。

HTMLに実際に動く記述を書きます STEP4

HTMLを設置します STEP5

画像のパスはご自身の環境に合わせてください。

CSSを記述します STEP6

champagne.jsのjQueryファイルを付けます STEP7

champagne.jsのjQueryファイルを付けます

赤枠で囲った
「champagne.js」
をSTEP1でjQueryのコードの下に追加します。

まとめ

[サンプル] ランダムにコンテンツがフェードイン

よくわからなかった人もいるかもしれませんが、ランダムで表示させることはなかなかないですが、ぜひ試してみてください。

スポンサーリンク

アドセンス

アドセンス

  • この記事を書いた人
  • 最新記事

toney

サイトの構築、プログラムを制作をしていますtoneyと申します。中小企業、個人のホームページの制作、更新作業も承ります。 筋トレで自分を追い込んでいくのが楽しみです。最近マラソンにはまって2年連続名古屋シティマラソンに出ました。

-jQuery

Copyright© Sedori Plan , 2018 All Rights Reserved.