ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простой Parallax эффект с помощью jQuery и CSS

Простой Parallax эффект с помощью jQuery и CSS

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

И при этом получается красивый эффект, где все выглядит оригинально и великолепно. В этом материале будет представлен самый простой трюк, где будет создана двухслойная parallax прокрутка.

Если рассматривать параллакс, то здесь идет значение для видимости и также смещение, а также вы увидите разницу в видимом направлении элемента. Это все можно увидеть из двух разных точек, а не по прямой линии, что изначально связано с элементом или объектом. Также в использование веб дизайна параллакс явно относится к технике прокрутки, где изначально предназначена для создания иллюзии глубины на ресурсе.

Приступаем к установке:

HTML

Код

<div class="takeson-kuprocum"></div>
<section>
  <h1>ZorNet - портал для вебмастера</h1>
  <p>Здесь идет первое описаие </p>
<ul>
<li>Брендинг</li>
    <li>Логотипы</li>
    <li>Сайты</li>
    <li>Веб-приложения</li>
    <li>Веб-разработка - HTML5, CSS</li>
    <li>Системы управления контентом</li>
    <li>Отзывчивый веб-дизайн</li>
    <li>Иллюстрация</li>
    <li>Визитные карточки</li>
    <li>Бланки и поздравительные</li>
    <Li> Листовки</li>
    <li>Отправители</li>
    <li>Карты назначения</li>
    </ul>
    <h1>Заголовок</h1>
  <p>Прежде чем вы выберите нас, чтобы взять проект, вы, вероятно, захотите узнать о нас немного больше, поэтому встретите команду:</p>
  <img src="http://zornet.ru/ABVUN/sarunolas/Sarukipan/software-duck-icon.png
"/>
  <p>Краткое описание</p>
  <p>Здесь как раз его пишем.</p>
  <img src="http://zornet.ru/ABVUN/sarunolas/Sarukipan/filetype-xls-icon.png"/>
  <p>Это описание идет под изображением.</p>
</section>

CSS

Код

.takeson-kuprocum {
  background: url('http://zornet.ru/ABVUN/sarunolas/Sarukipan/23652683.jpg') repeat;
  position: fixed;
  width: 100%;
  height: 300%;
  top:0;
  left:0;
  z-index: -1;
}
section {
  color: #e8e8e8;
  font-family: arial;
  width: 495px;
  margin: auto;
  line-height: 18px;
  font-size: 15px;
}

Код

$(window).scroll(function(e){
  parallax();
});
function parallax(){
  var scrolled = $(window).scrollTop();
  $('.takeson-kuprocum').css('top',-(scrolled*0.2)+'px');
}

Немного историй про Parallax, который существует с 1980 года, где все больше обновляется, где изначально можно было увидеть его в исполнение и использовался в названиях видео игр, но позже такой стиль стал использоваться на интернет сайтах. Теперь в современной стилистике это один из самых широко используемых трюков в современной сети.

Демонстрация

05 Октября 2018 Просмотров: 1294 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 1
Порядок вывода комментариев: ZarecL 06 Октября 2018 19:14¹ 0 Грузить сайт будет, хотя здесь анимация слабая, но смотрится довольно таки не плохо, а можно сказать отлично.