LINE2018.12.03CSSとjQuery(JavaScript)を利用したページ読み込み時に再生されるアニメーションです。CSSでtransitionとtransformを設定しておき、jQueryでtransformの値を変更することでアニメーションを実現しています。言葉はで説明しづらいので、どういう動作なのかはデモページをごらんください。//処理の開始});簡単な解説サンプルではボックスをflexboxで並べていますが、このあたりはお好みで。重要なポイントはCSSのtransitionとjQueryの記述なので主にその解説です。CSSでアニメーションの下準備をするこのアニメーションの肝となる部分のひとつがこちら。scale(0.0);にして見えなくしています。あとはtransitionを設定してtransformの値が変わったときになめらかに動くようにします。cubic-bezierは、ボックスが余計に拡大されてから表示したい大きさに戻るという効果をつけるため、この値を設定しています。これでCSS側の準備が整いました。あとはjQueryでtransformの値を変えてやれば、transitionの設定によってアニメーションになります。li).css('transform','scale(1.0)');と書けばいいのですが、今回は順番にアニメーションをさせたいのでひと手間加えています。//処理の開始ファンクションを作り、その処理をボックス分繰り返すことで順番にアニメーションをさせていきます。li:nth-child('+i+')').css('transform','scale(1.0)');この部分でボックスをひとつだけを指定し、transformの値を変更。ボックス(li要素)の何番目という数字は変数iを使っていますが、最初iには1が代入されているので1番目のボックスが指定されて値が変更されます。これで1番目のボックスがアニメーションで表示されます。その後iに1を足してから、setTimeoutを使って0.1秒後に再びファンクションを呼び出します。li:nth-child('+i+')').css('transform','scale(1.0)');の処理が行われるわけですが、このiの値は1足されて2になっているので2番目のボックスが指定されて値が変更、アニメーションが実行されます。これをボックスの数だけ繰り返すことで、順番にアニメーションが再生されていきます。あとはループを抜けるために、iの数値がli要素の数を超えたら終了するように記述しておきます。li').length){return;}これで0.1秒ごとにボックスが順番に拡大表示されるアニメーションができました。おわりにやはりアニメーションがあると華やかですね。過剰なアニメーションは逆効果だとは思いますが、使い方しだいでは目を引くサイトになりそうです。工夫しだいでいろいろできると思うので試してみてください。LINEmiyakeiをフォローするmiyakeiおいしいソース関連記事Webデザインスクロールの途中からメニューを上に固定して表示スクロールしても画面からメニューが見えなくならないように上に固定する方法です。<heade...Webデザインクリックで横からスライドして現れるメニュースマホのサイトなんかにある、ハンバーガーメニューをクリックすると横からスライドして現れるメニューです。半透明になっている黒の背景をクリックするとメニューを閉じることができます。...Webデザイン訪問回数に応じてスタンプを押すアニメーション(jquery-cookie.jsを使用)ページにアクセスしたらその回数に応じてスタンプを押していくアニメーションです。jquery-cookie.jsを使ってクッキーのデータを取得し、ページに訪問した回数に応じてスタンプの表示やアニメーションを行っています。デモページ...Webデザインサムネクリックで画像を切り替えるレスポンシブのスライダーサムネイルをクリックして画像を切り替えるタイプのレスポンシブに対応したスライダーです。i...Webデザイン整列しているリストをクリックで項目ごとに絞り込み表示flexboxで整列して並んでいるリスト全体からクリックした項目で絞り込み表示させる方法です。ボタンをクリックしたらjQueryを利用して表示非表示を処理しています。<...Webデザイン表示時間のメーター付き、クリックでも自動でも切り替わるスライダークリックでも一定時間ごとに自動でも切り替わるスライダーです。どのくらいで切り替わるかもわかるようにメーターも設置しました。切り替えはやメーターの描画はJavaScript(jQuery)で行っています。コメントをキャンセルメールアドレスが公開されることはありません。RSSWordPress.org。