Как сделать параллакс эффект на сайте – Параллакс на чистом CSS / Habr

08.02.2020 alexxlab

Содержание

Parallax эффект фона на landing page

Всем привет. Сегодня расскажу вам о небольшом скрипте для создания простого parallax эффекта.

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

Что такое параллакс эффект на сайте

Давайте сначала расскажу о том, что это вообще такое. Итак, параллакс эффект в веб дизайне — это такой прием, при котором фоновое изображение двигается медленнее, чем элементы, которые находятся над ним. Для более опытных оговорюсь, что мы не будем «привязывать» эффект параллакса к курсору мыши. а просто создадим parallax фона. Приступим.

Как сделать параллакс эффект на сайте

Итак, первым делом подключаем библиотеку jquery. Как обычно, между тегами head:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Теперь, нужно скачать подключить скрипт Simple Parallax Scrolling. Я рекомендую использовать сразу сжатую версию, так как дополнительных настроек внутри скрипта делать не понадобится:

<script src="js/parallax.min.js"></script>

Теперь, давайте разберемся, что нужно прописать на html страничке, чтобы заработал наш параллакс эффект.


<header data-parallax="scroll" data-image-src="images/bg.png">
 <h2>Smartlanding</h2>
 <h3>Создание landing page</h3>
</header>

Я создал шапку сайта (class=»head») и добавил 2 обязательных атрибута:


data-parallax="scroll"


data-image-src="путь к картинке/bg.png"

Обратите внимание, что картинка не кладется в шапку при помощи тега img, а задается непосредственно в атрибутом в том контейнере, в котором хотим реализовать parallax.

На этом, в принципе, можно заканчивать, но еще пару слов:

Если в dive, в котором хотим реализовать параллакс эффект нет других элементов, то необходимо задать ему высоту, иначе ничего не увидите.
В случае использования не адаптивного дизайна, можно задать ширину и высоту изображения прямо в html при помощи атрибутов naturalWidth и naturalHeight.

Можно двигать изображения при помощи атрибута data-position. Это аналог background-position в css.

С остальными опциями можете ознакомиться на официальной страничке проекта, которая указана выше.

На сегодня — все. Вот так просто можно реализовать простой вариант параллакс эффекта. Пока.

Скачать исходник

smartlanding.biz

15 лучших параллакс-плагинов для WordPress

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

Однако его применение может негативно сказывается на удобстве прокрутки страниц. Этот эффект особенно плохо смотрится на устройствах с высокой плотностью пикселей (например, на продукции Apple с экранами Retina).

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

Плагин Parallax Scroll позволяет устанавливать эффект параллакса во время прокручивания фоновых изображений различных элементов страницы.

ML Scrolling Parallax – простой в использовании плагин для реализации эффекта параллакс-скроллинга.

Parallaxer PRO представляет собой универсальный плагин для создания эффектов параллакса на вашем WordPress-сайте. В нем есть генератор шорткодов, визуальный редактор, а также множество других опций. Он без труда устанавливается в любом шаблоне, и его можно применить к контенту любого размера.

Позволяет создать слайдер с эффектом параллакса. Этот плагин представляет собой многофункциональную консоль для настройки слайдера.

Плагин позволяет добавлять полноэкранный эффект параллакса на ваш WordPress-сайт. Текстовое поле поддерживает HTML и шорткоды.

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

Все используемые слои должны быть одного размера и сохранены в формате PNG, так как важно сохранить прозрачность. После этого на странице редактирования записи в вашем WordPress нужно нажать кнопку для вставки медиафайлов. После чего добавить слои, нажав Create Parallaxitem.

Super Simple jQuery Parallax Background позволяет применить эффект параллакса к фоновому изображению вашей темы оформления. Просто установите фоновое изображение в настройках вашей темы, а затем активируйте плагин. Все просто.

WP Parallax Content Slider – плагин, который автоматически отображает слайдер контента, состоящий из ваших последних записей. Переходы между слайдами реализованы с помощью CSS3 и jQuery.

