Responsive Parallax Drag-slider With Transparent Letters

JavaScript

パララックス効果によるレスポンシブ対応のスライダー「Responsive Parallax Drag-slider With Transparent Letters」

Responsive Parallax Drag-slider With Transparent Lettersは、パララックス効果を用いたレスポンシブ対応のスライダーを実装することができます。ドラッグしながらスライドさせることも可能です。

さまざまな操作からスライドができる

デモ

デモではアムステルダム、ローマ、ニューヨークなどといった、画面いっぱいに広がったカッコイイ画像が表示されます。

画面の左右両端にカーソルを持っていくと、うっすらと白いシャドウがかかり、ここをクリックすると前後にスライド移動することが可能です。

ほかにも、下部に設置されたナビゲーションからのスライドや、ドラッグしながらのスライド移動といったこともできます。

ドラッグしながらスライド移動させるとパララックス効果がわかりやすいと思います。文字が先に移動し、その後から背景が少し遅れて追従してきます。

また、Responsive Parallax Drag-slider With Transparent Lettersは、レスポンシブにも対応しているので、パソコンだけではなくスマホなどのモバイル端末からもしっかり表示させれるのがいいですね。

実装にはJavaScriptとCSSが使われています。

レスポンシブに対応したパララックス効果つきのスライダーを実装したい方は、ぜひ参考にしてみてください。Responsive Parallax Drag-slider With Transparent Lettersの具体的なコードは、以下のページからどうぞ。

Responsive Parallax Drag-slider With Transparent Letters

関連記事

  1. SpriteSpin

    JavaScript

    タッチにも対応した360度ビューを実装できるjQueryプラグイン「SpriteSpin」

    SpriteSpinはプロダクトページなどで役立つ、360度ビューを実…

  2. Intense Images
  3. TypeIt

    JavaScript

    タイピングアニメーションを実装できる「TypeIt」

    TypeItはタイピングアニメーションを実装できるjQueryプラグイ…

  4. JavaScript

    JavaScriptの配列操作をメモがてら整理してまとめてみる

    自分用のメモです。JavaScriptの配列操作に関するメソッドなんか…

  5. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

  6. simpleSlideShow

    JavaScript

    カスタマイズしやすいシンプル・軽量なスライドショー「simpleSlideShow」

    simpleSlideShowは、シンプルで軽量なスライドショーを実装…

最近の記事

  1. フレンチトーストや自家製ソーセージ
  2. ハレイワ スムージー
  3. クローバーで淹れたコーヒー
  4. 雪が降る日本海

アーカイブ

PAGE TOP