Simplicityをちょっと改造してみた part8 トップへ戻るボタン編

4月の終わりに、Simplicity公式で「Simplicityでトップへ戻るボタンに画像を使用する方法」が投稿されてカスタマイザーからそれ用の画像をアップロードできるようになったりしました。

画像で満足できる人なら、それはそれでよいわけですが、もう少し演出はできないものか?と思われる方もいるでしょう(たぶん
そこで、ちょっとカスタマイズするには面倒といえば面倒ですが、トップへ戻るボタンをアニメーションさせるというのを解説したいと思います。と、言いましてもフェードイン・アウトとか、上下に動くとかそういうのじゃありません。円軌道上をアニメーションさせて出現させてみると言う、言葉で言うとだいそれたアレですが、さほど大したものでもありません(笑)

まずどういうものかを見ていただけるようにいつものfiddleを貼り付けてみたいと思います。

と、貼り付けてみましたが、実は現在のサイトにも同じのが実装してありますので、すでに気づかれた方もいるのではないでしょうか?
ちなみに、まだスマホ用には調整していないので邪魔かも知れません、しばしご容赦下さい(サイズを小さくして、透過させるようにしました、、、がまだやや見にくいので何かしらアイデアを考え中)。

まず実装するにあたり、色々と修正しなくてはなりません。

htmlの構成をやや変更する

Simplicityのトップへ戻るボタンは親テーマbutton-go-to-top.phpに構成が記載されています。元々fontAwesomeのアイコンが入っているので、それを今回は使用しない事からコメントアウトします。そして新たに、ボタンの中身をspanで作ります。ここらはご自由に設定できる部分です。

つまりは、

こういう構造を作りたいわけです。

親テーマjavascriptの該当部分をコメントアウトして無効化して子テーマjavascript.jsに該当機能を新規追加

親テーマjavascript.jsにある該当部分をコメントアウトします。これはコメントが入っているので、有効部分を/*〜*/で囲めばコメントアウトできます。コメントアウトするのは、元に戻す時に簡単に戻せるようにするためです(親テーマなので)。またアップデートされた後は、同じくして該当部分をその都度コメントアウトしないといけません

次に新たに、子テーマjavascript.jsに、スクロールしたらトップへ戻るボタンが表示される部分の処理を書き込みます。
なぜ新たにスクリプトを作ったのかというと、アニメーションさせるためです。fadeIn()やfadeOut()、あるいはslideUp()やslideDown()等は親テーマのスクリプトを流用すればよいのですが、今回はクラスを追加したり変更したりしてアニメーションさせているので新規に書きました。

これがクラスを追加したり変更したりするスクリプトになります。topBtn.on(“click”, function () {の部分は、クリックしたら画面上部に戻る部分です。
行にマークしてある部分は、スクロールが停止した時にのみ動作するようにするための機能です。0.1秒で動作するのであまり意味無さそうですが、スクロール中もクラスを付けたり変更したりしていることを考えると多少動作を軽くすることに貢献できているだろうと思います(何をしているかというと「スクロールが止まったら(マウスの操作が止まったら)」と言う感じのものです。もしこれが無いと常にクラスを付けたり外したりをチェックするので、どうせスクロールが止まった時だけ判定すればよいわけですから余計な処理の無駄を省くという意味合いで付けてあります)。

意味合い的には、スクロールが画面中央あたりにきたら、それまで表示を消しているトップへ戻るボタンにrtt_circle_showと言うクラスを付けて表示、逆に真ん中よりも上に上がるとrtt_circle_hideをつけて非表示にするという事をしています。非表示にするにあたって、flagと言う変数に「表示している場合はtrue」と言う文字通りフラグをもたせ、非表示にする際には、フラグがtrueの時のみ(if (flag){…}部分)が動作するようにしています。

CSSの設定

今回用意したcssはこんな感じになっています。
@keyframesでそれぞれのアニメーションの設定をしています。注目すべきポイントとしては、

この部分でしょうか。表示する場合は別に必要ないのですが非表示にする際に、画面外に消えて、再度通常表示されてしまうのを避けるため、animation: rotate_hide 0.8s both;と最後にbothが入ります。0.8秒で動作完了し、bothで1度だけの表示となるわけです。後はまぁこれといった設定はありません(笑)

このような設定をすることで、トップへ戻るボタン自体が円を書くようにして表示・非表示するアニメーションが追加できます。今回はtransform: rotateを利用しましたが、拡大縮小させたり、同じ位置でグルグル回ったり、ボーダーと言うか線がフェードアウトしながら拡大していくとか、色々な効果を追加することができるだろうと思います。これは基本的に、あまり重要な(特にこれと言って役に立つ)カスタマイズではありませんが、こういうのもできるという可能性みたいなものを感じていただけると良いのではないかと思ったりします。

スポンサーリンク

シェアする

フォローする