ども、六崎です。

最近、朝晩はめっきり寒くなってきましたね。
この時期は着ていく服にも迷い、ジャケットを着るか…カーデにするか…
と迷って薄いブラウスとポンチョを選ぶ率が高くなってます。

 

「あ、ポンチョにしよ！」と思うと「ポンチョポンチョーでポンチョーヌ！」って口ずさみたくなります（これもオタクの性か…
声優の福山潤さん（じゅんじゅん）の「気になるアイツはポンチョ〜ヌ」という曲のワンフレーズなのですが…耳に残るんです（笑）
もし機会があれば、是非聴いてもらいたいです。
曲を口ずさみながらポンチョを着る六崎と同じ状況になります。

 

さてさて、今回はTopに戻るボタンを作ってみる！ということで。
サイトの下の方やスクロールするとプイッと途中で出現したりするアイツです。

 

こだわりだすと止まらなくなりますよね。
かくいう弊社サイトもそんな感じでした！
デザインができあがって、最初のミーティングで「トップボタンに触ると矢印がプイプイっと動いて、ツバメが翼開いて飛んでいってほしい」と要望が上がってきて、思考回路ショート寸前でした（笑）
矢印のプイプイはcssのアニメーションで再現できるが、ツバメが翼を閉じたり開いたりはどうするか。
結論は簡単さを求めて画像を2枚用意してcssで入れ替える、という様にしました。
※昔、ドローンのサイトを作った際にもドローンが停止状態から飛んでいく様にする…
という物を作った経験からヒントを得ました。

 

コードはこちらです！（どーーん！

 

 

矢印、プイプイとかは置いといて…
ボタンをクリックすると鳥さんが高速で羽ばたいて上にあがっていきます。

 

ポイントは、クリックして上がっていったはずの鳥さんが下に戻って来て、再度クリックできるというところ！
これ、普通だと一回きりになりがちなんですが…まず検証の時点で弊社スタッフに「戻ってこないの？」と言われそうな気がしたので、戻しました（言われました、正解でした 笑

 

では、コードの説明をします。

 

まずはhtmlからですが…
特段変わったことはしてません。
ただ、鳥や矢印を今回は画像ではなくFont Awesomeを使ってみました。

 

次にjQueryです。
特に凝ったことをしているわけではありません。
最初は.birdに.flyが付いてない状態にしておきます（removeClass）。
ボタン（.top-back）がクリックされたら、鳥（.bird）に.flyを付けてね（addClass）！
でも3000ms（3秒）経ったら、鳥から.flyを取ってね（removeClass）！
と、書いています。

 

そう、ポイントは3秒経ったら.flyを取ってね！ってやつ。
これがないと、クリックしたら.birdに.flyが付きっぱなしになります。
付きっぱなしになったらどうなると思いますか？
…鳥さん、戻ってきません（笑）

 

では、その下の

 

 

は何を書いているかと言いますと…。

 

 

と書いているところだけに反応して、トップに戻るスクロールをしてね！
と指定しています。

 

なぜ、こんなことを書いているかと言いますと、今回弊社サイトではページ内リンクが多数あったんです。
飛び先と着地先の指定が合ってるはずなのに、怪しい動きをした部分があったんですよね。
だから書いたんですが…ページ内リンク無いよーって方は別になくてもOKだと思います。

 

スムーススクロールのぬるぬる〜っとした動きは、その下の

 

1	$("html, body").animate({scrollTop:position}, {duration: 1300}, {easing: 'easeOutSine'}); return false;

 

ってやつがやっています。
1.3秒かけてeaseOutSineの動きで、トップまで戻ってね！としています。

 

そこに例えば、鳥が羽ばたく準備の動きをさせて、上にあがっていく…という動きにしたい場合。
ボタンをポチってすぐに画面の上にスクロールしていってしまうと、鳥が動いてても見ることができませんよね。
そういう時はアニメーションを遅延して発動してね！ってことで先ほどの部分を

 

1	$("html, body").delay(5000).animate({scrollTop:position}, {duration: 1300}, {easing: 'easeOutSine'}); return false;

 

と、してあげます。
delay(5000)の部分が追加部分です。
それを追加することによって、クリック後5秒待ったのち（遅延して）1.3秒かけてeaseOutSineの動きで上にあがっていく…
という感じになります。

 

そして最後にCSSです。
鳥が飛んでいくキッカケはjQueryで行ってますが、その他はほぼcssで動かしています。
.birdに.flyがつくまでは、.bird01はopacity: 1;（透明度100）となってます。
且つ、上記の条件時は.bird02はopacity: 0;（透明度0）となっていて、.bird01が見える状態になっています。

 

逆にボタンをクリックして.birdに.flyがつくと.bird01はopacity: 0;で、.bird02はopacity: 1;となって.bird02が見える状態になります。

 

そして、今回の動き部分で要になってくるanimationです。
.bird01と.bird02にそれぞれanimation-nameがついており、animation-durationとして6秒間でkeyframesの動きをしてね！と
書いてあります。
今回は、下から飛ぶ体制になってちょっと上に行き、あとはビューーン！と上に飛んでいくという仕様になっています。
画像を使う場合は、ここで画像を交互に設定してあげてもいいでしょうし、やり方は様々ですが今回はとりあえず透明度と
動きだけ設定してあります。

 

keyframesはパーセント刻みで細かく設定できるので、上下だけでなく蛇行しながらとかも設定できます。
その際はtransform: traslate(X軸, Y軸);の値を細かく書くことになると思うので、ちょっと根気がいるとは思いますが（笑）

 

機会があったら、下にスクロールしてたら途中でプイッとでてくる奴も紹介しますね！

 

では、また！