ランディングページやキャンペーンサイトなどでは全画面イメージからスクロールさせるような場合が多くあります。
下にスクロールさせたいけど矢印に気づいてもらえないなんてことになってはもともこもありませんね。
そこで使えるのが、スクロールを促すための矢印アクションです。
目立ちすぎず、でも気がつきやすいホバーエフェクトを備えた矢印をご用意しました。
<div class="cp_arrows">
<a class="link cp_arrow" href="#">リンクテキスト
<svg class="arrow_icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<g fill="none" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
<circle class="arrow_icon_circle" cx="16" cy="16" r="15.12"></circle>
<path d="M22.364 14.55L17 19.914V8h-2v11.914L9.636 14.55l-1.414 1.414L16 23.742l7.778-7.778z"/>
</g>
</svg>
</a>
</div>.cp_arrows {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.cp_arrows .link {
text-decoration: none;
color: #039be5;
}
.cp_arrows .cp_arrow .arrow_icon {
position: relative;
vertical-align: middle;
transition: transform 0.3s ease;/*hoverで右に5pxスライド*/
}
.cp_arrows .cp_arrow:hover .arrow_icon {
transform: translateX(5px);/*右に5px移動*/
}
.cp_arrows .cp_arrow .arrow_icon_circle {
transition: stroke-dashoffset 0.3s ease;/*hoverでstroke-dashoffsetを100から0にする*/
stroke-dasharray: 100px;/*破線の間隔*/
stroke-dashoffset: 100px;/*pathが始まる場所*/
}
.cp_arrows .cp_arrow:hover .arrow_icon_circle {
stroke-dashoffset: 0px;/*pathが始まる場所*/
}
.cp_arrow path {
fill: #039BE5;
}
.cp_arrow circle {
stroke:#039BE5;
}<div class="cp_arrows">
<a href="#" class="cp_arrowcontainer">
<div class="cp_arrow"></div>
<div class="cp_arrow"></div>
<div class="cp_arrow"></div>
</a>
</div>.cp_arrows {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.cp_arrows .cp_arrowcontainer {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow {
top: 50%;/*hoverで全てを真ん中に集める*/
}
.cp_arrows .cp_arrow {
position: absolute;
left: 50%;
transition: all 0.3s ease-in-out;
}
.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {
position: absolute;
content: '';
display: block;
width: 4px;/*矢印の高さ*/
height: 50px;/*矢印の横幅*/
background: #FF5722;/*矢印の色*/
border-radius: 10px;
transform: translate(-50%, -50%) rotate(-65deg);/*左側の位置と角度*/
transform-origin: bottom right;/*transformの基点*/
transition: all 0.3s ease-in-out;
}
.cp_arrows .cp_arrow:after {
transform: translate(-50%, -50%) rotate(65deg);/*右側の位置と角度*/
transform-origin: bottom left;/*transformの基点*/
}
.cp_arrows .cp_arrow:nth-child(1) {/*1つ目の矢印の位置と透明度*/
top: 30%;
opacity: 0.3;
}
.cp_arrows .cp_arrow:nth-child(2) {/*2つ目の矢印の位置と透明度*/
top: 50%;
opacity: 0.6;
}
.cp_arrows .cp_arrow:nth-child(3) {/*3つ目の矢印の位置と透明度*/
top: 70%;
opacity: 1;
}<div class="cp_arrows">
<a href="#" class="cp_arrowcontainer">
<div class="cp_arrow"></div>
<div class="cp_arrow"></div>
<div class="cp_arrow"></div>
</a>
</div>.cp_arrows {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.cp_arrows .cp_arrowcontainer {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow {
top: 50%;/*hoverで全てを真ん中に集める*/
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow:before {
transform: translate(-50%, -50%) rotate(-45deg);/*hoverで全てを真ん中に集め角度を鋭角に*/
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow:after {
transform: translate(-50%, -50%) rotate(45deg);/*hoverで全てを真ん中に集め角度を鋭角に*/
}
.cp_arrows .cp_arrow {
position: absolute;
left: 50%;
transition: all 0.3s ease-in;
}
.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {
position: absolute;
content: '';
display: block;
width: 4px;/*矢印の高さ*/
height: 50px;/*矢印の横幅*/
background: #009688;
border-radius: 10px;/*矢印の色*/
transform: translate(-50%, -50%) rotate(-60deg);;/*左側の位置と角度*/
transform-origin: bottom right;/*transformの基点*/
transition: all 0.3s ease-in;
}
.cp_arrows .cp_arrow:after {
transform: translate(-50%, -50%) rotate(60deg);/*右側の位置と角度*/
transform-origin: bottom left;/*transformの基点*/
}
.cp_arrows .cp_arrow:nth-child(1) {/*1つ目の矢印の位置と透明度*/
top: 30%;
opacity: 0.3;
}
.cp_arrows .cp_arrow:nth-child(2) {/*2つ目の矢印の位置と透明度*/
top: 50%;
opacity: 0.6;
}
.cp_arrows .cp_arrow:nth-child(3) {/*3つ目の矢印の位置と透明度*/
top: 70%;
opacity: 1;
}<div class="cp_arrows">
<div class="cp_round">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>.cp_arrows {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.cp_arrows .cp_round {/*外側の丸*/
position: relative;
width: 100px;
height: 100px;
border: 3px solid #42a5f5;
border-radius: 100%;
cursor: pointer;
}
/*矢印の設定*/
.cp_arrows span {/*基本設定（矢印線1つのみを基準にする）*/
position: absolute;
display: block;
width: 35px;/*矢印線の長さ*/
height: 5px;/*矢印線の太さ*/
background: #42a5f5;/*矢印線の色*/
border-radius: 3px;
transition: 0.4s ease-in;
z-index: 999;
}
.cp_arrows span:first-child {/*1つ目の矢印線の位置と角度（左下の矢印線）*/
bottom: 30%;
left: 18%;
transform: rotate(30deg);
}
.cp_arrows span:nth-child(2) {/*2つ目の矢印線の位置と角度（右下の矢印線）*/
bottom: 30%;
left: 47%;
transform: rotate(-30deg);
}
.cp_arrows span:nth-child(3) {/*3つ目の矢印線の位置と角度（左上の矢印線）*/
bottom: 55%;
left: 18%;
transform: rotate(30deg);
}
.cp_arrows span:nth-child(4) {/*4つ目の矢印線の位置と角度（右上の矢印線）*/
bottom: 55%;
left: 47%;
transform: rotate(-30deg);
}
/*矢印hover時の設定*/
.cp_arrows .cp_round:hover span:nth-child(1) {/*1つ目の矢印線の角度（左下の矢印線）*/
transform: rotate(-155deg);
}
.cp_arrows .cp_round:hover span:nth-child(2) {/*2つ目の矢印線の角度（右下の矢印線）*/
transform: rotate(155deg);
}
.cp_arrows .cp_round:hover span:nth-child(3) {/*3つ目の矢印線の角度（左上の矢印線）*/
transform: rotate(205deg);
}
.cp_arrows .cp_round:hover span:nth-child(4) {/*4つ目の矢印線の角度（右上の矢印線）*/
transform: rotate(-205deg);
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info