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

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

HIT

17.08.2015

5431

Добавим к сайту классный эффект параллакса (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'});

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

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
DonLight

DonLight

Светодиодная продукция от бренда SmartBuy оптом, по низким ценам и без лишних посредников. Сайт: light.sberenergo.com

Южная заборная компания

Южная заборная компания

Южная заборная компания — строительство заборов любой сложности http://yugzk.ru

AquaBast

AquaBast

Система управления водоснабжением AquaBast http://teplo.bast.ru/smarthouse/aquabast.html

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

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

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