可視範囲がトリガーになって動くjQueryを使ったアニメーション見出しを作成してみた

Author

トッド(Todd)
!注意!
カスタマイズは自己責任でお願いします。
jQueryに関しては素人です。

javascriptに関して、一冊の書籍を読み覚えした程度の素人です。

でも、jQueryを使ってみたい!!何かしらは簡単に実装できるんじゃないか?と考えながら約半日がかりで学習した成果を形にしてみました。

HTMLやCSSとは違ってERRORに対して慎重にならないといけない。どうして動かないんだ?とか、悩ませながらもなんとか作り上げることが出来ました。

jQueryデビューだ。

jQueryで作った機能パーツの紹介です。

What Content?

特定の表示領域で動く

はじめてのjQuery。悪戦苦闘しながらもようやく動かすことが出来ました。
知識ある人が見たらこんな簡単なモノ・・・って思うかもしれませんが達成感に満ちています。
ここでは作成したjQueryで動くアニメーションを紹介し、同じように悩める方の参考になればと思います。








ドキドキ

jQueryを書き始める前にHTMLとCSSでアニメーション作成

まず第一に取り掛かることはHTMLの作成です。以下にはdivで区切られたsample1~sample3の3種類の動きを適用させるための要素スペース用意しています。

HTML

<!-- FadeIn -->
<div class="sample1">
 <!--ココに動かす要素-->
</div>
<!-- rightToLeft -->
<div class="sample2">
 <!--ココに動かす要素-->
</div>
<!-- leftToRight -->
<div class="sample3">
 <!--ココに動かす要素-->
</div>

ここからは、さっきのsample1~sample3にそれぞれ3つのアニメーションをCSSのkeframesを用いて作成しています。

以下のコード内では、「フェードイン」「右から左へスライド」「左から右へスライド」となっていますが、好みのアニメーションに数値や語句を変更して活用してみるの良いでしょう。

少しコードが長くなっていますがご理解ください。

以下のコード記載箇所のもう少し下の方までスクロールしてもらうと、この記事で取り上げているアニメーションのサンプルがあるので、こんな感じかと思ってもらえるでしょう。

CSS

<!--フェードイン-->
.FadeIn {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

<!--右から左へスライド-->
.rightToLeft {
    animation: rightToLeft 1.5s ease-in-out;
    -webkit-animation: rightToLeft 1.5s ease-in-out;
}
@keyframes rightToLeft {
    0% {
		transform: translateX(150%);
	}
	50%{
		transform: translateX(-8%);
	}
	65%{
		transform: translateX(4%);
	}
	80%{
		transform: translateX(-4%);
	}
	95%{
		transform: translateX(2%);
	}			
	100% {
		transform: translateX(0%);
	}
}
@-webkit-keyframes rightToLeft {
    0% {
		-webkit-transform: translateX(150%);
	}
	50%{
		-webkit-transform: translateX(-8%);
	}
	65%{
		-webkit-transform: translateX(4%);
	}
	80%{
		-webkit-transform: translateX(-4%);
	}
	95%{
		-webkit-transform: translateX(2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}
 
<!--左から右へスライド-->
.leftToRight {
    animation: leftToRight 1.5s ease-in-out;
    -webkit-animation: leftToRight 1.5s ease-in-out;
} 
@keyframes leftToRight {
    0% {
		transform: translateX(-150%);
	}
	50%{
		transform: translateX(8%);
	}
	65%{
		transform: translateX(-4%);
	}
	80%{
		transform: translateX(4%);
	}
	95%{
		transform: translateX(-2%);
	}			
	100% {
		transform: translateX(0%);
	}	
}
@-webkit-keyframes leftToRight {
   0% {
		-webkit-transform: translateX(-150%);
	}
	50%{
		-webkit-transform: translateX(8%);
	}
	65%{
		-webkit-transform: translateX(-4%);
	}
	80%{
		-webkit-transform: translateX(4%);
	}
	95%{
		-webkit-transform: translateX(-2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}

ワクワク

3種類のアニメーションビジュアルについて

以下の3種類がさっきいったアニメーションのデモになります。この記事に書いてあることをコピペ実装してもらうと以下のような動きをいろんな要素に適用することが出来ます。

フェードイン

フェードイン


右から左へスライドイン

右から左へ


左から右へスライドイン

左から右へ

最後は

jQueryで可視範囲に入ったらアニメーションが起動するコードを書いていくだけ

あと少しで完成に近いですが、ここがポイントです。

ここで少し感情的になります。

トッド

このコードを動かすために今日という1日を費やしました。Wordpressでは$(ドルマーク)が使えないとか、デベロッパーツールのコンソールから修正するたびに表示するERROR表記。マジでしんどいですね。


話を戻して、以下のjQueryコードを「head内」・「body内」とか言われていますが、僕は普通にアニメーションを使用したい記事の一番最後に記述しています。

jQuery

<script type="text/javascript">
(function(jQuery){
jQuery(window).scroll(function(){
  var windowHeight =jQuery(window).height();
  var windowTop =jQuery(window).scrollTop();
  jQuery(".sample1").each(function(){
    var objectImage =jQuery(this).offset().top;
    if(windowTop > objectImage - windowHeight + 100){jQuery(this).addClass("FadeIn")};
  });
  jQuery(".sample2").each(function(){
    var objectImage =jQuery(this).offset().top;
    if(windowTop > objectImage - windowHeight + 100){jQuery(this).addClass("rightToLeft")};
  });
  jQuery(".sample3").each(function(){
    var objectImage =jQuery(this).offset().top;
    if(windowTop > objectImage - windowHeight + 100){jQuery(this).addClass("leftToRight")};
  });
});
})(jQuery);
</script>

ここまでに紹介してきました、HTML・CSS・jQueryのコードで上手く機能してますでしょうか?

なにせ、jQueryを使ったテーマのカスタマイズは初めてなモノですから不格好なところもあると思います。

ここからもっと学習を深めてより良いものが作れたらなと思います。


コメントを残す

メールアドレスが公開されることはありません。