ランディングページやキャンペーンサイトなどでは全画面イメージからスクロールさせるような場合が多くあります。
下にスクロールさせたいけど矢印に気づいてもらえないなんてことになってはもともこもありませんね。
そこで使えるのが、スクロールを促すための矢印アクションです。
css animationを使った目立ちすぎず、でも気がつきやすい矢印をご用意しました。
<div class="cp_arrows">
<a href="#" class="cp_arrow"></a>
</div>.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 {/*▼アイテムの設定*/
position: absolute;
content: '▼';
top: 0;
left: 50%;
width: 2em;
height: 2em;
font-size: 2em;
line-height: 2em;
text-align: center;
color: #26c6da;
border: 4px solid #26c6da;
border-radius: 100%;
transition: all 0.5s ease-in;
}
.cp_arrows .cp_arrow:hover:before {/*hover時に回転し色を変更*/
color: #ec407a;
border-color: #ec407a;
transform: rotate(360deg);
}
@keyframes arrow-move06 {
0% { top: 1%; opacity: 0.3;}
70% { top: 10%; opacity: 1;}
100% { top: 1%; opacity: 0.3;}
}<div class="cp_arrows">
<div class="cp_arrow"></div>
<div class="cp_arrow"></div>
<div class="cp_arrow"></div>
</div>.cp_arrows {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.cp_arrows .cp_arrow {/*矢印を配置するベースの設定*/
position: absolute;
width: 60px;
height: 10px;
opacity: 0;/*スタートは透明*/
transform: scale(0.3);/*スタートは30%に縮小*/
animation: arrow-move07 3s ease-out infinite;
}
.cp_arrows .cp_arrow:first-child {/*1秒ずらしてアニメーション*/
animation: arrow-move07 3s ease-out 1s infinite;
}
.cp_arrows .cp_arrow:nth-child(2) {/*2秒ずらしてアニメーション*/
animation: arrow-move07 3s ease-out 2s infinite;
}
.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {/*矢印全体の設定*/
position: absolute;
content: '';
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 100%;
background: #2196f3;
border-radius: 2px;
}
.cp_arrows .cp_arrow:before {/*矢印左の線の位置と傾斜*/
left: 1px;
transform: skewY(30deg);
}
.cp_arrows .cp_arrow:after {/*矢印左の線の位置と傾斜*/
right: 1px;
transform: skewY(-30deg);
}
@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;}
}<div class="cp_arrows">
<div class="cp_arrow"></div>
<div class="cp_arrow"></div>
</div>.cp_arrows {
position: relative;
display: flex;
height: 300px;/*画面いっぱいにする場合100vh*/
justify-content: center;
align-items: center;
}
.cp_arrows .cp_arrow {/*矢印を配置するベースの設定*/
position: absolute;
top: 50%;/*着地点(cp_arrowsの高さの50%)*/
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 10px;
opacity: 0;
}
.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 {/*矢印全体の設定*/
position: absolute;
content: '';
top: 0;
width: 30px;
height: 3px;
background: #E91E63;
}
.cp_arrows .cp_arrow:before {/*矢印左の線の位置と傾斜*/
left: 3px;
transform: rotate(30deg);
}
.cp_arrows .cp_arrow:after {/*矢印左の線の位置と傾斜*/
right: 3px;
transform: rotate(-30deg);
}
@keyframes arrow-move08 {
0% { opacity: 0; top: 40%;/*スタート地点(cp_arrowsの高さの40%)*/}
70% { opacity: 1;}
100% { opacity: 0;}
}<div class="cp_arrows">
<div class="cp_arrow"></div>
</div>.cp_arrows {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.cp_arrows .cp_arrow {/*矢印を配置するベースの設定*/
position: absolute;
width: 60px;
animation: arrow-move09 2s infinite ease-in-out;
}
.cp_arrows .cp_arrow::before,
.cp_arrows .cp_arrow::after {/*矢印全体の設定*/
position: absolute;
content: '';
width: 30px;
height: 3px;
background: #f4511e;
border-radius: 10px;
}
.cp_arrows .cp_arrow::before {/*矢印左の線の位置と傾斜*/
left: 3px;
transform: rotate(30deg);
}
.cp_arrows .cp_arrow::after {/*矢印左の線の位置と傾斜*/
right: 3px;
transform: rotate(-30deg);
}
@keyframes arrow-move09 {
0%, 20%, 50%, 80%, 100% { transform: translateY(0);}
48% {transform: translateY(-20px);}
60% {transform: translateY(-15px);}
}<div class="cp_arrows">
<div class="cp_arrow"></div>
</div>.cp_arrows {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.cp_arrows .cp_arrow,
.cp_arrows .cp_arrow:before {/*矢印全体の設定*/
position: absolute;
content: '';
border-style: solid;
border-color: transparent #d81b60 #d81b60 transparent;
}
.cp_arrows .cp_arrow {/*大きい方の矢印*/
width: 36px;
height: 36px;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.cp_arrows .cp_arrow:before {/*小さい方の矢印*/
width: 20px;
height: 20px;
border-width: 0 2px 2px 0;
animation: arrow-move10 2s infinite ease-in-out;
}
@keyframes arrow-move10 {
0% { opacity: 0.3;}
5% { opacity: 1;}
100% { transform: translate(-5px, -5px); opacity: 0;}
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info