Миниатюрный javascript-плагин, который позволяет применять едва заметный параллакс-эффект к элементам WordPress-сайта. Плагин поддерживает множество браузеров, включая IE6+, Google Chrome, Mozilla Firefox, Safari, Opera и многие другие.

Parallax Gravity – WordPress-плагин, который позволяет создавать неограниченное количество посадочных страниц. С помощью Parallax Gravity можно создавать несколько разделов на одной странице, и каждому из них установить уникальный фон, а также добавлять любой тип контента (включая шорткоды из других плагинов), и многое другое. Доступна платная версия плагина с расширенным функционалом.

One Page Builder — это плагин для создания одностраничных сайтов. С его помощью можно создавать неограниченное количество посадочных страниц с множеством функций.

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

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

Easy WP Parallax Slider – простой в использовании параллакс-слайдер на CSS3 и jQuery. Теперь у вас есть возможность создавать неограниченное количество параллакс-слайдеров с нужными вам настройками для каждого слайда. В плагине реализована поддержка шорткодов, так что вы сможете отображать созданные слайдеры в любом месте на сайте.

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

Данная публикация представляет собой перевод статьи «15 Best WordPress Parallax Plugins» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Потрясающий эффект параллакса для сайта на JS

Параллакс это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. Параллакс используется в геодезии и астрономии для измерения расстояния до удалённых объектов. На явлении параллакса основано бинокулярное зрение. Но также параллакс активно используется дизайнерами для разработки необычных эффектов как в повседневной жизни, так и в веб-дизайне. Сегодня мы бы хотели продемонстрировать пример реализации еще одного эффекта, который будет Вам весьма интересный.

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

Шаг 1. HTML

Для начала нам необходимо по очередности подключить слоя изображений, для этого мы присваиваем классы, каждый класс будет иметь свои параметры в стилях:

<body>

</div>

Все это будет обвернуто в единый класс, которые будут определять параметры контейнера и общее положение его на странице, давайте перейдем к следующему шагу.

Шаг 2. CSS

Для начала мы устанавливаем общие параметры для контейнера заливаем фон необходимым нам цветом и указываем интервалы трансформации, затем мы устанавливаем изображение, которое будет основой для нашей картины:

.b-page_holiday-face .holiday-face_parallax {

background-color: #3f2a20;

transform: translate3d(0px, 0px, 0px);

}

.b-page_holiday-bg_2 .holiday-face {

}

.holiday-face {

background: none no-repeat scroll center center / cover #3f2a20;

bottom: 0;

left: 0;

min-height: 540px;

min-width: 875px;

position: fixed;

right: 0;

top: 0;

z-index: -1;

}

.holiday-face_parallax .holiday-face__item_5 {

}

.holiday-face_parallax .holiday-face__item_4 {

}

.holiday-face_parallax .holiday-face__item_3 {

}

.holiday-face_parallax .holiday-face__item_2 {

}

.holiday-face_parallax .holiday-face__item_1 {

}

.b-page_holiday-bg_2 .holiday-face-words {

}

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

Шаг 3. JS

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

$(window).on(‘mousemove’, function(e) {

var w = $(window).width();

var h = $(window).height();

var offsetX = 0.5 — e.pageX / w;

var offsetY = 0.5 — e.pageY / h;

$(«.holiday-face__item»).each(function(i, el) {

var offset = parseInt($(el).data(‘offset’));

var translate = «translate3d(0px,» + Math.round(offsetY * offset) + «px, 0px)»;

$(el).css({

‘-webkit-transform’: translate,

‘transform’: translate,

‘moz-transform’: translate

});

В результате мы получаем интересную картинку. Которая будет отзывчивой на движение курсора.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

20 красивых сайтов с эффектом параллакса при прокрутке страницы (Часть 2)

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

Мне кажется, что данный эффект никогда не устареет и будет нас радовать всё новыми идеями. Так как сайты с параллакс эффектом смотрятся очень и очень красиво.

В общем давайте смотреть.

Так же предлагаю Вам посмотреть вот эти подборки с сайтами:

www.nike.com

Огромное спасибо ginva.com

beloweb.ru