Mill's Note
  1. HOME
  2. CSS
  3. CSS小技
  4. cssで作るscrollを促す矢印-画像mask版(コピペOK)

【CSS小技】cssで作るscrollを促す矢印-画像mask版(コピペOK)

LPのファーストビューなどでまれに見かける「scrollを促す下矢印のアニメーション」。

こちらは矢印の画像を使うスクロールアニメーション。cssの画像maskで作るので、バランスやサイズは画像次第。

画像さえ作ってしまえばコードもシンプルで、サイズやバランスをあまり変えないならお勧めです^^

最初に画像を用意する手間はありますし、サイズを変えると線幅が変わる、縦横のバランスを変えるには別の画像を用意する必要がある、、と使い回しには手間がかかりますが、全てcssでやるよりコードはシンプル^^

１回こっきりとかあまり変更しないなら、こちらの方が楽かな^^;

cssのみで作るタイプはこちら ▶

CSSと画像で作る矢印アニメーション 【デモ&コード】

画像でマスクをかけて背景を動かすアニメーション。

サイズを変えたり使い回しする予定が多い場合は、一部のオーバライドだけで変更できる cssのみで作る矢印アニメ もお勧めです^^

矢印アニメーションのコード
HTML code
<div class="masked"></div>
CSS code
.masked {
  aspect-ratio: 4 / 15; /* 画像の横縦比 */
  height: 150px;        /* 出来上がりの高さ */
  background-color: #fff;
  -webkit-mask-image: url("https://画像フルパス/arrow.svg"); /* マスク ベンダープレフィックス */
  mask-image: url("https://画像フルパス/arrow.svg"); /* 矢印(マスク)画像 */
}
.masked::before {     /* ここを動かして背景色を変化 */
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  transform: translateY(-100%);
  background-color: #000;
  animation: scroll 8s ease-out infinite;
}
@keyframes scroll {
  0%   { opacity: 0; transform: translateY(-100%); }
  25%  { opacity: 1; transform: translateY(0); }
  45%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: .5; transform: translateY(100%); }
  100% { opacity: 0; transform: translateY(100%); }
}
CSS animation の説明はこちら

コードの説明

アニメーションは、疑似要素を動かしています。タイミングや動きは、お好みで調整してください。

セレクタ説明
-webkit-mask-image:
モダンブラウザはほぼ対応していますが、念のためベンダープレフィックスを入れます。
-webkit- は mask-image:の前に書きます。(逆だと動かないかも。。)
mask-image:相対パスで動かない事があるので、フルパスをお勧めします
.masked::beforeこれが動いてアニメーションします
@keyframes scrollアニメーション用設定

mask-image はちょっと癖があり、記述順やパスなどで動かなかったり、ローカルでは動かない(背景が表示されない)こともあります。

上手く動かない場合は、相対パス → フルパス、ローカルPCではなくテスト環境や本番環境などで試されることをお勧めします。