最低限おぼえておきたい動き
-ランダムに現れる(CSS×JS)-
See the Pen 4-13 ランダムに現れる(CSS×JS) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
動きを実現する仕組み
要素の動き自体はCSSアニメーションで制御し、jQueryで指定した要素に動きのクラス名をランダムにつけ、出現するアニメーションのスタートの秒数を制御する。
画面を開いたらすぐ動かす + スクロールをして動かす 両方に対応。
[使用するライブラリ]
* jQuery
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/4-13.css"> </head>
- ページに遷移するとすぐランダムに出現させたい親要素にrandomBoxとクラス名を付け、出現させたい要素に box というクラス名をつけます。
スクロール後にランダムに出現させたい場合は親要素に randomScrollとクラス名を付け、出現させたい要素に box というクラス名をつけます。<ul class="randomBox"> <li class="box">ランダムに表示 ふわっ</li> <li class="box">ランダムに表示 ふわっ</li> <li class="box">ランダムに表示 ふわっ</li> </ul> <ul class="randomScroll"> <li class="box">ランダムに表示 ふわっ</li> <li class="box">ランダムに表示 ふわっ</li> <li class="box">ランダムに表示 ふわっ</li> </ul>
- 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-13.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内の書き方
指定した要素に動かしたい動きのクラス名がランダムにつくように設定します。
// 動きのきっかけの起点となるアニメーションの名前を定義
function moveAnimation(){
//読み込まれたらすぐにランダムに出現
var randomElm = $(".randomBox");//親要素取得
var randomElmChild = $(randomElm).children();//親の子要素を取得
if(!$(randomElm).hasClass("play")){ //親要素にクラス名playが付いてなければ処理をおこなう
randomAnime();
}
function randomAnime(){
$(randomElm).addClass("play");//親要素にplayクラスを付与
var rnd = Math.floor(Math.random() * randomElmChild.length); //配列数からランダム数値を取得
var moveData = "fadeUp";//アニメーション名=CSSのクラス名を指定
$(randomElmChild[rnd]).addClass(moveData);//アニメーションのクラスを追加
randomElmChild.splice(rnd,1);//アニメーション追加となった要素を配列から削除
if(randomElmChild.length == 0 ){//配列の残りがあるか確認
$(randomElm).removeClass("play");//なくなった場合は親要素のplayクラスを削除
}else{
setTimeout(function(){randomAnime();},500); //0.5秒間隔でアニメーションをスタートさせる。※ランダムのスピード調整はこの数字を変更させる
}
}
//スクロールしたらランダムに出現
var randomElm2 = $(".randomScroll");//親要素取得
var randomElm2Child = $(randomElm2).children(); //親の子要素を取得
randomScrollAnime();
function randomScrollAnime(){
var elemPos = $(".randomScroll").offset().top-50;//要素より、50px上まで来たら
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight){
if(randomElm2Child.length >0 ){ //配列数以上であれば処理をおこなう
var rnd = Math.floor(Math.random() * randomElm2Child.length);//配列数から表示する数値をランダムで取得
var moveData ="fadeUp";//アニメーション名=CSSのクラス名を指定
if(animeFlag){//スクロールする度に動作するのでアニメーションが終わるまで処理をさせないようにする
animeFlag = false;//アニメーション処理が終わるまで一時的にfalseにする
$(randomElm2Child[rnd]).addClass(moveData);//アニメーションのクラスを追加
setTimeout(function(){
animeFlag = true;//次の処理をおこなうためにtrueに変更
randomScrollAnime();//自身の処理を繰り返す
},500); //0.5秒間隔で。※ランダムのスピード調整はこの数字を変更させる
randomElm2Child.splice(rnd,1);//アニメーション追加となった要素を配列から削除
}
}
}else{
animeFlag = true;
}
}
}
var animeFlag = true;//スクロールする度に動作するのでアニメーションが終わるまで処理をさせないようにするための定義
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function (){
moveAnimation();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
moveAnimation();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
この技術を使ったサンプルサイト
バリエーション
を見る
「印象」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!