\目次/
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。
その中でも特に勉強になったコードを紹介します。
コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。
あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください!
テキストの動き
「テキストの動き」は見出しやキャッチフレーズといった「伝えたい言葉」を印象付けるために使用すると効果的です。
バラバラに出現
See the Pen
バラバラに出現 by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
流れるように出現(左から右)
See the Pen
流れるように出現(左から右) by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
流れるように出現(右から左)
See the Pen
流れるように出現(右から左) by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
流れるように出現(上から下)
See the Pen
流れるように出現(上から下) by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
流れるように出現(下から上)
See the Pen
流れるように出現(下から上) by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
アルファベットがランダムに変化して出現
See the Pen
アルファベットがランダムに変化して出現 by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
回転
See the Pen
回転 by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
ランダムに出現
See the Pen
ランダムに出現 by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
じわっと出現
See the Pen
じわっと出現 by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
タイピング風に出現
See the Pen
タイピング風に出現 by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
1文字ずつ出現
See the Pen
1文字ずつ出現 by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
背景色が伸びて出現(左から右)
See the Pen
背景色が伸びて出現(左から右) by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
背景色が伸びて出現(右から左)
See the Pen
背景色が伸びて出現(右から左) by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
背景色が伸びて出現(上から下)
See the Pen
背景色が伸びて出現(上から下) by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
背景色が伸びて出現(下から上)
See the Pen
背景色が伸びて出現(下から上) by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
滑らかに出現
See the Pen
滑らかに出現 by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
ほのかに光りながら出現
See the Pen
ほのかに光りながら出現 by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
次回の予定
直感的に作成できるジェネレータを使用したGIFアニメ、PNGアニメ、SVGアニメの「イラスト・オブジェクトの動き」に挑戦してみます \\\\٩( ‘ω’ )و ////