[B! パララックス] hedeyoshiのブックマーク

HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO

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

hedeyoshi 2012/10/22

あとで読もう。分かりやすそうなパララックス解説。

リンク

視差効果もここまできた！最近のスムーズに動く凄いパララックスWebデザイン

Angry Birds Space: Out ... / Air Jordan 2012 - AJ2012 / 84イラスト室｜イラストレーター HMK84他...全6件

hedeyoshi 2012/04/04

パララックス

リンク

[JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D

複数の画像のスクロールのタイミングをずらして表示するパララックスを簡単に実装できるjQueryのプラグインを紹介します。 jQuery.Smart3D デモページ [ad#ad-2] パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。使用画像 5枚の画像を使用したパララックス Smart3Dの実装一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS スタイルシートでサイズを設定し、好みでborderなどのデザイン

hedeyoshi 2011/07/08

素晴らしい！パララックス簡単実装！

リンク