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