僕が実際にWeb制作で使っているJavascriptレシピ集【コピペOK】

こんにちは!フリーランスWebディレクター兼エンジニアののせっち@nosecchi01です。

Javascriptの勉強がてら、jQueryで作っていたスニペットをJavascript(バニラjs)に置き換えました。

かなり溜まってきたので全て公開します。

  • Web制作で使えるJavascriptスニペット集
  • コピペOK(目次から気になるところへジャンプしてください)
  • 個別記事に細かい解説あり!

それでは行ってみましょう。

全スニペットを公開

とりあえず動くものがほしい!という方はこちらを全てコピペしていただければOKです。

See the Pen Javascript Snipets by Yuki Nose (@yukinouz1) on CodePen.

ローディング画面のクルクル

ページロードが終わるまで中のコンテンツを見せない、かつ読み込み中であることを示します。

スムーススクロール

ページ内リンクを押したときにぬるっとスムースにスクロールする動きを実装します。

アコーディオン

Q&Aなどでよく使われるアコーディオンメニューです。最初はコンテンツを隠しておき、クリックで展開します。

スクロールアニメーション

スクロールでふわっと出現するアニメーションです。

上から、下から、右から、左からの4種類をご用意しました。

原理さえわかれば、動きの部分は自由にカスタマイズ可能なようになっています。

モーダルウィンドウ

ボタンを押したら、画面を覆うようにウィンドウを表示させるモーダルウィンドウです。

タブ切り替え

メイン画像、サムネイルを表示すると切り替える、というような動きの実装です。

<解説記事は現在執筆中ですm(_ _)m>

トップへ戻る

クリックするとスーッとトップへ戻るアニメーションを実装します。

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。