今回は最近よく見る、ダウンディレクションアローの実装をメモしていきます。
Contents
ダウンディレクションアローとは？
下にスクロールするように指示する矢印のことです。
何度か見かけたことがあるのではないでしょうか。
http://plokijuhygft.html.xdomain.jp/
特徴としては、下にスクロールすることを促しているため、ぴょこぴょこ動くことです。
ぴょこぴょこ動かす方法
トータルのコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
img {/*ダウンディレクションアローの画像*/ /*2sは２second。つまり2秒のこと。*/ animation: dda 2s infinite; } @keyframes dda { 0% {/*0秒時*/ transform: translate(0, 0); /*transform: translate(右,下);*/ } 20% {/*0.4秒時*/ transform: translate(0px, 10px); } 40% {/*0.8秒時*/ transform: translate(0, 0); } } |
animation: dda 2s infinite;
ここのコードの意味は、
『「dda」というアニメーションを２秒かけて行うことを永遠と続く。』
意味です。
@keyframes dda {}
ここでアニメーションを作成しています。
@keyframes アニメーション名 {}で作成します。アニメーション名はなんでもおけです。
『dda』とは、DownDirectionArrowを縮めたものです。
%によってその時点の動きを決めています。
今回は、transform: transrate(右へ, 下へ);によって位置を決めています。
なんとなくオシャレな感じなのでいいですよ！
簡単に実装できるので、ぜひぜひお試しください！！
ABOUT ME
