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のコードの下に追加します。

まとめ

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*