/ Дизайн / Параллакс эффект заднего фона

Параллакс эффект заднего фона

HIT

17.08.2015

11436

Добавим к сайту классный эффект параллакса (Parallax) заднего фона.

Простой скрипт Parallax

Добавляем после <body>

<div class="bg"></div>

Script

<script>
$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('top',-(scrolled*0.1)+'px');
}
</script>

CSS

.bg {
background: url('/img/sfondi/sfondo_tot_grigio.jpg') repeat;
position: fixed;
width: 102%;
margin-left: -1%;
height: 300%;
top: 0;
left: 0;
z-index: -1;
-webkit-filter: blur(4px);
filter: blur(4px);
}

Конфликтует со свойствами background-attachment в мобильных версиях

Чаще всего свойство background-attachment применяется при верстке landing page.
Решение проблемы — небольшой скрипт отключения parallax’ного фона на странице лэндинга (зачастую это главная страница)
2715 — id страницы лэндинга, либо is_home() если страница главная.

<?php 
if ( is_page( '2715' )) { // отключать parallax-фон на странице лэндинга
  
 echo '';
  
} else {
  
 echo '<div class="bg"></div>';
}
?>

Готовое решение parallax.js

Устанавливаем скрипт:

wp_enqueue_script( 'parallax', get_template_directory_uri() . '/js/parallax.min.js' , array( ), '1.0' , true );

Реализация через верстку атрибутом:

<div data-parallax="scroll" data-image-src="/img/sfondi/sfondo_tot_grigio.jpg">

Реализация через jQuery:

$('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});

Данное решение описано на отдельной странице.

[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Создаем анимацию Scroll Down

Создаем анимацию Scroll Down

Для лэндингов часто используют анимацию в виде стрелки или колесика мышки, чтобы показать что можно (нужно) листать ниже. Создадим подобную анимацию с помощью css и jquery. Анимация колесика мышки Создадим Читать далее »

/
Перемотка слайдами

Перемотка слайдами

Для главной страницы, либо для страницы лэндинга иногда требуется перемотка слайдами (перемотка к следующему экрану).Есть отличная реализации данного функционала — fullPage.js-master. Подключение скриптов и стилей Подключаем скрипт и стиль fullPage Читать далее »

Подгрузка отдельных блоков на странице

Подгрузка отдельных блоков на странице

Прочитал в одной из статей — как подгружать методом ajax целые куски кода, в том числе и php. Сам метод действительно оказался прост. В данной статье опишем ситуации где этот Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Параллакс эффект заднего фона
Вывод записей по дате
Рекомендации для васВывод записей по датеOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.