タグ

ブックマーク / webrocketsmagazine.com (2)

  • マウスにあわせて画像が3D的に追従するサイトを簡単に作れるjQuery jParallaxプラグイン

    jParallaxの紹介とデモ jParallaxプラグインは、マウスに合わせて奥行き感のある3Dのような動きを実現できる、パララックス系のプラグインです。簡単なコードだけで、インタラクティブなエフェクトがかけられるので、JavaScriptが得意でない方でも設置できると思います。 とりあえず、どんなものか下のようなデモを作ってみましたので、見てみてください。 デモを見る 仕組み 下のような感じで、画像を重ねマウス量に応じてそれぞれ、スライドさせています。 jParallaxを使えば、画像を重ねたりマウスに応じて画像をスライドといったことをすべてやってくれます。 使い方 基的な使い方は、とても簡単で、パララックスさせる複数枚の画像をDIVタグで囲み、 そのDIVタグに対して、jparallax() を呼び出すだけです。 <!DOCTYPE html> <html lang="ja"> <

    マウスにあわせて画像が3D的に追従するサイトを簡単に作れるjQuery jParallaxプラグイン
    kiriya_hazime
    kiriya_hazime 2015/12/05
    パララックス。マウスの動きに合わせて画像が動く。
  • 流行のjQueryでスクロールするサイトを集めてみました

    jQueryでコンテンツをスクロールさせる海外サイトを最近見るのですが、あれはかっこいいですね。そこで、今回の記事では、jQueryでコンテンツをスクロールさせているサイトをいくつか紹介しつつ、このタイプのサイトに特有の問題についても触れてみたいと思います。 はじめに コンテンツをスクロールバーではなく、JavaScriptでスクロールさせる場合、ブラウザのスクロールバーが出ないため、「ブラウザからはみ出るコンテンツをどのように扱うか」の課題に直面します。以下のサイトで、この問題をどのように解決しているかにも、注目して見てください。 01. Reverse Büro 自由自在に縦、横方向にスクロールします。マウススクロールにも対応しています。コンテンツ自体がブラウザ幅に合わせて拡大・縮小するのでスクロールは必要ないですね。写真だけのサイトでは、こういった解決策もアリなんだと思います。 ※サ

  • 1