アニメーション

★ハンバーガーメニュー基礎

2023-03-17

See the Pen
Untitled
by odamiyuki (@aotyan)
on CodePen.

簡単にアニメーション

2023-02-15

Web Animation API

ちょっとした動きであれば、animation.cssが簡単だけれど、
それよりも、もう少し大きな動きをつけたいときは、
「Web Animation API」を使えば、外部ファイルの読み込みの必要もなく、簡単なjavascriptでアニメーションの設定が出来るので、応用すれば色々できそう。

変化前と、変化後の記述のみで動くので簡単

See the Pen
animation api
by odamiyuki (@aotyan)
on CodePen.

表示・非表示

クリックされた時に、javascriptでクラスが追加・削除されることでアニメーションする。
とてもシンプルなコードでいいので、導入しやすい。

クリックで文字が表示・非表示

See the Pen
クリックで表示・非表示
by odamiyuki (@aotyan)
on CodePen.

ブラウザ読み込みで表示

See the Pen
ブラウザ読み込みで表示
by odamiyuki (@aotyan)
on CodePen.

色の変化

keyframe

CSSアニメーションだけで設定

See the Pen
keyframe
by odamiyuki (@aotyan)
on CodePen.

Web Animations API

javascript使用

See the Pen
Web Animations API
by odamiyuki (@aotyan)
on CodePen.

スクロールでヘッダーに色をつけて固定

See the Pen
スクロールでヘッダーに色がつく
by odamiyuki (@aotyan)
on CodePen.

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

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