R
In general, it's an excuse to use jQuery.(1) Smelted(2) Paralax effect for mobile and PK Attention: Added spacer to simulate content$('.parallax').each(function() {
var thisObj = $(this);
var tH = $(this).outerHeight();
var tY = $(this).position().top;
var wH = $(window).height();
$(window).scroll(function() {
var s = $(window).scrollTop();
if (wH < tY) var offset = 1 - ((s + wH - tY) / (tY + tH));
else var offset = 1 - (s / (tY + tH));
thisObj.css('background-position', '0 ' + (offset * 100) + '%');
});
});
(function($) {
jQuery.scrollSpeed = function(step, speed, easing) {
var $document = $(document),
$window = $(window),
$body = $('html, body'),
option = easing || 'default',
root = 0,
scroll = false,
scrollY,
view;
if (window.navigator.msPointerEnabled) return false;
$window.on('mousewheel DOMMouseScroll', function(e) {
if ($('.js-aDialogOpened').length == 0) {
var deltaY = e.originalEvent.wheelDeltaY,
detail = e.originalEvent.detail;
scrollY = $document.height() > $window.height();
scroll = true;
if (scrollY) {
view = $window.height();
if (deltaY < 0 || detail > 0)
root = (root + view) >= $document.height() ? root : root += step;
if (deltaY > 0 || detail < 0)
root = root <= 0 ? 0 : root -= step;
$body.stop().animate({
scrollTop: root
}, speed, option, function() {
scroll = false;
});
}
return false;
}
}).on('scroll', function() {
if (scrollY && !scroll) root = $window.scrollTop();
}).on('resize', function() {
if (scrollY && !scroll) view = $window.height();
});
};
jQuery.easing.default = function(x, t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
};
})(jQuery);
$.scrollSpeed(100, 1000); // cкорость прокрутки.parallax {
background: url(https://cdn.pixabay.com/photo/2017/08/01/13/05/sea-2565253_1280.jpg);
width: 100%;
height: 300px;
background-size: cover;
}
.spacer {
height: 400px;
}<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="parallax" style="background-position: 0px 77.166%;">
<h1>parallax effect</h1>
</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
