px-bottom
px-top
px-left
px-right
px-top px-left
px-top px-right
px-bottom px-left
px-bottom px-right
Данный параллакс применим к любому html тегу. Для этого достаточно подключить скрипт и нужным элементам указать атрибуты: px-top (или px-bottom) и/или px-left (или px-right).
Можно изменить скорость движения блоков, указав атрибутам значения больше нуля и меньше единицы (По умолчанию: 0.1).
|
1 2 |
<img src="" alt="" px-bottom> <img src="" alt="" px-top=".2" px-left=".3"> |
|
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
jQuery(document).ready(function($) { // Паралакс блоков (function(){ var $W = $(window); // Отключить для мобильных if ($W.innerWidth() < 768) return; // Пересчитывает позицию элементв function transform_translate($item) { var is_t = $item.is('[px-top]'), is_b = $item.is('[px-bottom]'), is_y = is_t || is_b, is_l = $item.is('[px-left]'), is_r = $item.is('[px-right]'), is_x = is_l || is_r, half_y = Math.round($W.scrollTop() + ($W.innerHeight() / 2)), shift_x = 0, shift_y = 0; // Рассчитать движение по вертикали if (is_y) { var item_top = Math.round($item.offset().top) - shift_y, item_height = Math.round($item.height()), item_half_y = (item_height > 0) ? item_height / 2 : 0, direction_y = is_t ? 'top' : 'bottom', speed_y = $item.attr('px-' + direction_y) || .1; // Движение вверх shift_y = Math.round((item_top - half_y + item_half_y) * parseFloat(speed_y)); // Движение вниз if (is_b) { shift_y *= -1; } } // Рассчитать движение по горизонтали if (is_x) { var item_top = Math.round($item.offset().top) - shift_x, item_width = Math.round($item.width()), direction_x = is_l ? 'left' : 'right', speed_x = $item.attr('px-' + direction_x) || .1; // Движение влево shift_x = Math.round((item_top - half_y) * parseFloat(speed_x)); // Движение вправо if (is_r) { shift_x *= -1; } } // Сдвинуть элемент $item.css('transform', 'translate('+shift_x+'px, '+shift_y+'px)'); } // Найти и перебрать элементы с нужными атрибутами $('[px-top], [px-bottom], [px-left], [px-right]').each(function (i, e) { var $item = $(this); // Сразу выставить элементы на сови места transform_translate($item); // При прокрутке $W.on('scroll', function() { // Пересчитывать позиции элементов transform_translate($item); }); }); })(); }); |