Добрый день, подскажите, вероятно у кого-нибудь есть на примете паралакс, только что бы он несильно ресурсоемкий был, лайт скажем так, может кроссбарузерная реализация на 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/
Комментариев нет:
Отправить комментарий