ブログやwebサイトをいじっていると『動き』が欲しくなるなってくることってありませんか？
ワードプレスであればプラグインを使って文字や画像などに動きを加えることもできますが、オプションであるプラグインに頼り過ぎてしまうとどうしてもサイトが重たく(動きが遅く)なってしまいます。
そこで覚えておきたいのがcssとjQueryとなるわけですね。
それでは早速。
色々フワッと動かしてみる
僕が使うのは見出し、画像、ポイントをおさえたい文章などです。
見出しをフワッと
見出し
画像をフワッと
ポイントを押さえたい文章をフワッと
ポイントを押さえたいからフワッとさせてます◎
なんとなく動きがあると目がいきますよね。使いすぎるとしつこいと思うので、あくまでも『大事だな』と思うところで使うといいかもしれませんね◎
ここからが本題ですが、どのようにすれば使えるようになるのか。
✔注意
簡単とはいえ、自信のないかたはバックアップをとってから行うようにしましょう。
コピペの順番
まずは下記をコピーします。
テーマエディターにコピペ
<script>
$(function(){
$(window).scroll(function (){
$('.fade').each(function(){
var targetElement = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > targetElement - windowHeight + 200){
$(this).css('opacity','1');
$(this).css('transform','translateY(0)');
}
});
});
});
</script>これをテーマエディター【header.php】の中の<head></head>の間にペーストします。(この意味がよくわからない人は</head>の真上くらいにペーストしましょう。)
基本的にはこれで使えるようになると思います◎
が、ワードプレスのテーマによってはこれでは反応がない場合があります。(僕のがそうでした)
動かない場合は、先ほどペーストした物のさらに真上にこちらも加えましょう。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>これでokかと思います。
追加CSSにコピペ
.fade{
opacity : 0;
transform: translateY(20px);
transition: all 1.2s;
}カスタマイズ画面にある追加CSSにペーストしてください。
カスタムhtmlにコピペ
<img src="ここに写真のurl" class="fade">文章や囲みについても同じような使い方となりますが、classについての説明ははぶかせていただきます。
今回の動きは縦の動きでしたが、横からフワッとも同じようなやり方にはなります。
試してみたい方の参考になれば幸いです◎
この記事を書いた人
NUI ナガトメ
『くせ毛を活かしたショートヘア』をメインに提供している長野の美容師です
『くせ毛の悩み』を解決できるようなブログ運営を目指していますので、NUIには行けないけど『くせ毛について相談したい』と言う方のために専用LINEアカウントを作りました◎
ご活用いただければ幸いです。
『くせ毛の悩み』を解決できるようなブログ運営を目指していますので、NUIには行けないけど『くせ毛について相談したい』と言う方のために専用LINEアカウントを作りました◎
ご活用いただければ幸いです。
ご予約の相談はこちら
