ブログBLOG

【応用編】IntersectionObserverをつかおう｜実務から演出系まで、使い方を広げる実装例まとめ【コピペOK】

基礎編では、IntersectionObserverの基本的な仕組みと、「要素が画面に入ったら何かする」というシンプルな使い方を紹介しました。 応用編では、基礎編では触れなかったオプションや機能を活用して、実際の制作でそのまま使えるUI実装をいくつか紹介していきます。 扱う内容は大きく2 ...

【基礎編】IntersectionObserverをつかおう｜スクロールイベント不要で“ふわっと表示”【コピペOK】

スクロールイベントって、実装が複雑だったり、パフォーマンスが気になったりしませんか？ そんなスクロールイベントを置き換えられるかもしれないAPIが、IntersectionObserverです。 IntersectionObserverを使えば、 よく見る“ふわっと表示”をはじめ、 ...

【Swiper】奥行き感のあるパララックス風スライダー実装解説【デモ付】

Webサイトのメインビジュアルやコンテンツ紹介で、ひときわ目を引くスライダー表現を取り入れたいと感じたことはありませんか。 本記事では、センターのスライドが大きく表示され、前後にいくにつれてスライドが小さくなっていく、奥行き感のあるパララックス風スライダーをご紹介します。 視覚的な立体感 ...

JSでスプレッドシートからデータを取得・出力し、動的要素を作成しよう！【html表示】

担当していた案件でJSでスプレッドシートからデータを取得し、動的要素を作成することになりました。 しかし、調べてみると意外にその方法を一から詳しく紹介している記事が見つかりませんでした。 そこで今回はJSでスプレッドシートからデータを取得し、動的要素を作成する方法について一から詳しく紹介します。 ...

JavaScriptでランダム出題の4択クイズを作ろう【配列から質問と回答を取得】

昨今のウェブサイトではさまざまなクイズが公開されていますよね。そんなクイズですが、JavaScriptを使うと簡単に作ることができます。 質問文と回答の選択肢を用意しておき、画面を切り替える、といった方法もありますが、今回は配列の中にある質問文と回答を取得し、HTMLの中身を動的に切り替えるとい ...

jQueryプラグイン「noUiSlider」を使って上限・下限を設定できるレンジスライダーを簡単に実装【デモ付き】

ECサイトなどで価格の範囲を決めて商品を検索する機能があるとき、音量の調整や明るさの調整をするUIのようなデザインで作成されていることがありますね。 このような入力欄を「レンジスライダー」といいます。 レンジスライダーの実装には、input要素のtype属性「range」を利用することができ ...

ローディングアニメーション画面をhtmlで実装【初心者でも簡単！】

ページの読み込み中に数秒間白い画面が続くと、不安になることはありませんか？ ローディングアニメーションを実装することにより、ユーザー側に「ページをしっかり読み込んでいる」ことのアピールができます。 また、最近ではアニメーションを設置することも増えたので、ローディングの時点で視覚的に興味を与えること ...

【jQuery】Yes/No診断コンテンツの実装方法【デモ付き】

医薬品や化粧品のサイトには診断コンテンツが実装されていることが多いです。 ですが、実際に診断コンテンツを実装しようと思っても、どのように作成して良いか分からないと思います。 「サイトに診断コンテンツをを実装したいが方法が分からない」 「実装にはプラグインが必要なのか」 などと実装方法が分からな ...

モーダルを簡単に実装しよう！使い方も解説【Micromodal.js・Modaal】

サイト制作でモーダルを実装することがあります。 なかにはデザインもないのに、途中から実装を依頼されることもあります。 モーダルは モーダルを開いているときは背景を暗くし、背景固定にする 閉じるボタン、または背景をクリックしたらモーダルを閉じる ...

【jQuery】動きのあるアコーディオンメニュー・開閉ボタンまとめ（コピペ用サンプル付き）

アコーディオンメニューとは、最初はメニューの一部だけが表示されていて、 クリックすると隠れていた部分が開閉するタイプのメニューです。 小さいスペースにコンパクトにメニューを設置できるため、スマートフォンでは特に頻繁に使われています。 コーディングをしていると、Webサイトのどこかに必ずと言って ...