【jQuery】「ページ先頭へ戻る」ボタンの画像をランダムに切り替えてみる


20160223-jquery-totop

大阪好っきゃ麺」のWEBサイトリニューアルをやってて、ふと”先頭に戻る”のボタン画像をオモロい画像でいろいろ切り替えたいなぁなんてイタズラ心がムクムクと出てきました。

さっそく突っ込んでみたのがこちら
ページ読み込みの都度に抽選して、4回に一回だけゴリラチームのアイコン画像が出てきます。

では実装。
理屈は簡単です。

①ページを読み込んだときにアイコン画像のうちどれを使うかをランダムに決定

②画像をJSで置き換える。

③画面をある程度スクロールしたら指定されたアイコン画像が出現…

たったこれだけww

コードサンプル

あ、コードを仕込むサイトは基本的にWordpressで作成されたものを想定してます。

1.画像を用意

切り替えたい数分だけ画像を用意します。
画像のサイズはCSSでも指定するので同じサイズにそろえといた方が良いです。

画像1:ファイル名…to-top.png

画像1:ファイル名…to-top-2.png

画像ファイルはすべて同じ場所(ここではテンプレートフォルダの直下に作った”images”フォルダ)に保存します。

2.HTML

「先頭に戻る」の基本機能を盛り込むため、フッターの直前位置などに下記のコードを挿入します。

5.CSS

アイコン画像まわりのCSSを既存のstyle.cssなどに追加しておきます。
画像のサイズに合わせてwidthやheightを変更します。

 

4.jQuery

ランダムにアイコン画像を指定して上記のHTMLを読み込むごとに変更する手順から、スクロール移動時にアイコン画像を出現させるスクリプトをヘッダー部分(今回はheader.phpのhead内)に追加します。

こんだけです。

大した機能ではないんですけど、ちょっとだけ楽しくなるってことで(笑)

参考サイト:

[JS]jQuery で画像をランダムに出力する方法

コメントを残す

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

CAPTCHA