最低限おぼえておきたい動き
-順番に現れる(CSS×JS)-

デモページを見る

See the Pen 4-12 順番に現れる(CSS×JS) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

動きを実現する仕組み

要素の動き自体はCSSアニメーションで制御し、動きのスタートを遅らせるCSS animation-delayの秒数を、jQueryを使って制御する。
画面を開いたらすぐ動かす + スクロールをして動かす 両方に対応。

[使用するライブラリ]
* jQuery

HTMLの書き方

  1. head終了タグ直前に自作のCSSを読み込みます。
    <link rel="stylesheet" type="text/css" href="css/4-12.css">
    </head>
  2. body内に順番に出現させたい要素の親に delayScroll、出現させたい要素に box というクラス名をつけます。
    <ul class="flex delayScroll">
    <li class="box">順番に表示 ふわっ</li>
    <li class="box">順番に表示 ふわっ</li>
    <li class="box">順番に表示 ふわっ</li>
    </ul>
  3. body 終了タグ直前に jQuery、動きを制御する自作のJS の2 つを読み込みます。
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <!--自作のJS-->
    <script src="js/4-12.js"></script>
    </body>

自作のCSS内の書き方

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
	opacity: 0;
}

/*==================================================
動かしたい動き(今回は” ふわっ” を採用)
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

自作のJS内の書き方

指定した動かしたい動きのクラス名が順番に出るように設定します。
動きのスタートを遅らせるCSS animation-delay の秒数の値はJavaScript で制御します。

function delayScrollAnime() {
	var time = 0.2;//遅延時間を増やす秒数の値
	var value = time;
	$('.delayScroll').each(function () {
		var parent = this;					//親要素を取得
		var elemPos = $(this).offset().top;//要素の位置まで来たら
		var scroll = $(window).scrollTop();//スクロール値を取得
		var windowHeight = $(window).height();//画面の高さを取得
		var childs = $(this).children();	//子要素を取得
		
		if (scroll >= elemPos - windowHeight && !$(parent).hasClass("play")) {//指定領域内にスクロールが入ったらまた親要素にクラスplayがなければ
			$(childs).each(function () {
				
				if (!$(this).hasClass("fadeUp")) {//アニメーションのクラス名が指定されているかどうかをチェック
					
					$(parent).addClass("play");	//親要素にクラス名playを追加
					$(this).css("animation-delay", value + "s");//アニメーション遅延のCSS animation-delayを追加し
					$(this).addClass("fadeUp");//アニメーションのクラス名を追加
					value = value + time;//delay時間を増加させる
					
					//全ての処理を終わったらplayを外す
					var index = $(childs).index(this);
					if((childs.length-1) == index){
						$(parent).removeClass("play");
					}
				}
			})
		}else {
			$(childs).removeClass("fadeUp");//アニメーションのクラス名を削除
			value = time;//delay初期値の数値に戻す
		}
	})
}

// 画面をスクロールをしたら動かしたい場合の記述
	$(window).scroll(function (){
		delayScrollAnime();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
	$(window).on('load', function(){
		delayScrollAnime();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

この技術を使ったサンプルサイト

バリエーション
を見る

「印象」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top