BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
サイト制作でコンテンツがふわっと表示される動きをつけたいときはありませんか?
サイトに動きをつけることで訪れたユーザーに飽きを与えず、サイトの離脱率を下げることができます。

さて、先日Twitterでこのような投稿をしたところ、反響がありましたのでこちらをピックアップします。

今回は簡単に「スクロールしたら、ふわっと要素を出現させる」jQueryのプラグインをご紹介します。

そのプラグインとは「jquery.inview」になります。

inview.jsはスクロールして表示領域に入ったらイベントを開始させてくれるさせてくれるjQueryプラグインです。

jquery.inview配布先

まずはサンプルをご覧ください

See the Pen
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

動きの仕組みの解説です

スクロールしてクラス名[fadeinTrigger]の位置まできたら、[animate_fadeinUp]というクラス名を付与して動かす仕組み。

設定方法

(1) HTML内の動きをつけたい要素にきっかけの機転となるクラス名を付与します。

(2) 直前にjQueryとjquery.inview.jsと自作のJavaScriptを読み込む。

(3) JavaScriptファイル内に「動きのきっかけの起点となるクラス名fadeInUpTriggerが画面に入ったanimate_fadeInUpがHTMLに付与される指定を書く。

ふわっと出現する要素にはopacity:0;を指定する

cssの中に、ふわっと出現させるクラス名fadeInUpTriggerに
非表示からスタートして表示させる透過0の指定を行う

opacity:0;を指定しないと透過なし→透過→透過なしと表示されるので、表示の時にカクカクしてしまいます。

まとめ

「jquery.inview」をインストールしてクラス名をつけるだけで、ふわっと要素を出現させる動きを実装させることができます。
昨今のサイトでは動きをつけることが当たりまえにあるので、このプラグインを取り入れてみてはいかがでしょうか!

【CSS】画像ホバーしたときに浮き上がる・裏返す効果をつける方法画像にマウスホバーした際の効果っていろいろあると思います。色を変えたり、画像を大きくしたり、透明度を変えたり。そこでtransitionプロパティを使うことで、少し複雑な動きもつけることができます。今回は画像ホバーしたときに浮き上がる・裏返す効果をつける方法を紹介します。


【JavaScript】簡単に設置できる郵便番号検索『ajaxzip3』使い方をご紹介!せっかく作成した「お問い合わせフォーム」がなかなか使われず、がっかりしている人はいませんか?フォームを使用してもらうためにはユーザー目線で作成することが必要になります。「こんな機能があったら入力が便利なのに…」と客観的に観察することでいかに使いやすいフォームにするか考えることが重要です。今回は「郵便番号を入力したら住所が自動表示される」機能をご紹介します。