Привет! Сегодня поговорим о параллаксе и попробуем создать сайт с параллакс эффектом на JQuery и CSS.
Для начала, разберемся что такое параллакс и с чем его едят.
В веб-дизайне параллакс-эффект или параллакс-скроллинг – это специальная техника, когда фоновое изображение в перспективе двигается медленнее, чем элементы переднего плана. Эта технология применяется все чаще, так как выглядит действительно эффектно и круто.
Достигается такой эффект трехмерного пространства с помощью нескольких слоев, которые накладываются друг на друга и при прокручивании движутся с различной скоростью. С помощью такой технологии можно создать не только искусственный трехмерный эффект, можно применять ее к иконкам, изображениям и другим элементам страницы.
Недостатки параллакс-эффекта
Основной минус параллакса – это проблемы с производительностью сайта. Выглядит все красиво и стильно, но применение javascript/jQuery, с помощью которых и создается эффект параллакса, в значительной степени утяжеляет страницу и очень снижает скорость ее загрузки. Это происходит потому, что в его основе лежат сложные вычисления: javascript приходится контролировать положение каждого пикселя на экране.
В некоторых случаях ситуация осложняется еще и проблемами с кроссбраузерностью и кроссплатформенностью. Многие разработчики рекомендуют использовать параллакс-эффект применительно к максимум двум элементам страницы.
Альтернативное решение
С появлением CSS3 задача немного упростилась. С его помощью можно создать очень похожий эффект, который будет намного экономичнее в плане затрат ресурсов. Суть в том, что контент сайта размещается на одной странице, а перемещение по внутренним страницам происходит методом CSS3-перехода. Это тот же параллакс, но с некоторым отличием: дело в том, что достичь того, чтобы перемещение осуществлялось с различной скоростью, используя только CSS3, невозможно. Кроме того, данный стандарт поддерживается не всеми современными браузерами. Поэтому и здесь есть свои сложности.
Ну, не стоит о плохом) лучше давайте приступим к программной реализации данного эффекта.
HTML
<div class="container" id="skrollr-body" data-0="background-color:rgb(0,0,100);"data-400="background-color:rgb(100,0,0);" data-1000="background-color:rgb(74,100,255);"data-1300="background-color:rgb(0,0,0);">
<!--<h1><i class="icon-circle-blank"></i></h1>-->
<br>
<h2>НУЖНО ПРОКРУТИТЬ СТРАНИЦУ?</h2>
<p>Тогда крути колесо</p>
<a class="arrow" href="#anchor1"><i class="icon-sort-down"></i></a>
</p>
<div class="section" id="sect1">
<div class="anchor" id="anchor1"></div>
<div id="phone" data-0="margin-left: -20%; opacity:0" data-350="margin-left: 10%; opacity:1">
<div id="screen">
</div>
</div>
<div class="explanation" data-300="opacity: 0" data-350="opacity: 1">
<h2>Кто мы такие?</h2>
<p>Dark Masters!</p>
<a class="arrow" href="#anchor2"> <i class="icon-sort-down"></i></a>
</div>
</div>
<div class="section" id="sect2">
<div class="anchor" id="anchor2"></div>
<div id="vk" data-600="margin-top: -20%; opacity: 0" data-1000="margin-top: 0; opacity:1">
<i class="icon-vk"></i>
</div>
<div class="explanation" data-850=" opacity: 0" data-900=" opacity:1">
<h2>Подписка ВКонтакте</h2>
<p>Чтобы следить за последними новостями рекомендуем вступить в нашу группу ВКонтакте</p>
<a class="arrow" href="#anchor3"> <i class="icon-sort-down"></i></a>
</div>
</div>
<div class="section" id="sect3">
<div class="anchor" id="anchor3"></div>
<div id="hiddenIcon">
<i class="icon-rocket icon-rotate-180"></i>
<p></p>
</div>
<div class="explanation-right" data-1350=" opacity: 0" data-1400=" opacity:1">
<h2>Быть с нами легко!</h2>
<p>Для этого достаточно ввести свой mail и Вы будете получать самые охрененные новости
на почту!</p>
<div id="mc_embed_signup">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Ваше МЫЛО" onfocus="this.placeholder = ''" onblur="this.placeholder = 'alex.kopcha@gmail.com'" required>
<div><input type="submit" value="Подписаться!" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
</div>
<div id="rocket" data-1100="margin-top:-300px; margin-right:0%; opacity: 0" data-1400="margin-top:50; margin-right:20%; opacity:1">
<i class="icon-rocket icon-rotate-180"></i>
</div>
</div>
<!--вверх-->
<div id="wrapper">
<p id="back-top">
<a href="#top"><span></span></a>
</p>
</div>
<div class="section" id="footer">
<p>Металл<a href></a></p>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/up.js"></script>
<script src="js/index.js"></script>
CSS 1
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap;
}
/**
* Set consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to `content-box` in IE 8/9.
* 2. Remove excess padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
Используем стандартную библиотеку "нормализирующих" стилей параллакса.
CSS 2
@charset "UTF-8";
@import url("http://fonts.googleapis.com/css?family=Signika");
/*иконки от bootstrap*/
@import url("http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css");
html {
font-family: 'Signika', sans-serif;
}
body {
background: #DDD7D1;
}
#map {
position: absolute;
top: 0px;
bottom: 0;
width: 100%;
height: 2000px;
}
.placemarked {
background: #FFC52F;
border-color: #ffffff;
border-width: 5px;
border-style: solid;
height: 40px;
width: 40px;
border-radius: 25px;
position: relative;
top: 100px;
margin: auto;
z-index: 100;
transition: width 1s, height 1s, transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
}
.container {
background: #00C993;
position: absolute;
display: block;
width: 100%;
height: 2050px;
color: white;
text-align: center;
min-width: 24px;
}
.section {
position: absolute;
display: block;
width: 100%;
color: white;
text-align: left;
}
#sect1 {
top: 400px;
}
#sect2 {
top: 1000px;
}
#sect3 {
top: 1500px;
}
#footer {
background: black;
top: 2000px;
height: 35px;
text-align: center;
color:red;
}
#vk {
float: left;
width: 20%;
font-size: 5em;
padding-left: 15%;
}
#rocket {
float: right;
width: 20%;
font-size: 5em;
padding-left: 15%;
}
#hiddenIcon {
text-align: center;
visibility: hidden;
height: 0;
font-size: 5em;
}
.anchor {
height: 100px;
}
band2 h2 {
text-align: left;
}
.explanation {
min-width: 12.42em;
float: left;
width: 40%;
}
.explanation-right {
min-width: 12.42em;
float: left;
text-align: right;
padding-left: 5%;
width: 40%;
}
#phone {
background: #555555;
border-radius: 20px;
box-shadow: 0 0.5em 0 #222222;
padding: 50px 18px 50px 18px;
width: 25.6%;
min-width: 200px;
max-width: 400px;
margin-right: 5%;
float: left;
}
#screen {
background-image: url(../images/2.jpg);
height: 305px;
width: 335px;
overflow: hidden;
padding: 0;
position: relative;
}
#topBar {
background: #00C993;
height: 10%;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
position: relative;
min-width: 100px;
}
#mc_embed_signup {
text-align: right;
background-color: rgb(0,0,0);
}
#mce-EMAIL {
text-align: center;
width: 300px;
height: 30px;
margin-bottom: 20px;
padding-left: 1em;
border-style: none;
outline: none;
border-radius:50%;
}
#mce-EMAIL:focus {
outline: none;
}
#mc-embedded-subscribe {
border-style: none;
}
.icon-bookmark {
float: right;
}
.icon-bookmark:hover {
color: #FFC52F;
}
.pressed {
color: #FFC52F;
}
h1, h3 {
font-family: 'Signika', sans-serif;
font-weight: 700;
text-align: center;
}
.container h1 {
font-size: 5em;
line-height: 1em;
/*margin-bottom: 1em;*/
}
a {
color: white;
}
.button {
background: #DDD7D1;
text-align: center;
padding: .5em 1em;
color: white;
font-weight: bold;
text-decoration: none;
box-shadow: 0 0.2em 0 #333333;
text-transform: uppercase;
letter-spacing: 0.1em;
/*transition cross-browser stuff*/
-webkit-transition: background 0.2s ease-out;
/* Safari 3.2+, Chrome */
-moz-transition: background 0.2s ease-out;
/* Firefox 4-15 */
-o-transition: background 0.2s ease-out;
/* Opera 10.5–12.00 */
transition: background 0.2s ease-out;
/* Firefox 16+, Opera 12.50+ */
border-radius: 20px;
}
.button:hover {
background: #BCB1A5;
}
a.arrow {
color: white;
text-align: center;
font-size: 3em;
text-decoration: none;
padding-bottom: 30px;
/*transition cross-browser stuff*/
-webkit-transition: color 0.2s ease-out;
/* Safari 3.2+, Chrome */
-moz-transition: color 0.2s ease-out;
/* Firefox 4-15 */
-o-transition: color 0.2s ease-out;
/* Opera 10.5–12.00 */
transition: color 0.2s ease-out;
/* Firefox 16+, Opera 12.50+ */
}
a.arrow:hover {
color: #FFC52F;
}
@media only screen and (min-width: 767px) {
body {
font-size: 1.125em;
/* 18px / 16px */
}
.container {
background-size: 100%;
}
.container h1 {
font-size: 3.25em;
/*52 / 16*/
}
a.button {
padding: .75em 1.5em;
}
}
@media only screen and (max-width: 550px) {
.explanation {
float: none;
margin: auto;
text-align: center;
}
.explanation-right {
float: none;
margin: auto;
text-align: center;
}
#sect1 {
top: 350px;
}
#phone {
visibility: hidden;
height: 0px;
width: 0px;
padding: 0;
margin: 0;
}
#map {
width: 0px;
height: 0px;
}
#sect2 {
top: 900px;
}
#rocket {
visibility: hidden;
}
#vk {
visibility: hidden;
padding-left: 0em;
}
#hiddenIcon {
visibility: visible;
height: auto;
}
#mce-EMAIL {
text-align: center;
padding: 0;
float: none;
}
#mc_embed_signup {
text-align: center;
}
}
/*плавно вверх*/
#wrapper{
margin:0 auto;
width:900px;
position:relative;
}
#back-top{
position:fixed;
bottom:30px;
left:50%;
margin-left:500px
}
#back-top a{
width:64px;
display:block;
text-align:center;
font:11px/100% Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-decoration:none;
color:#bbb;
/* background color transition */
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
}
#back-top a:hover{color:#000;}
/* arrow icon (span tag) */
#back-top span{
width:64px;
height:64px;
display:block;
margin-bottom:7px;
background:#ddd url(../images/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
/* background color transition */
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
}
#back-top a:hover span{background-color:#777}
/*иконки от bootstrap*/
@import url("http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css");
html {
font-family: 'Signika', sans-serif;
}
body {
background: #DDD7D1;
}
#map {
position: absolute;
top: 0px;
bottom: 0;
width: 100%;
height: 2000px;
}
.placemarked {
background: #FFC52F;
border-color: #ffffff;
border-width: 5px;
border-style: solid;
height: 40px;
width: 40px;
border-radius: 25px;
position: relative;
top: 100px;
margin: auto;
z-index: 100;
transition: width 1s, height 1s, transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
}
.container {
background: #00C993;
position: absolute;
display: block;
width: 100%;
height: 2050px;
color: white;
text-align: center;
min-width: 24px;
}
.section {
position: absolute;
display: block;
width: 100%;
color: white;
text-align: left;
}
#sect1 {
top: 400px;
}
#sect2 {
top: 1000px;
}
#sect3 {
top: 1500px;
}
#footer {
background: black;
top: 2000px;
height: 35px;
text-align: center;
color:red;
}
#vk {
float: left;
width: 20%;
font-size: 5em;
padding-left: 15%;
}
#rocket {
float: right;
width: 20%;
font-size: 5em;
padding-left: 15%;
}
#hiddenIcon {
text-align: center;
visibility: hidden;
height: 0;
font-size: 5em;
}
.anchor {
height: 100px;
}
band2 h2 {
text-align: left;
}
.explanation {
min-width: 12.42em;
float: left;
width: 40%;
}
.explanation-right {
min-width: 12.42em;
float: left;
text-align: right;
padding-left: 5%;
width: 40%;
}
#phone {
background: #555555;
border-radius: 20px;
box-shadow: 0 0.5em 0 #222222;
padding: 50px 18px 50px 18px;
width: 25.6%;
min-width: 200px;
max-width: 400px;
margin-right: 5%;
float: left;
}
#screen {
background-image: url(../images/2.jpg);
height: 305px;
width: 335px;
overflow: hidden;
padding: 0;
position: relative;
}
#topBar {
background: #00C993;
height: 10%;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
position: relative;
min-width: 100px;
}
#mc_embed_signup {
text-align: right;
background-color: rgb(0,0,0);
}
#mce-EMAIL {
text-align: center;
width: 300px;
height: 30px;
margin-bottom: 20px;
padding-left: 1em;
border-style: none;
outline: none;
border-radius:50%;
}
#mce-EMAIL:focus {
outline: none;
}
#mc-embedded-subscribe {
border-style: none;
}
.icon-bookmark {
float: right;
}
.icon-bookmark:hover {
color: #FFC52F;
}
.pressed {
color: #FFC52F;
}
h1, h3 {
font-family: 'Signika', sans-serif;
font-weight: 700;
text-align: center;
}
.container h1 {
font-size: 5em;
line-height: 1em;
/*margin-bottom: 1em;*/
}
a {
color: white;
}
.button {
background: #DDD7D1;
text-align: center;
padding: .5em 1em;
color: white;
font-weight: bold;
text-decoration: none;
box-shadow: 0 0.2em 0 #333333;
text-transform: uppercase;
letter-spacing: 0.1em;
/*transition cross-browser stuff*/
-webkit-transition: background 0.2s ease-out;
/* Safari 3.2+, Chrome */
-moz-transition: background 0.2s ease-out;
/* Firefox 4-15 */
-o-transition: background 0.2s ease-out;
/* Opera 10.5–12.00 */
transition: background 0.2s ease-out;
/* Firefox 16+, Opera 12.50+ */
border-radius: 20px;
}
.button:hover {
background: #BCB1A5;
}
a.arrow {
color: white;
text-align: center;
font-size: 3em;
text-decoration: none;
padding-bottom: 30px;
/*transition cross-browser stuff*/
-webkit-transition: color 0.2s ease-out;
/* Safari 3.2+, Chrome */
-moz-transition: color 0.2s ease-out;
/* Firefox 4-15 */
-o-transition: color 0.2s ease-out;
/* Opera 10.5–12.00 */
transition: color 0.2s ease-out;
/* Firefox 16+, Opera 12.50+ */
}
a.arrow:hover {
color: #FFC52F;
}
@media only screen and (min-width: 767px) {
body {
font-size: 1.125em;
/* 18px / 16px */
}
.container {
background-size: 100%;
}
.container h1 {
font-size: 3.25em;
/*52 / 16*/
}
a.button {
padding: .75em 1.5em;
}
}
@media only screen and (max-width: 550px) {
.explanation {
float: none;
margin: auto;
text-align: center;
}
.explanation-right {
float: none;
margin: auto;
text-align: center;
}
#sect1 {
top: 350px;
}
#phone {
visibility: hidden;
height: 0px;
width: 0px;
padding: 0;
margin: 0;
}
#map {
width: 0px;
height: 0px;
}
#sect2 {
top: 900px;
}
#rocket {
visibility: hidden;
}
#vk {
visibility: hidden;
padding-left: 0em;
}
#hiddenIcon {
visibility: visible;
height: auto;
}
#mce-EMAIL {
text-align: center;
padding: 0;
float: none;
}
#mc_embed_signup {
text-align: center;
}
}
/*плавно вверх*/
#wrapper{
margin:0 auto;
width:900px;
position:relative;
}
#back-top{
position:fixed;
bottom:30px;
left:50%;
margin-left:500px
}
#back-top a{
width:64px;
display:block;
text-align:center;
font:11px/100% Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-decoration:none;
color:#bbb;
/* background color transition */
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
}
#back-top a:hover{color:#000;}
/* arrow icon (span tag) */
#back-top span{
width:64px;
height:64px;
display:block;
margin-bottom:7px;
background:#ddd url(../images/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
/* background color transition */
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
}
#back-top a:hover span{background-color:#777}
Это стили самого сайта с эффектом параллакс, которые вы можете менять на свое усмотрение и в зависимости от целей.
JS
<script src='http://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js'></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/up.js"></script> <script src="js/index.js"></script>
Эту часть кода мы уже видели в блоке HTML. Первые два подключаемые скрипта это библиотека скроллинга и библиотека JQuery.
Скрипт up.js
$(document).ready(function(){
// прячем кнопку #back-top
$("#back-top").hide();
// появление/затухание кнопки #back-top
$(function (){
$(window).scroll(function (){
if ($(this).scrollTop() > 100){
$('#back-top').fadeIn();
} else{
$('#back-top').fadeOut();
}
});
// при клике на ссылку плавно поднимаемся вверх
$('#back-top a').click(function (){
$('body,html').animate({
scrollTop:0
}, 1800);
return false;
});
});
});
Отвечает за работу стрелки, которая находится в правом нижнем углу и возвращает нас плавно на верх страницы.
Скрипт index.js
var s = skrollr.init(/*other stuff*/);
skrollr.menu.init(s, {
animate: true,
easing: 'sqrt',
duration: function(currentTop, targetTop) {
return 1000;
},
});
$(".icon-bookmark").click(function(){
$("#placemark").addClass("placemarked");
$(".icon-bookmark").addClass("pressed");
});
Отвечает за плавность и скорость прокрутки, благодаря инициализации скроллинга мы и можем наблюдать одну из сторон эффекта параллакса.
Вывод
Эффект параллакса хоть и популярен, но далеко не все спешат его использовать при создании сайта по причине озвученных выше проблем. Видимо, пока просто необходимо время, чтобы технологии смогли преодолеть возникшие трудности. А пока такой вариант можно использовать на сайтах-одностраничниках: так он точно запомнится и сумеет удержать пользователя.