読者です 読者をやめる 読者になる 読者になる

jQueryでスクロールアニメーションを実装してみたよ

こんばんは。

結構利用できそうなかっこいいアニメーションを実装したよ。
これが採用されるかどうかはまだ分からないけど、
結構少ないコードでおしゃれな動きが作れたのでいいかなと。

全体はちょっと覚えてないから一部使った物とかを抜粋して。

メインで使ったのはjQueryだよ。 今回はこちらのサイトを参考にさせてもらいました。(ちょっとねw)
参考サイト
ちなみに開発者ツールスマホサイトにして確認。

結局、やりたい事としては
* よくあるハンバーガーメニューをクリックするとスライドメニューが出現
* メニューの中にページ内リンクを仕込んでおいて
* ページ内リンクをクリックで、そこにアニメーションでゆっくりスクロール+メニューは閉じる
こちらです。

そして、使ったjQueryメソッド
* setTimeout こちら
* animate こちら
* offset こちら ほんと、これだけで実装できちゃうんです。

アニメーション時に、scrollTopで、id持ってる要素のTOPに持ってくるのがちょっと思いつかなかったくらい。
animate({scrollTop: 'this.offset().top'},1000);
thisがそのid指定した要素の事ね
位置の取得に今後も使えそうだよねー。

色んな書き方があるものだなあ、、、

これが最良って訳ではないのは分かって入るけど、自分のレベルでなんとか動くところまで持って来れたから、よし。