jQueryでスクロールアニメーションを実装してみたよ
こんばんは。
結構利用できそうなかっこいいアニメーションを実装したよ。
これが採用されるかどうかはまだ分からないけど、
結構少ないコードでおしゃれな動きが作れたのでいいかなと。
全体はちょっと覚えてないから一部使った物とかを抜粋して。
メインで使ったのはjQueryだよ。
今回はこちらのサイトを参考にさせてもらいました。(ちょっとねw)
参考サイト
ちなみに開発者ツールでスマホサイトにして確認。
結局、やりたい事としては
* よくあるハンバーガーメニューをクリックするとスライドメニューが出現
* メニューの中にページ内リンクを仕込んでおいて
* ページ内リンクをクリックで、そこにアニメーションでゆっくりスクロール+メニューは閉じる
こちらです。
そして、使ったjQueryのメソッド達
* setTimeout こちら
* animate こちら
* offset こちら
ほんと、これだけで実装できちゃうんです。
アニメーション時に、scrollTopで、id持ってる要素のTOPに持ってくるのがちょっと思いつかなかったくらい。
animate({scrollTop: 'this.offset().top'},1000);
thisがそのid指定した要素の事ね
位置の取得に今後も使えそうだよねー。
色んな書き方があるものだなあ、、、
これが最良って訳ではないのは分かって入るけど、自分のレベルでなんとか動くところまで持って来れたから、よし。