jQuery/Vanilla Javascript
Luxy.jsの基本的な設定 読み込み HTMLの記述 パララックス効果の速度や方向の設定 視差効果の速度の設定 水平方向に移動 オフセット設定 ななめに動かす Luxyサンプル 今回はVanilla JavascriptのパララックスプラグインLuxy.jsをご紹介します。 普通パララ…
slickのプログレスバー 今更感があってなかなか記事にできなかったslickですが、なんだかんで使いやすく応用しやすいので役立ちそうな内容に絞ってまとめてみました。 slickの基本的な設定 読み込み 基本的な設定をする slickでエンドロールのように滑らかに…
今回はスクロール表示の際にイベントを発生させるプラグイン「inview.js」と画像フィルターCSS（filter）を使用してスクロールしたときのアニメーションを作成していきます。 https://uhaha.net/scrolltrigger-batch/ inview.jsについて CDNでの読み込み ダ…
今回はスクロール時に要素をアニメーションとともに出現させることができるScrollTriggerを使ってデモを作ってみました。 GSAP-ScrollTrigger概要ライブラリ読み込み CDN Download ScrollTriggerを使った複数スクロールアニメーションサンプルデモまとめ GSA…
multiScroll.jsというスクロール系jsプラグインの使ってコスメの商品ページ風のデモを作ってみました。デザイン性の高いプラグインなので少しの工夫でおしゃれなスクロールが作れます。今回は使い方とともにデザイン部分も含めてデモサイトの解説をしていき…
今回はモーダル系ライブラリのMicromodal.jsをサンプルデモ付きで解説していきます。アクセシビリティ対応を謳っているので今後モーダルライブラリの主戦力になる可能性も十分考えられます。 Micromodal.jsとはMicromodal.jsのインストールMicromodal.jsの基…
アニメーション、アラートに長けるモーダルウィンドウ系プラグイン iziModal .jsの使い方、サンプルの解説になります。上記に加えYouTubeやVimeoなどの動画 ・ GoogleMap ・ Ajaxの読み込み、フルスクリーンなども可能です。 基本的なiziModalの使い方クリッ…
ScrollRevealとはスクロール時にふわっと表示されるようなアニメーション設定に便利なプラグインです。今回はバージョンアップしたv4.0.7の基本的な使い方とcssアニメーションとの組み合わせでぼかしの表示の仕方を紹介します。 ScrollRevealの基本的な設定…
なんでもポップアップしてくれるモーダルウィンドウ系jQueryプラグインの使い方第2弾は 【 Modaal 】です。前回サンプル付きでをご紹介したMagnific Popupと比較しつつ解説していきます。 Modaalとは Modaalの基本的な使い方 画像（gallery）形式のポップア…
