2012年10月17日のブックマーク (2件)

  • [JS]スクロールするのが楽しくなる!多彩なパララックスのエフェクトを簡単に実装できるオープンソースのスクリプト -Jarallax

    Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方 「Demo 3」を例に、実装方法を簡単に紹介します。 外部ファイル 「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jarallax-0.2.3b.js"></script> HTML HTML自体は通常通りに実装し、アニメーションのエフェクトを適用するエレメントには参照できるようid, classなどを付けます。 <h1 class="logo">Jarallax</h1> <div class="container" id="slide1"> <h2>見出し:slide

    kaz_uki_1014
    kaz_uki_1014 2012/10/17
    スクロールすると、ずれたタイミングで背景とコンテンツがスライドしたり、フェードでコンテンツが表示されたりなど、多彩なパララックスのエフェクトを実装できるjQueryのプラグインを紹介します。 JarallaxJarallax -GitHub J
  • HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO

    そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け(※自分含む)のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス(parallax)を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript(jQuery)でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu

    kaz_uki_1014
    kaz_uki_1014 2012/10/17
    HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | クラスメソッド開発ブログ そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け(※自分含む)のサンプルをいくつ