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

jQuery Text Fade Delayフェードとディレイ(遅延)アニメーションでテキストを表示する「jQuery Text Fade Delay」前のページ

iPhone 7/7 Plusでホームボタンを押した時の強さを変更する設定方法次のページホームボタンを押した時の強さを変更

関連記事

  1. no-image

    JavaScript

    フロントエンドアプリケーションを構築するためのJSライブラリ「HyperApp」

    HyperAppは、フロントエンドアプリケーションを構築するための1K…

  2. JavaScript

    画像やHTML要素に簡単にドロップシャドウをつけられるjQueryプラグイン「pShadow」

    個人的にすごく便利で使う機会がありそなjQueryプラグインの紹介です…

  3. Quttons

    JavaScript

    ボタンの形状やカラーが変化するjQueryプラグイン「Quttons」

    Quttonsはボタンをクリックすると形状やカラーが変化して新しいコン…

  4. GRT Responsive Menu
  5. multi.js

    JavaScript

    検索機能がついたセレクトボックスを実装できる「multi.js」

    multi.jsは検索機能がついた使いやすいユーザーフレンドリーなセレ…

  6. jQuery Accordion

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP