jQuery Parallaxの例。 簡単な視差効果技術
, 時間内のカメ。 またはオリジナルのゲーム ムーンパトロール 。 これらのゲームでは、いくつかの時点で視差技術が観察されます 背景レイヤー さまざまなテクスチャで、異なる速度で移動し、3次元空間の効果が生じます。
Web開発記事でレトロなゲームについて話し始めたのはなぜですか。 最も簡単な答えは「彼らはかっこいいだから」が「そうであるから」であるかもしれませんが、いいえ。 Pararallax Scrollingは、Webデザインの世界に邪魔になる教室の設計コンセプトです。 Nikeは、WeidenとKennedy Marketing Giantsを雇ったときに、このテクニックを最善の成功を兼ね備えていた最初のテクニックは、オリジナルのナイキより良い世界を育成することでした。 サイトナイキの良い世界はその時から更新され、新しいものに置き換えられましたが、他のサイトがありますが、スポーツの飲み物についてのNike-Siteからの最初の視差デザインと非常に似ています。
おそらく、サイトページのスクロール中にこのページ上のいくつかの異なるアイテムが異なる速度で動くことに気づいた。 上から写真に表示されているページを取り上げましょう。 ページがスクロールダウンされると、バックグラウンドで青い点が表示されます（少しぼやけているもの）はスクロールバーと同じ速度で移動しています。 また、あなたはより焦点を当てて前景に嘘をついて、少し一緒に動くことを見るでしょう より高い速度スクロールバーよりも。 これらの点が速くテキストを移動します 0カロリー| .. 自然に甘くなった」そして「製品」のメインのタイトル。 そして最後に、製品自体の画像があり、バックグラウンドで小さくてデフォーカスの両方と、フォアグラウンドで焦点を合わせて嘘をついています。 製品の背景画像はテキストと同じ速度で移動し、前景の製品画像はこのテキストよりも速く動いています。 それはすべて、さまざまな画像が互いに重ね合わされているとき、視差スクロールの理想的なデモンストレーションであり、ページをスクロールするときにさまざまな速度で移動し、3次元効果を生み出します。
視差スクロールは、ページの垂直スクロールや直線でスクロールすることに限定されません。 この声明を確認する理想的な例を実証するニンテンドーの権利を与えます。 私たちの英雄は通常、上記のアクティブなウェブサイトでそれを見たように、私たちの英雄は通常画面に沿って左から右へ水平に移動し、垂直方向に水平に移動していないニンテンドーのゲームを思い出してください。 Markiokart Wiiに乗って、そこに見えることができるいくつかのクールなものについて話しましょう。
あなたが最初に気付くのは、ページのスクロールの方向です - それは垂直ではありませんが、それが上に言われていますが、もともと水平です。 もちろん、それはかっこいいですが、それは新しい概念でもありません。 また、フォアグラウンドの背景、マリオ、ルイジの恐竜ヨシとシェルとの視差効果、スクロール時に異なる速度でシフトされているメインコンテンツの視差効果に気付くでしょう。 しかし、あなたがページに着くとすぐに#Highlightsと#attackの軌跡は完全に水平になるのをやめるでしょう。 #rediscoverと#snesページの間の遷移についても同じことが当てはまります。 画像は彼らを保持するだけではありません 異なるスピード 変位するだけでなく、一般的な方向を水平から垂直に変更します。
あなたのサイトへの視差効果の使用は、人工の3D効果を生み出す可能性によってのみ制限されるべきではないことも注目に値します。 ドイツのWeb Design Studio WebSeitenfactoryのWebサイトは、パラララックスを使用して、さまざまな軌跡のアイコンの動きなど、サイトページに異なる効果を追加することができる方法の例です。
視差スクロールは、それほど多くのコンテンツがないサイトを復活させるのに役立ちます。 あなたのサイト全体がミッションステートメント、または私たちについてのセクションと私たちの連絡先情報で構成されている場合はどうなりますか？ ほとんどの場合、あなたはそれを1ページと特定の条件下であなたが良い1ページのサイトを持っているでしょうが、それは訪問者によって覚えられますか？ ほとんどの場合はそうではありません。 しかし、あなたが彼に少し視差を追加した場合、春/夏の人々はどうでしたか？
私の最初の印象は「ああ、このサイトはきれいに見えます」 しかし、私がそれをスカーかめ始めたとき、印象はすぐに「うわー、このサイトはクールです！」でした。 簡単な視差効果を追加するだけで、悪くて思い出に残るの違いがあります。
Pararallax Scrollingは、スリーブに保持することができる良いトリックです。 そして、複雑な多階層のサイトを作るか、単純なシングルページの名刺サイトにかかわらず、常に適用できます。
Parallaxを持つサイトの例
それらのいくつかはとてもクールです、私は慣れ親しんだことをお勧めします。みなさん、こんにちは。 今日は、簡単な視差効果を作成するために小さなスクリプトについてお話します。
記事は短くなるでしょうが、有益なので、15分後にあなたはあなたの陸絶にPararallaxを追加することができます。 このサイトにこの興味深い効果を追加したいと思ったら、次に読んでください...
サイトへの視差効果とは何ですか
まずそれが何であるかについてあなたに話しましょう。 そのため、Web設計におけるParaludex効果は、背景画像がその上にある要素よりも遅く移動する受信です。 より経験豊富な予約は、マウスのカーソルへの視差の影響を「結び付ける」ではない予約をします。 そして視差の背景を作成するだけです。 続行しましょう。
サイトに視差効果を発揮する方法
だから、最初にjQueryライブラリを接続します。 いつものように、ヘッドタグの間
今、あなたはスクリプトの簡単な視差スクロールをダウンロードする必要があります。 以来、すぐに圧縮されたバージョンを使用することをお勧めします 追加の設定 スクリプト内部は必要ありません。
さて、Pararallax効果を得るためにHTMLページに登録する必要があることを理解しましょう。
スマートランディング。
着陸ページの作成
data-parallax \u003d "scroll"
data-image-src \u003d "piction / bg.pngへのパス"
画像はIMGタグを使用してヘッダーに入れられず、Parallaxを実装したいコンテナ内の属性に直接設定されています。
これで、原則として、あなたは終わることができます、しかしいくつかの言葉：
- 視差が実装されるべきダイビングに他の要素がない場合は、彼に身長を尋ねる必要があります。そうでなければ、あなたは何も見えません。
- 使用の場合は、そうではありません 適応デザインNaturalWidth属性とNaturalHeight属性を使用して、画像の幅と高さをHTMLに直接設定できます。
- データ位置属性を使用して画像を移動できます。 これはCSSのアナログの背景位置です。
あなたが上記の公式プロジェクトページで見つけることができます。
視差の効果は非常に興味深い技術です。 スクロールすると、背景画像はコンテンツよりもゆっくりと移動し、結果は3D空間の錯覚です。 このレッスンでは、簡単なことを示しています 効果的な方法 素晴らしい効果を得てください。
マーキング
この技術は、背景画像の移動速度を制御することに基づいています。 「データ型」および「データ速度」属性を持つ2つのセクションを含むHTMLマーキングを作成します。 属性の割り当ては少し後で表示されます。
タグ
仕様に従って、データから始まる属性は、プライベートデータの格納として処理されます。 さらに、それらはテンプレートには影響しません。
キーパラメータのために、背景画像のスクロール速度を制御する必要があるので、データ型\u003d「背景」とデータ速度\u003d "10"を使用します。
その後タグを追加します
タグの背景をスクロールします
CSS
jQuery Magicに移動する前に各アイテムの背景画像を追加する
#home（url（home.jpg）50％0繰り返し修正。最小高さ：1000px;）#bout（背景：URL（about.jpg）50％0いいえ高さ：1000px;）
そして私達は私達のデモページの要素の残りの部分のためのスタイルを定義します。
#home（url（home-bg.jpg）50％0 50％0繰り返し繰り返します。最小高さ：1000px;高さ：1000px;マージン：0;幅：100％;最大幅：1920px;位置：相対;） #HOME記事（高さ：458ピクセル;位置：絶対; text-align：center; top：150px;幅：100％;）#bout（背景：URL（about-bg.jpg）50％0固定; min-height ：1000px;高さ：1000px;マージン：0自動;幅：100％;最大幅：1920px;位置：相対; -webkit-box-shadow：0 50px RGBA（0,0,0,0,8） ;ボックスシャドウ：0 0 50ピックスRGBA（0,0,0,0,0,8）;）#Bout記事（高さ：458ピクセル;位置：絶対; text-align：center; top：150％;幅：100％; ）
マジックコード
jQueryを使用してください。 標準Document.Ready（）メソッドから始めましょうページの負荷と操作の準備ができていることを確認しましょう。
$（文書）.ready（function（）（））;
今注意が必要です。 ここで最初のことが起こっています - すべての要素における反復
$（文書）.ready（関数（）（ "セクション））。それぞれ（関数（）（var $ bgobj \u003d $（これ）; //オブジェクトを指定）））））））））））））））））;）;
function.each（）では別の関数.scroll（）を追加します.scroll（）は、スクロール開始時に呼び出されます。
$（window）.scroll（function（）（）（）（）
ユーザーがどの程度ページをスクロールしてから、結果の値をデータ速度属性で定義された値で分割する必要があります。
varypos \u003d - （$ window.scrolltop（）/ $ bgobj.data（ "Speed"））;
$ window.scrolltop（） - 上から現在のスクロール値を取得します。 $ bgobj.data（ "speed"）は、マークアップのデータ速属性を表します。 ypos - スクロールに使用される最終値。 しかしながら、バックグラウンドはユーザのスクロールに対して反対方向にシフトされるので、負の値が使用される。
この例では、データ速属性は10です。ブラウザウィンドウが57pxでスクロールされているとします。 これは、57pxが10 \u003d 5.7pxに分割されていることを意味します。
// var coords \u003d "50％" + ypos + "px"の位置を収集します。 // $ bgobj.cssの背景（（BackgancePosition：Coords））をシフトします。
これで、すべてのデータを1つの値に収集する必要があります。 水平静的位置位置を保存するには、XPositionプロパティで50％の値を使用します。 その後、YPositionプロパティの値としてYPOを追加してから、背景の座標を割り当てます。
最後のフォームでは、コードは次のようになります。
$（ドキュメント）.read（function（）（ "セクション"。それぞれ（関数）（var $ bgobj \u003d $（この）; // $（ウィンドウ）.scroll（function（）（varypos \u003d - （$） window.scrolltop（）/ $ BGOBJ.DATA（ "Speed"））; //背景座標の値を集めるvar coords \u003d "50％" + ypos + "px"; // shift $ bgobj.css（（（背景：COORDS））;））;）;）;）;
IEのための固定機。
1つのポイントの残り：古いIEバージョンはタグを撤回できません
// IE Document.CreateElement（ "記事"）の要素を作成します。 Document.CreateElement（ "section"）;
また、すべてのブラウザが等しく表示されるように、CSSリセットファイルを使用します。
視差（Parallax、ギリシャ語。 変更、交替） - オブザーバの場所に応じて、これはリモート背景に対するオブジェクトの可視位置の変化です。 優先順位の最優先事項は、天文学と地理的な天然現象に使用されました。 例えば、そのような太陽の水に反射されたときの太陽の変化およびそれには、本質的にパラララックスがある。
Webデザインパララック効果またはパラララックススクロール - これは、将来の背景画像が前景の要素より遅くなると特別な技術です。 本当に壮観で涼しく見えるので、この技術はまだ適用されています。
三次元空間のこの効果は、互いに重ね合わされ、スクロール時に移動しているいくつかの層で達成されます。 様々なスピード。 この技術では、人工的な3次元効果だけでなく、ページのアイコン、画像、その他の要素に適用することができます。
パラララックス効果の欠点
メインマイナスパララックス- これらはサイトのパフォーマンスに関する問題です。 それはすべての美しくてスタイリッシュに見えますが、JavaScript / jQueryの使用は、Parallaxの効果が作成されているため、ページを大幅に取り、そのロード速度を大幅に削減します。 これは複雑な計算に基づいているためです.JavaScriptは画面上の各ピクセルの位置を制御する必要があります。 場合によっては、クロスブラスチャとクロスプラットフォームに関する問題によっても状況が複雑です。 多くの開発者は、ページの最大2つの要素に関連して視差効果を使用することをお勧めします。
代替ソリューション
CSS 3の出現により、タスクは少し単純化されています。 これにより、資源証明の点ではるかに経済的になるような非常に類似の効果を生み出すことができます。 本質は、サイトの内容が1ページに投稿され、サブパスの移動はCSS 3遷移方法によって発生します。 これは同じパラララックスですが、いくつかの区別があります。事実は、CSS 3のみを使用して異なる速度で移動する動きを達成することが不可能であるということです。 さらに、この規格は最新のブラウザすべてではサポートされていません。 したがって、ここでは困難があります。
出力
視差の効果は、人気がありますが、上記の問題のためにサイトを作成するときに使用するのは急いではありません。 明らかに、あなたはただ時間を必要としている間に、技術が生じた困難を克服することができるようにするだけです。 その間、このオプションはシングルページサイトで使用できます。そのため、正確に記憶され、ユーザーを保持することができます。
JavaScriptのParArallax。
- jQuery。-Effect Parallax Scrolling - マウスホイールの動きに対する視差の効果をバインドするプラグイン
- スクロールデュック。- Parallaxエフェクトを作成するためのプラグイン
- jparallax.- マウスに従って移動している絶対配置レイヤーにページの要素を回します。
| 29.09.2014
良い一日、 読者全員！ 私たちの今日の10の場所からなる私たちの評価は、普通の場所ではないことに専念しています。 このトップ10リストのサイトには、1つの一般的な機能があります - 視差の効果。
特にそれが何であるかわからない人のために、我々はすでに勢いを集中的に獲得し始めているこの効果について簡単に言って、ウェブデザインの分野でますます人気があるようになります。
したがって、視差効果、またはPararallax Scrollingは、バックグラウンド内のオブジェクトがフォアグラウンド内のオブジェクトより遅く動いている特別なテクニックです。 これにより、3D効果が発生し、3次元空間の感が現れる。 視差スクロール - 素晴らしい方法 1ページのサイトにハイライトを追加し、インフォグラフィックを復活させ、履歴に伝えたり、ポートフォリオを示したりします。 そしてモダンなデザイナーの作品の中には、芸術作品との完全な自信と呼ぶことができます...しかし、百回以上を聞くよりも一度見てほうが良いです - 私たちのトップ10のサイトを見て見てください！
注意： 視差スクロールを備えた一部のサイトはさまざまな効果のために機知があります。したがって、特定のコンピュータや携帯機器で「拷問」を除外しません。
グラブ＆ゴー。
私たちの評価の10位は、Grab＆Go Siteを占め、視差効果が装飾として使用され、絵を活性化させます。 カーソルを移動するときは、同時に背面の背景の木や木でどのように移動するかを観察できます。 このレーズンを犠牲にして、このサイトが訪問者に覚えているのが良いことができます。
デジタルハンド
9位のデジタルハンドのウェブサイトでは、視差効果も美しく立って訪問者を覚えています。 マウスカーソルを動かして特別な効果をお楽しみください。
マドウェル。
ニューヨーククリエイティブエージェンシーマッツェルはそのポートフォリオを示しています メインページ サイト、標準的に視差効果を使用しています。 3Dの感覚はタイムスクロールを通してユーザーを残していません。
オークリー。
どんな製品でも正しいアイデアが必要です。 Oakley Pararallaxスクロールウェブサイトのウェブサイトでは、Airbrake MXの利点を実証するために使用されます。 それは単にスクロールを使うだけで、製品はすべての側面から考慮され探求される可能性があるので、それは非常に印象的で有益なことがわかりました。
あなたのお金を問題にする
個人的な財政を気にしない人はほとんどいません。 ウェブサイトはあなたのお金を注意して、私たちの評価の6位を手頃な価格の形で、信用組合の利点を明らかにし、銀行のマイナスについて知らせます。 ここでは、銀行が顧客の投資のために銀行を受け取るか、郵便料金の指数に関するクレジット協同組合の分岐を見つけることができます。
スペースニードル
シアトルを184メートルの高さから探索しますか？ スペースニードルのウェブサイトは、都市宇宙ニードルの最も認識可能な観光スポットに沿ってあなたに仮想歩行を送ります。これは英語で「宇宙針」を意味します。 このタワーの高さは184 m、42メートルの幅で、9,550トンが9,550トンのウィンドスピードで320 km / hにハリケーンと9.1ポイントまでの地震に耐えます。 さらに、塔には25の雷があります。 独特の機能 Space Nidleは、標高159メートル、SkyCity Restaurant and Gift Shopの概要サイトです。 彼女の頂点から、シアトル、レーニア火山、カスケード山脈、エリオットベイ、周囲の島々の中心地を見ることができます。
Peugeot Hybrid4 - グラフィック小説
最大のフランスの自動車メーカープジョーはかなり並外れたハイブリッドドライブシステムハイブリッド4を提示しています4。 私たちの目の前に、エキサイティングなコミックが開いている（つまり、自動再生に入れることができます）。ここで、主人公のタスクは秘密のデータを取得し、悩まなくすることです。 操作をうまく実行するために、Peugeot Hybrid4 Technology - 最大パフォーマンスとダイナミズム（スポーツ）、フルドライブモード、最大スラスト（4WD）、パフォーマンスと保存のバランスのバランスを正常に切り替えることを余儀なくされます。 、静かな操作（ZEV）。
ウォーキング・デッド。
だから、私たちは歩行デッドプロジェクトに行ったトップサイトのリストの3位に近づいた。 サイトを作成するとき、それはすべて「ウォーキングデッド」シリーズの多数のファン、HTML5、CSS3、JavaScript、もちろん視差効果を使用しています。 開発者は、これらすべてのテクノロジをまとめてすべてのプラットフォームで強制し、偉大な仕事をしました。 サイトに着くとスクロールから始めて、ユーザーはゾンビがどのように俳優を作るかについてのコミックな話を見ています。
ユニークでユニークなプロジェクト、ソニーの一部は、そのボリューム、ダイナミクス、そして最小の詳細と思考で印象的なキャンペーンをキャンペーンします。 ソニーよりも製品の最高のプレゼンテーションはおそらく見つけられないことです。 言葉は不要です - ただスクロールして楽しんでください！
フラット対 リアリズム
そして最後に、我々は私たちの評価の最初の場所に達しました。 リアリズム - Intacto Interactive Agencyのブレインチャイルド。 壮観なグラフィック（そしてミュージカル伴奏！）を備えたこの大晦日のプロジェクトは、2種類のデザインの代表者の反対が現実的で平らであるという興味深い先史時代との戦いのミニゲームのジャンルです。 2013年末のメインホルヴィバーに焦点を当てた - 2014年の初めに、クリエイターは失くしていませんでした：出口の後、この印象的な仕事は即座に乱暴に引き起こされ、ブログやニュースで人気のある議論の主題になりました。
サイト開発者は、視差スクロールとHTML5のゲームを統合することができました。 「我々は、サイトのスクロール中から終わりまでの間にすべての行動がスムーズにそして遅滞なく行われるようにするようにそれを作りたいと思いました。 これを行うには、Ajaxがバックグラウンドでデータを更新することが可能になったAjaxを適用しました、 "Alejandro Lazos Agencyのクリエイティブディレクターを説明しました。 このプロジェクトは、新年の前に、2013年末の観客によって代表されました。 スクロールを回す準備をしなさい、あなたはたくさんの魅力的なのを待っています！
