Javascript

Javascript「swup」の基本的な使い方！【実装例あり】

• 2024.03.26

swupはウェブサイトでページ遷移時のトランジションをスムーズにするためのライブラリです。以下に、swupの基本的な使い方をご紹介します。 概要 swupの基本の使い方として、ページ内容をswupのラッパーに包む方法があります。おおまかな概要としては、サイト全体の共有パーツ（ハンバーグメニュー・フッターなど）は「swup」のラッパー外に置き、遷移する内容を「swup」のラッパーの中に置きます。 H […]

Javascript

【デモあり】barba.js v2でシームレスなサイトを実現する方法

• 2023.07.12

はじめまして！WEB業界に入って1年目！かけだしWEBデザイナーのウズラです。 私の記事では、WEB制作で得た知識をご覧の皆様に共有することで成長してこう、という形になっています。 今回はページ移動をスタイリッシュにする「barba.js」について記述します。 「barba.js v2」とは 「barba.js v2」は簡単に言えば、「pjax」という技術を使ったライブラリの一つです。 そもそも「 […]

Javascript

【デモあり】bxSliderにプログレスバーを設定する方法

• 2023.01.23

今回はjQueryプラグイン[bxSlider]でスライダーを作成し、それにプログレスバーを設定していきます。 bxSliderとは bxSliderの特徴は簡単に設置が可能なこと、レスポンシブ表示に標準で対応していること、オプションが豊富でカスタマイズしやすいこと等です。 bxSliderを使用するにはjQueryが必要にはなりますが、jQueryの利用方法もこの記事で紹介しているので、もし利用 […]

Javascript

【Modaal+Swiper】モーダルの中にスライダーを実装する方法

• 2023.01.17

今回はModaalとSwiperを合わせて使用して、モーダルウィンドウ上にスライダーを表示できるようにします。 このデモでモーダルウィンドウを開くと、その中にスライダーが設置されているのが分かると思います

Javascript

Swiperにプログレスバーを設定する方法【実装例あり】

• 2023.01.13

今回はSwiperで作成したスライダーに、プログレスバーを設置してみたいと思います。 Swiperとは まずSwiperの特徴を簡単にご紹介します。Swiperはスライダーが簡単に実装できるJavaScriptのライブラリです。 SwiperはjQueryを必要としないので、jQueryが要件として使えない場合でも、問題なく使用できます。更にオプションも豊富で、使用者も多いため検索しても様々な使用 […]

Javascript

スライダーからモーダルを起動させる方法【Swiper+Modaal】

• 2023.01.10

今回はSwiperとModaalを合わせて使用して、スライダーからモーダルをウィンドウを表示できるようにします。 下に置いてあるデモではスライダーの画像をクリックすると、モーダルウィンドウが表示されるようになっています。