[JS]アニメーション付きのPageTOPボタンのサンプル

動作サンプル

See the Pen Up Arrow by Mark Thomes (@WithAnEs) on CodePen.

スクリーンショット

nothover

デフォルトは「UP」という四角いボタンです。

hover2

マウスオンで枠線が円形に代わり、上矢印が表示されます。

hover

更に矢印が上に向かってスクロールするアニメーション付きです。

HTML/CSS

サンプルの方がSCSS形式でしたので、CSS形式にしてみました。
[html]
<span>up</span>
[/html]
[css]
@import url(http://fonts.googleapis.com/css?family=Lato:700);
body {
background: #333333;
font-family: ‘Lato’, sans-serif;
}

span {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -60px;
display: inline-block;
font-size: 26px;
color: #b3c33a;
text-align: center;
width: 120px;
height: 60px;
line-height: 60px;
border: 5px solid #b3c33a;
overflow: hidden;
text-transform: uppercase;
cursor: pointer;
transition: width 0.5s ease-in-out, margin 0.5s ease-in-out, border-radius 0.25s ease-in-out, color 0.25s ease-in-out;
}
span:hover, span.auto {
width: 60px;
margin-left: -30px;
border-radius: 40px;
color: rgba(179, 195, 58, 0);
transition: width 0.5s ease-in-out, margin 0.5s ease-in-out, border-radius 1s 0.25 ease-in-out, color 0.25s ease-in-out 0.25s;
}
span:hover:before, span.auto:before {
-webkit-animation: lineUp 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
}
span:hover:after, span.auto:after {
-webkit-animation: tipUp 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
}
span:before {
position: absolute;
display: inline-block;
content: "";
background: #b3c33a;
width: 5px;
height: 40px;
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -3px;
-webkit-transform: translateY(50px);
}
span:after {
position: absolute;
display: inline-block;
content: "";
width: 20px;
height: 20px;
color: #b3c33a;
border-top: 5px solid;
border-left: 5px solid;
-webkit-transform: rotateZ(45deg);
top: 50%;
left: 50%;
margin-top: -6px;
margin-left: -13px;
-webkit-transform: translateY(50px) rotateZ(45deg);
}

@-webkit-keyframes tipUp {
0% {
-webkit-transform: translateY(50px) rotateZ(45deg);
}

100% {
-webkit-transform: translateY(-70px) rotateZ(45deg);
}
}
@-webkit-keyframes lineUp {
0% {
-webkit-transform: translateY(50px);
}

100% {
-webkit-transform: translateY(-70px);
}
}
[/css]

アニメーションはCSSで実装し、JSで動作制御しているイメージですね。

javascriptのコードや、SCSSについては元ページをご覧ください。

See the Pen Up Arrow by Mark Thomes (@WithAnEs) on CodePen.


http://codepen.io/WithAnEs/pen/Ghjsb

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です