Уроки Сайт с параллакс эффектом на JQuery и CSS
18 мая 2015
2268
сайт с параллакс эффектом, параллакс эффект, параллакс на JQuery

Сайт с параллакс эффектом на JQuery и CSS

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

Привет! Сегодня поговорим о параллаксе и попробуем создать сайт с параллакс эффектом на 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");
});

 

Отвечает за плавность и скорость прокрутки, благодаря инициализации скроллинга мы и можем наблюдать одну из сторон эффекта параллакса.

 

Вывод

Эффект параллакса хоть и популярен, но далеко не все спешат его использовать при создании сайта по причине озвученных выше проблем. Видимо, пока просто необходимо время, чтобы  технологии смогли преодолеть возникшие трудности. А пока такой вариант можно использовать на сайтах-одностраничниках: так он точно запомнится и сумеет удержать пользователя.





Алексей Копча