Без кейворда

2018.02.22 2024.10.14

ランディングページやキャンペーンサイトなどでは全画面イメージからスクロールさせるような場合が多くあります。下にスクロールさせたいけど矢印に気づいてもらえないなんてことになってはもともこもありませんね。そこで使えるのが、スクロールを促すための矢印アクションです。 css animationを使った目立ちすぎず、でも気がつきやすい矢印をご用意しました。

browser: ✔︎ ✔︎

css animationで作る矢印アクション[5種] ふわふわと上下に動く .cp_arrows < position: relative; display: flex; height: 100px; justify-content: center; align-items: center; >.cp_arrows .cp_arrow < position: relative; animation: arrow-move06 2s 1s ease-in-out infinite; >.cp_arrows .cp_arrow:before .cp_arrows .cp_arrow:hover:before @keyframes arrow-move06 < 0% < top: 1%; opacity: 0.3;>70% < top: 10%; opacity: 1;>100% < top: 1%; opacity: 0.3;>> 上から下へ入れ替わるように動く .cp_arrows < position: relative; display: flex; justify-content: center; align-items: center; >.cp_arrows .cp_arrow .cp_arrows .cp_arrow:first-child .cp_arrows .cp_arrow:nth-child(2) .cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after .cp_arrows .cp_arrow:before .cp_arrows .cp_arrow:after @keyframes arrow-move07 < 25% < opacity: 0.6;>43% < transform: translateY(1em); opacity: 0.8;>62% < transform: translateY(2em); opacity: 1;>100% < transform: translateY(3em) scale(0.5); opacity: 0;>> 上から下へ流れるように動く .cp_arrows < position: relative; display: flex; height: 300px;/*画面いっぱいにする場合100vh*/ justify-content: center; align-items: center; >.cp_arrows .cp_arrow .cp_arrows .cp_arrow:first-child < animation: arrow-move08 2s ease-in-out infinite; >.cp_arrows .cp_arrow:nth-child(2) < animation: arrow-move08 2s 1s ease-in-out infinite; >.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after .cp_arrows .cp_arrow:before .cp_arrows .cp_arrow:after @keyframes arrow-move08 < 0% < opacity: 0; top: 40%;/*スタート地点(cp_arrowsの高さの40%)*/>70% < opacity: 1;>100% < opacity: 0;>> 上下にバウンドして動く .cp_arrows < position: relative; display: flex; justify-content: center; align-items: center; >.cp_arrows .cp_arrow .cp_arrows .cp_arrow::before, .cp_arrows .cp_arrow::after .cp_arrows .cp_arrow::before .cp_arrows .cp_arrow::after @keyframes arrow-move09 < 0%, 20%, 50%, 80%, 100% < transform: translateY(0);>48% 60% > 上の矢印がバウンドして消える .cp_arrows < position: relative; display: flex; justify-content: center; align-items: center; >.cp_arrows .cp_arrow, .cp_arrows .cp_arrow:before .cp_arrows .cp_arrow .cp_arrows .cp_arrow:before @keyframes arrow-move10 < 0% < opacity: 0.3;>5% < opacity: 1;>100% < transform: translate(-5px, -5px); opacity: 0;>>

copypet.jp

こんな記事はいかがですか？ category Link スポンサー免責事項

📎📎📎📎📎📎📎📎📎📎