2018.9.12 更新
いろんなサイトで動きのあるデザインが使用されています。
今回はブログにも簡単に実装できるモノをご紹介したいと思います。
スクロールに合わせてふわっと表示させる
まずはデモを見ていただきます。このままページを下にスクロールしていってください↓
デモ
最初非表示だった画像やテキストが、ふわっと浮き上がるように表示されました。
これはcssとjsを使用して簡単に実装できます。
実装方法
CSS
まずはcssからです。
はてなブログでは、編集画面のサイドメニュー内「デザイン」をクリック→サイドメニューのカスタマイズアイコンをクリック→「デザインCSS」から、サイト内のcssを編集することができます。
ここにcssをコピペしたり、自分で記述することで、自身のブログに設定することができます。
記述内容
下記のコードをコピペして下さい。
.fadein { opacity : 0; transform : translate(0, 50px); transition : all 300ms; } .fadein.scrollin { opacity : 1; transform : translate(0, 0); }
「fadein」というclass(クラス)と、「scrollin」というclassを作成しています。これらは表示・非表示を切り替えるためのパーツになります。
classについて簡単に勉強できる記事もどうぞ↓
【初心者必見】ブログを書く上で便利な5つのCSSとclassについて説明する
JS
次にjavascriptです。
編集画面のサイドメニュー内「デザイン」をクリック→サイドメニューのカスタマイズアイコンをクリック→「フッタ」に記述していきます。
記述内容
下記のコードをコピペして下さい。
※jQueryを使用していますが、すでに使用している方は最初の一文を読み込ませる必要はありません。
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
$(function(){ $(window).scroll(function (){ $('.fadein').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 200){ $(this).addClass('scrollin'); } }); }); });
先ほど書いたcssをjsで制御しています。表示・非表示を切り替える役目をしてくれるという訳ですね。
jQueryのバージョンによって、正常に動作しない場合があることが判明しました。うまく動作しないときはバージョンを確認し、1系（～1.12.4）を使用しているのであれば、2系（～2.2.4）か3系（3.0.0～）を読み込ませてみてください。
HTML
記事を書く際にいくつかの記法があると思いますが、基本的に「HTML表示」にして設定していきます。
今回は「見たまま記法」で編集する場合の目線で解説していきます。
記事の編集画面を開きます。そして「HTML編集」をクリックしHTML表示にします。↓こんな感じになりますね。
それでは最初に作成したclass「fadein」を、記事内のふわっと表示させたい部分に設定していきましょう。
例えばデモでご紹介したように、スクロールしていくと画像が表示されるようにしたい場合は、imgタグか、imgタグを囲うpタグなどに設定していきます。
記述内容
<p><img src="画像のURL" alt="" class="fadein"></p>
もしくは
<p class="fadein"><img src="画像のURL" alt=""></p>
これで終了です。
見出し等のテキストに設定したい場合はpタグやh3、h4タグなどに同じようにclassを設定してあげてください。
<h3 class="fadein">最近寒過ぎてヤバい</h3><!-- 見出し --> <p class="fadein">今週も一部の地域では雪が降るとか予報もされてるよね。辛い。家でひきこもっていたいよ。まったく。</p><!-- テキスト -->
まとめ
少し動きを加えることで、読みに来てくれた方の目を引くことができたり、アクセントになると思います。
「このブログ...動くぞ...」みたいな
ただし、広告などに設定するのは規約違反になる可能性が高いのでご注意を。
YUUU BroG