|
1 2 3 |
<div class="px_bg"> <!-- Контент --> </div> |
|
1 2 3 4 5 |
.px_bg { background-image: url(/image.png); background-position: left 50% bottom 0%; background-size: cover; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
jQuery(document).ready(function($) { // Паралакс фон (function(){ var $win = $(window), $items = $('.px_bg'); if (!$items.length) return false; $items.each(function(i, e) { var $e = $(e), eh = $e.innerHeight(), et = $e.offset().top, eb = et + eh, wh = window.innerHeight, wt = $win.scrollTop(), wb = wt + wh; if (et < wb && eb > wt) { $e.css('background-position', 'left 50% bottom ' + (wb - et) / ((wh + eh) / 100) + '%'); } $win.on('scroll', function() { wt = $win.scrollTop(); wb = wt + wh; if (et < wb && eb > wt) { $e.css('background-position', 'left 50% bottom ' + (wb - et) / ((wh + eh) / 100) + '%'); } }); }); })(); }); |