HTML/CSS

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


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

 

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

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

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

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

 

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

 

ぴょこぴょこ動かす方法

トータルのコード

img {/*ダウンディレクションアローの画像*/
  /*2sは2second。つまり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」というアニメーションを2秒かけて行うことを永遠と続く。』

意味です。

 

 

@keyframes dda {}

ここでアニメーションを作成しています。

@keyframes アニメーション名 {}で作成します。アニメーション名はなんでもおけです。

『dda』とは、DownDirectionArrowを縮めたものです。

 

%によってその時点の動きを決めています。

今回は、transform: transrate(右へ,  下へ);によって位置を決めています。

 

 

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

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


ABOUT ME
ささお
3年目iOSエンジニア。 スタートアップで働いておりやす。 プログラミングスクールとエンジニアのキャリアを考えたい。 作ったアプリ - https://apps.apple.com/us/app/loverprofile/id1463563845?l=ja&ls=1