動かす際によく使用されている言語など

2018-11-20

JavaScript

外部ファイルを読み込んで動作させる。
jQuery
ParticleJS
Pixi.js
three.js
CreateJS
AOSJS ➡デモ

【パララックス効果】
・Skrollr
・FadeThis
・ScrollMe
・ScrollReveal.js
・wow.js

CSSアニメーション(以下を組み合わせて使用など)

animation・・・ループ有
【いつ何をどう変化させるか、という情報の設定】
・アニメーションの一回分の長さ/待ち時間/繰り返す回数/アニメーションする方向(再生・逆再生)/再生させたり一時停止
・@keyframesで詳細を設定する(開始0% 終了100%)
・CSSに記載する内容において、開始と終了で変化させることができる
transform(変形)・・・ループ無し
【回転/移動/拡大/縮小/傾斜】
・@keyframesで詳細を設定する(開始0% 終了100%)
transition・・・ループ無し
【例:バナーをクリックの際に色の変化 etc】
・主にロールオーバー効果(クリックすると何かが起きる)なので:hoverや:activeなど、要素が変化するためのトリガーが必要

Web Animation API

・javascriptとcss、transformの組み合わせで動く
・外部ファイルの読み込みや@keyframes設定は必要なく、CSSアニメーションと比べると、スクロールや、クリック、ブラウザ読み込みの際といったトリガーを加えることができる

animate.css

animate.cssという外部ファイルを読み込んで動作させる。
指定場所にきたときに動作させたいなどの場合は、追加でwow.jsなどを読み込んで設定する
animate.css

HTML5

Canvas

SVG

WebGL

3D表現
例:java+canvas+WebGL

参考サイト

commteブログ
動くCSSのためのメモ

PAGE TOP