JavaScriptの.scrollYで背景のパララックスエフェクト
パララックスエフェクトを実装する時、JavaScriptのライブラリを使えば複雑なものも簡単に実装が可能です。 が、シンプルなものならJavaScriptのコードだけで実装が可能なので、今回はシンプルな「背景のパララック …
JavaScriptの.scrollHeightでコンテンツをもっと見る・閉じるで開閉
以前作った「ボタンをクリックしてコンテンツを展開」するスニペットでは、展開した後に任意で閉じることはできない使用でしたが、この記事ではもっと見る・閉じるを任意でできるようにしてみます。 是非、参考にしてみてください。 目 …
JavaScriptのライブラリVanta.jsでインタラクションな背景アニメーション
JavaScriptのライブラリ「Vanta.js」は、少し違った背景アニメーションを使う場合にピッタリです。 実装も簡単なので、是非最後までご覧いただけると嬉しいです。 目次Vanta.js使用方法Vanta.jsを使 …
JavaScriptのdocument.cookieでフォントサイズを変更してページ遷移しても状態を保持
アクセシビリティ対策で、フォントサイズの変更をネイティブなJavaScriptで実装してみます。 アクセシビリティ対策のフォントサイズを変更する機能は、WordPressならプラグインがあったりしますが、プラグインを使い …
JavaScriptのライブラリsimplePARALLAX.jsでパララックスのスクロールエフェクト
パララックス、いいですよね。 少し平面的なデザイン・レイアウトに、パララックス効果を入れることで、「動き」と「奥行き」を出せるので、そんなことも考慮しつつ使ってみるのもオススメです。 そんな時JavaScriptのライブ …
JavaScriptのwindow.innerHeightで右下にトップに戻るボタンを追従させて表示
JavaScriptなしでも作れるオブジェクトですが、JavaScriptの window.innerHeight を使って、少しスクロールした時に表示される「トップに戻る」ボタンを作ります。 是非、最後までご覧いただけ …
JavaScriptのYouTube Player APIとSwiperでYouTube動画のスライダー
YouTube Player API・・。簡単にプレイヤーの設定が可能で、カスタマイズもしやすく本当便利ですよね。 今回は、そんなYouTube APIとスライダー・カルーセルUIを絡めたスニペットです。 是非、最後まで …
JavaScriptの.indexOf()でURLを部分一致で検索して一致する場合にモーダルを表示
今回は、JavaScriptの .indexOf() の検索を使ってモーダルを表示させてみます。 比較的カスタマイズしやすく、応用させやすいメソッドなので是非最後までご覧いただけると嬉しいです。 目次.indexOf() …
JavaScriptの.prependでページ遷移時に丸い背景が縮小していくオーバーレイを表示
ページ遷移時に、フルスクリーンで出すオーバーレイを少し丸くしてみます。 丸くするだけで、比較的大人しく、親しみやすい雰囲気を出すには向いている印象になります。 今回は、ページ遷移時に丸い背景が縮小していくオーバーレイを表 …
JavaScriptの.addEventListenerのanimationendでアニメーションさせながら画像を時間差で表示
CSSの記述だけでも、いろんな表現やアニメーションもできるようになりました。 そんなCSSで使う animation プロパティに、JavaScriptの .addEventListener の animationend …
