Mirror Effect

JavaScript

ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

Mirror EffectはWebサイト内でかっこいいミラーエフェクトによるスライドショーを実装できるのが特徴です。画像を反転させてミラーに映っているかのようなエフェクトをWebサイト内に取り入れたい人にはとても参考になるはずです。

Mirror Effect

デモ

デモページを読み込むと、中央から画像が左右にスライド表示されます。オリジナルの画像とそれを反転した画像が表示され、とてもかっこいいミラーエフェクトを確認できます。

PC版では画面右下にコンテンツメニューが表示され、各メニュー項目をクリックすると、それに応じたコンテンツがアニメーション付きで表示されます。

モバイル版では、メニューが画面上部に切り替わります。パソコン、スマホ、タブレットなど、さまざまなデバイスで見やすいのがいいですね。

また、デモはDemo 1、Demo 2、Demo 3と、全部で3種類のデモが用意されています。いくつかパターンがあるので、気になる人はぜひ他のデモもチェックしてみてはいかがでしょうか?

というわけで、ミラーエフェクトを活用したかっこいいスライドショーを実装できる「Mirror Effect」のご紹介でした。

Mirror Effect

関連記事

  1. jquery.stepper.js

    JavaScript

    マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

    jquery.stepper.jsは、マウス操作から手軽に値の増減を行…

  2. LuminJS

    JavaScript

    テキストを徐々にハイライトしていく「LuminJS」

    LuminJSはWebページ上のテキストを徐々にハイライトしていくJa…

  3. no-image

    JavaScript

    Bootstrap 4を使ったステッパープラグイン「bs-stepper」

    bs-stepperはBootstrap 4を使ったステッパーを実装で…

  4. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

  5. Animated Toggle Menu
  6. Multi-Level Accordion Menu

最近の記事

  1. iPhone 11 ProとApple Watch Hermès
  2. cheero Energy Plus mini Wireless 4400mAh
  3. cheero 2 port PD Charger
  4. 台座と紅葉
  5. ニルヴァーナ バターチキンカレー

アーカイブ

PAGE TOP