カフェサイトのコーディング④

昨日宣言したとおり、コーディングしたカフェサイトにcssとjQueryを使っていくつか動きをつけてみました。

まずはTOPページのメインビジュアルをスライダーに！３枚の画像が一定間隔でくるくると動きます。このページをデザインした際に、「オーストラリア人のご主人が開いていらっしゃるカフェ」という特徴をうまく掲載できなかったので、思い切ってスライダー画像の一枚をオーナーさんの写真にしてみました。以前整骨院のサイトを作った時にも感じたのですが、スライダーを使うと、画面も華やかになるほか、プラスアルファの情報を掲載することもできるようになり、一石二鳥です。

　　　　　　　　　　　　　　　　　↓

　　　　　　　　　　　　　　　　　↓

（３枚の画像が３秒間隔で水平方向に流れます）

次に、css記述でヘッダーナビにホバーを投入。カーソルを合わせると、文字が少しだけふわっと大きくなります。

（分かりにくいですが、文字が少し大きくなります）

同様に、フッターナビの文字には、少し遊び心をプラスして、カーソルを合わせるとくるくると回転するしかけを。

（潰れて見えますが、"news"の文字が回転中）

TOPページ中ほどの、画像の上に配置したリンク文字は、カーソルを合わせるとオレンジ色に色が変わるようにしました。ホバーに加えたしかけはそれぞれちょっとしたことですが、あると少しページがグレードアップしたような感じがして、ささやかな自己満足を感じています。

最後に、本日のチャレンジタスク！インスタの画像表示がこれまで静止画像だったのですが、これもjQueryで自動スライドショーのように秒間隔でくるくる移動するようにコードを加えてみました。これは初の試みでしたので、なかなか難解でしたが、色々と調べた末どうにかこうにか実装することに成功。成功したことに気をよくして、menuページにも搭載してみました。

（正方形のインスタ画像が右から左へ移動します）

以前スクールでjQueryのことを学習したときに、「これだけのコードでこんなに動きのあるサイトになるんだ！」と感激しましたが、久々にjQueryに触れた本日も、その感動と驚きを新たにしたのでした。