最近流行りのwebデザイン！ダウンディレクションアローの実装方法！

今回は最近よく見る、ダウンディレクションアローの実装をメモしていきます。

 

ダウンディレクションアローとは？

下にスクロールするように指示する矢印のことです。

何度か見かけたことがあるのではないでしょうか。

http://plokijuhygft.html.xdomain.jp/

 

特徴としては、下にスクロールすることを促しているため、ぴょこぴょこ動くことです。

 

ぴょこぴょこ動かす方法

トータルのコード

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(右へ, 　下へ);によって位置を決めています。

 

 

なんとなくオシャレな感じなのでいいですよ！

簡単に実装できるので、ぜひぜひお試しください！！