Простой Parallax эффект на jQuery
Если вы давно хотели придать некоторым элементам на сайте Parallax эффект - данное решение вам идеально подойдёт
Для начала посмотрите ДЕМО
Моё тестирование в редакторе: КЛИК
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 |
.apoparallax { width: 900px; position: absolute; top: 0px; left: 50%; margin-left: -450px; } |
2#: В качестве примера будем использовать картинку. Вставим следующий код после /head:
|
1 |
<img src="https://imapo.ru/img/ray.png" class="apoparallax"> |
3#: Исполняемый скрипт. Вставьте после /head:
|
1 2 3 4 5 6 7 8 |
<script> $(function() { $(window).bind('scroll', function(e) { var scrolled = $(window).scrollTop(); $('.apoparallax').css('top', (0 + (scrolled * .35)) + 'px'); // Для элемента с классом apoparallax на каждый такт прокрутки добавляем или отнимаем отступ сверху }); }); </script> |
P.S. Возникли вопросы - задавайте их в комментариях
