Stellar-視覚差スクロールプラグイン
17975 ワード
プラグインのダウンロード先:http://doc.bropaul.com/Stellar.js/ GitHubアドレス:https://github.com/markdalgleish/stellar.js 11つの視覚差スクロール効果のHTML 5サイト：http://www.w3cfuns.com/portal.php?mod=view&aid=714
紹介:
使いやすい——最も便利なParalaxプラグインは、タグにdata属性を追加して実行するだけで、クールな視差スクロールが可能です。ページを右にスクロールして、歩きます。
正確には、ウェブページの要素と背景を正確に並べて、ウェブページの要素であれ、背景であれ、画面の端に到達したり、設定されたオフセット位置に到達したら、きちんと並べられます。同時に自動的に指定の位置に吸着することもできます。
視差スクロール（Paralax Scrrolling）とは、多層背景を異なる速度で移動させ、立体的な運動効果を形成し、優れた視覚体験をもたらすことをいう。今年のウェブページのデザインのホットトレンドとして、ますます多くのウェブサイトがこの技術を適用しました。
プレゼンテーションの効果を見てもいいです。http://www.ok-studios.de/home/
一、視差スクロールとは？
視差効果は、もともとは天文学用語で、私たちが星空を観察すると、私たちから遠い星の移動速度が遅く、私たちに近い星の移動速度が速い。車の上向の窓から見ると、遠くの山々が動いていないかのように感じられますが、近くの田んぼが飛んでいます。多くのゲームでは視差効果を使ってシーンの立体感を高める。簡単なポイントとしては、画面をスクロールする時に発生するウェブページの要素の位置の変化ですが、それぞれの元素の位置の変化のスピードが違っています。ウェブページ内の要素にレベルがずれているという錯覚を引き起こします。これは私達の人体の眼球効果と似ています。多くの製品の商用視差スクロール効果を見て、製品を展示しています。空間の角度とユーザーの体験から、非常に良い効果があります。このような視差スクロール効果は海外のウェブサイトでも多く使われ、ウェブデザインのホットトレンドとなっている。
長いページを通じて、いくつかの驚くべきイラストと図形を利用して、視差スクロール効果を利用して、多層背景を異なる速度で移動させて、立体的な運動効果を形成して、素晴らしい視覚体験をもたらします。完璧に複雑な過程を展示しています。その中に身を置くようにします。マンネリに飽きました。タブレットのデザインは試してみません。
背景を固定してスクロール軸に沿って移動させないということですが、背景を含む容器はスクロールしているので、視覚的な違いは変換シーンと同じように見えます。
二、視差スクロール効果の主な特徴：1、直感的な設計、迅速な応答速度、単ページ2、相違スクロール階層の視差ページに多くの要素が互いに独立してスクロールしています。もし他の階層に来たら、背景層、コンテンツ層、スタンプ層が二から三層まであります。
三、原理
前景と背景によってシーン移動時に異なる視差が生じ、簡単な立体効果が得られる。
ページ上の多くの要素は互いに独立して転がり回っています。もし私たちが他の階層に来たら、二つから三つの層があります。背景層、コンテンツ層、スタンプ層
1、運用の大きな背景
これらの背景画像は一般的に高解像度であり、大図であり、ウェブサイト全体をカバーする。ハイビジョン写真は素早く視聴者を捉える良い方法であり、インパクトのある視覚効果が得られ、ユーザーの視線は思わず大きな背景に落ちてしまいます。
注意:
1、背景図の色、内容は選択時に十分に注意して、前提はユーザーの体験を壊さないようにしてください。でないと、きれいな写真もむだです。
ピクチャーのタイプはできるだけ選択していくつかの比較的に柔らかくて、少し透明な1種類に向かう方がよくて、ウェブサイトの主体の内容のが読むことに影響しないでください、識別して、調和を重んじます。
1.2、大量の画像を特色とするページは、画像のプリロード問題を考慮し、ユーザーによりスムーズな視覚体験を提供する。
2、シンプルな配色でもいいです。純色の背景より直感的で簡潔な色はありません。純粋な色は多くの表現ができます。一つの視差区間の色は2～3種類を使用したほうがいいです。色の透明度を調整して、様々な視覚効果を達成できます。
3、背景レイヤを特定し、スタンプ層とコンテンツ層との関係は、ページ自体の機能によってレイヤーを貼る必要があるかどうかを定義します。スタンプ層の存在は視覚効果をより効果的に伝えるためですが、それが干渉になると、私たちが使用する目的に反します。
コンテンツ層の展示は最も主要で、背景層やレイヤーの派手さに関わらず、デザイナーの設計過程で、コンテンツ層はユーザーの展示を最優先します。
4、物語をする
強力な表現、シンプルなスタイルとデザインの美感が素晴らしいインタラクティブな叙事体験を構成しています。私たちはよくこのような話を聞きます。内容は王道で、技術は内容を実現するためのツールです。強力な情報と綺麗な実行力を結びつけることに成功すれば、人々が好きで、その中で体験することができます。——Wiedin+Kennedy
プラグインはあります。1 Scrrollama 2 curtain.js 3 jQuery-Paarallax 4 stellar.js 5 jparallax 6 Skrollr 7 Parax.js教程Javascript視差効果
実現ソースを提供します。http://adamed.iteye.com/blog/1579555)
紹介:
使いやすい——最も便利なParalaxプラグインは、タグにdata属性を追加して実行するだけで、クールな視差スクロールが可能です。ページを右にスクロールして、歩きます。
正確には、ウェブページの要素と背景を正確に並べて、ウェブページの要素であれ、背景であれ、画面の端に到達したり、設定されたオフセット位置に到達したら、きちんと並べられます。同時に自動的に指定の位置に吸着することもできます。
視差スクロール（Paralax Scrrolling）とは、多層背景を異なる速度で移動させ、立体的な運動効果を形成し、優れた視覚体験をもたらすことをいう。今年のウェブページのデザインのホットトレンドとして、ますます多くのウェブサイトがこの技術を適用しました。
プレゼンテーションの効果を見てもいいです。http://www.ok-studios.de/home/
一、視差スクロールとは？
視差効果は、もともとは天文学用語で、私たちが星空を観察すると、私たちから遠い星の移動速度が遅く、私たちに近い星の移動速度が速い。車の上向の窓から見ると、遠くの山々が動いていないかのように感じられますが、近くの田んぼが飛んでいます。多くのゲームでは視差効果を使ってシーンの立体感を高める。簡単なポイントとしては、画面をスクロールする時に発生するウェブページの要素の位置の変化ですが、それぞれの元素の位置の変化のスピードが違っています。ウェブページ内の要素にレベルがずれているという錯覚を引き起こします。これは私達の人体の眼球効果と似ています。多くの製品の商用視差スクロール効果を見て、製品を展示しています。空間の角度とユーザーの体験から、非常に良い効果があります。このような視差スクロール効果は海外のウェブサイトでも多く使われ、ウェブデザインのホットトレンドとなっている。
長いページを通じて、いくつかの驚くべきイラストと図形を利用して、視差スクロール効果を利用して、多層背景を異なる速度で移動させて、立体的な運動効果を形成して、素晴らしい視覚体験をもたらします。完璧に複雑な過程を展示しています。その中に身を置くようにします。マンネリに飽きました。タブレットのデザインは試してみません。
背景を固定してスクロール軸に沿って移動させないということですが、背景を含む容器はスクロールしているので、視覚的な違いは変換シーンと同じように見えます。
二、視差スクロール効果の主な特徴：1、直感的な設計、迅速な応答速度、単ページ2、相違スクロール階層の視差ページに多くの要素が互いに独立してスクロールしています。もし他の階層に来たら、背景層、コンテンツ層、スタンプ層が二から三層まであります。
三、原理
前景と背景によってシーン移動時に異なる視差が生じ、簡単な立体効果が得られる。
ページ上の多くの要素は互いに独立して転がり回っています。もし私たちが他の階層に来たら、二つから三つの層があります。背景層、コンテンツ層、スタンプ層
1、運用の大きな背景
これらの背景画像は一般的に高解像度であり、大図であり、ウェブサイト全体をカバーする。ハイビジョン写真は素早く視聴者を捉える良い方法であり、インパクトのある視覚効果が得られ、ユーザーの視線は思わず大きな背景に落ちてしまいます。
注意:
1、背景図の色、内容は選択時に十分に注意して、前提はユーザーの体験を壊さないようにしてください。でないと、きれいな写真もむだです。
ピクチャーのタイプはできるだけ選択していくつかの比較的に柔らかくて、少し透明な1種類に向かう方がよくて、ウェブサイトの主体の内容のが読むことに影響しないでください、識別して、調和を重んじます。
1.2、大量の画像を特色とするページは、画像のプリロード問題を考慮し、ユーザーによりスムーズな視覚体験を提供する。
2、シンプルな配色でもいいです。純色の背景より直感的で簡潔な色はありません。純粋な色は多くの表現ができます。一つの視差区間の色は2～3種類を使用したほうがいいです。色の透明度を調整して、様々な視覚効果を達成できます。
3、背景レイヤを特定し、スタンプ層とコンテンツ層との関係は、ページ自体の機能によってレイヤーを貼る必要があるかどうかを定義します。スタンプ層の存在は視覚効果をより効果的に伝えるためですが、それが干渉になると、私たちが使用する目的に反します。
コンテンツ層の展示は最も主要で、背景層やレイヤーの派手さに関わらず、デザイナーの設計過程で、コンテンツ層はユーザーの展示を最優先します。
4、物語をする
強力な表現、シンプルなスタイルとデザインの美感が素晴らしいインタラクティブな叙事体験を構成しています。私たちはよくこのような話を聞きます。内容は王道で、技術は内容を実現するためのツールです。強力な情報と綺麗な実行力を結びつけることに成功すれば、人々が好きで、その中で体験することができます。——Wiedin+Kennedy
プラグインはあります。1 Scrrollama 2 curtain.js 3 jQuery-Paarallax 4 stellar.js 5 jparallax 6 Skrollr 7 Parax.js教程Javascript視差効果
実現ソースを提供します。http://adamed.iteye.com/blog/1579555)
jQuery ( function( $ ) {
$.Body = $ ( 'body' );// body
$.Window = $ ( window );// window
// html body ， 。
$.Scroll = ( $.browser.mozilla || $.browser.msie ) ? $ ( 'html' ) : $.Body;
/*
* data-controller （ ：
* section
// ，
$ ( '[data-controller]' ).Instantiate ( );
/*
* easing http://jqueryui.com/demos/effect/easing.html
*/
var _opt = {
duration : 1200,//
easing : "easeInOutExpo"
};
/*
* ：6378
*/
console.log ( $.Scroll.scrollTop ( ) );
/*
* ：5.815
*/
console.log ( ( $.Scroll.scrollTop ( ) + 600 ) / 1200 );
/*
* ：5
*/
$current = Math.floor ( ( $.Scroll.scrollTop ( ) + 600 ) / 1200 );
console.log ( " :" + $current );
console.log ( " :" + $.Window.height ( ) );
var $newY = $current * 1200 - ( $.Window.height ( ) - 1200 ) / 2;
console.log ( "new Y：" + $newY );
//********** ***********
$.Scroll.animate ( {
scrollTop : $newY
} , _opt );
$first = $ ( "#story-welcome" );
$first.show ( "slow" );
} ); `
<html>
<head>
<title>Stellar.js Backgrounds Demotitle>
<style type="text/css">
body,span,div,{
margin: 0;
padding: 0;
}
body {
font-family: helvetica,arial;
}
.photo {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 700px;
position: relative;
}
.photo span {
bottom: 0;
display: block;
color:white;
font-size: 38px;
left: 50%;
margin-left: -640px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.summer {
background-image: url("images/summer.jpg");
}
.autumn {
background-image: url("images/autumn.jpg");
}
.winter {
background-image: url("images/winter.jpg");
}
.spring {
background-image: url("images/spring.jpg");
}
style>
<script src="js/jquery-2.1.1.js">script>
<script src="js/jquery.stellar.js">script>
<script type="text/javascript">
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
script>
head>
<body>
<div class="photo summer" style="background-position: 50% 0px;" data-stellar-background-ratio="0.5" >
<span>Summerspan>
div>
<div class="photo autumn" style="background-position: 50% 0px;" data-stellar-background-ratio="0.5" >
<span>Autumnspan>
div>
<div class="photo winter" style="background-position: 50% 0px;" data-stellar-background-ratio="0.5" >
<span>Winterspan>
div>
<div class="photo spring" style="background-position: 50% 0px;" data-stellar-background-ratio="0.5" >
<span>Springspan>
div>
<div class="photo summer" style="background-position: 50% 0px;" data-stellar-background-ratio="0.5" >
<span>Summerspan>
div>
<div class="photo autumn" style="background-position: 50% 0px;" data-stellar-background-ratio="0.2" >
<span>Autumnspan>
div>
<div class="photo winter" style="background-position: 50% 0px;" data-stellar-background-ratio="0.2" >
<span>Winterspan>
div>
<div class="photo spring" style="background-position: 50% 0px;" data-stellar-background-ratio="0.2" >
<span>Springspan>
div>
body>
html>