\目次/
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。
その中でも特に勉強になったコードを紹介します。
コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。
あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください!
ページトップリンク
「ページトップリンク」を使う目的と使いどころはこんな感じです。
おさえておきたいところ
「ページトップリンク」を使う目的はこんな感じです。
- 目的:ページの先頭へ迅速に戻る
- 動きのきっかけ:クリック / スクロール
ページの先頭にスムーススクロール
See the Pen
ページの先頭にスムーススクロール by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
ページの指定の高さを超えたら出現(下から上)
See the Pen
ページの指定の高さを超えたら出現(下から上) by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
ページの指定の高さを超えたら出現(右から左)
See the Pen
ページの指定の高さを超えたら出現(右から左) by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
ページの指定の範囲内で出現(下から上)
See the Pen
ページの指定の範囲内で出現(下から上) by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
ページの指定の範囲内で出現(右から左)
See the Pen
ページの指定の範囲内で出現(右から左) by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
See the Pen
ページの指定の高さを超えたら出現しFooter手前で止まる by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
スクロール途中からリンクボタンの形状が変化
See the Pen
スクロール途中からリンクボタンの形状が変化 by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
リンクボタンをクリックしたら形状が変化
See the Pen
リンクボタンをクリックしたら形状が変化 by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
スクロールの速さを変化させる(jquery.easing)
See the Pen
スクロールの速さを変化させる(jquery.easing) by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
次回の予定
ページ内の目的の場所にスクロールさせる「ページ内リンク」を作ってみようと思います\\\\٩( ‘ω’ )و ////