Страницы

Поиск по вопросам

суббота, 20 апреля 2019 г.

Легкий паралакс

Добрый день, подскажите, вероятно у кого-нибудь есть на примете паралакс, только что бы он несильно ресурсоемкий был, лайт скажем так, может кроссбарузерная реализация на css. И может есть на примете похожий плагин для реализации эффекта как на первом экране, движение мыши приводит в действие 5 блоков с информацией.


Ответ

По parallax эффекту:
$(document).ready(function() { var wHeight = $(window).height(); function parallax() { var pHeight = $(this).outerHeight(); var pMiddle = pHeight / 2; var wMiddle = wHeight / 2; var fromTop = $(this).offset().top; var scrolled = $(window).scrollTop(); var speed = $(this).attr('data-parallax-speed'); var rangeA = (fromTop - wHeight); var rangeB = (fromTop + pHeight); var rangeC = (fromTop - wHeight); var rangeD = (pMiddle + fromTop) - (wMiddle + (wMiddle / 2)); if (rangeA < 0) { rangeA = 0; rangeB = wHeight } var percent = (scrolled - rangeA) / (rangeB - rangeA); percent = percent * 100; percent = percent * speed; percent = percent.toFixed(2); var animFromBottom = (scrolled - rangeC) / (rangeD - rangeC); animFromBottom = animFromBottom.toFixed(2); if (animFromBottom >= 1) { animFromBottom = 1; } $(this).css('background-position', 'center ' + percent + '%'); $(this).find('.parallax-content').css('opacity', animFromBottom); $(this).find('.parallax-content').css('transform', 'scale(' + animFromBottom + ')'); } $('.parallax').each(parallax); $(window).scroll(function(e) { $('.parallax').each(parallax); }); }); body { margin: 0; padding: 0; height: 800px; } .main-slide { width: 100%; height: 100vh; margin-bottom: 400px; }


Тут можно посмотреть.
Что касается движения блоков, то я обычно использую jParallax для таких решений.
http://stephen.band/jparallax/

Комментариев нет:

Отправить комментарий