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. Animated menu concept

    JavaScript

    かっこいいアニメーション付きメニュー実装「Animated menu concept」

    Animated menu conceptはかっこいいアニメーション付…

  2. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

  3. animateClick

    JavaScript

    ボタンクリック時にアニメーションをつけれる「animateClick」

    animateClickはボタンをクリックしたときにアニメーションをつ…

  4. Multi-device scrolling menu
  5. Tip

    JavaScript

    シンプルなUIで使いやすいツールチップ実装「Tip」

    TipはシンプルなUIによる使いやすいツールチップを実装することができ…

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP