|
Параллакс для разных элементов
Добрый день! Есть скрипт эффекта параллакс. Для блока .left меняется отступ с левой стороны от 300px до 0. Как сделать, чтобы также для блока .right менялся отступ с правой стороны, а для блока .top отступ сверху? Благодарю!
$(function() {
var $win = $(window),
$rev = $('.left'),
winH2 = 0,
winSt = 0;
function reveal() {
winSt = $win.scrollTop();
winH2 = $win.height()/2;
$rev.each(function(i, el){
var y = el.getBoundingClientRect().top,
toMiddleMax = Math.max(0, y-winH2),
idealMarg = Math.min(300, toMiddleMax),
margMin = Math.min(idealMarg, idealMarg * (toMiddleMax/winH2));
$(">div", this).css({transform: "translateX("+ margMin +"px)"});
});
}
$win.on({
"load resize scroll" : reveal
});
});
*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}
p {height:400px;}
.left,
.right,
.top {
height: 100px;
width: 100px;
padding: 40px;
margin: 10px;
}
.left {background:red;}
.right {background:green;}
.top {background:blue;}
<p></p> <div class="left"></div> <div class="left"></div> <div class="right"></div> <div class="right"></div> <div class="top"></div> <div class="top"></div> |
LADYX,
атрибут data как источник данных, математику сами и макет лучше целиком
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}
p {height:400px;}
.left,
.right,
.top {
height: 100px;
width: 100px;
padding: 40px;
margin: 10px;
}
.left {background:red;}
.right {background:green;}
.top {background:blue;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var $win = $(window),
$rev = $('[data-tr]'),
winH2 = 0,
winSt = 0;
function reveal() {
winSt = $win.scrollTop();
winH2 = $win.height()/2;
$rev.each(function(i, el){
var y = el.getBoundingClientRect().top,
toMiddleMax = Math.max(0, y-winH2),
idealMarg = Math.min(+el.dataset.val, toMiddleMax),
margMin = Math.min(idealMarg, idealMarg * (toMiddleMax/winH2));
$(this).css({transform: el.dataset.tr+"("+ margMin +"px)"});
});
}
$win.on({
"load resize scroll" : reveal
});
});
</script>
</head>
<body>
<p></p>
<div class="left" data-tr="translateX" data-val="300"></div>
<div class="left" data-tr="translateX" data-val="300"></div>
<div class="right" data-tr="translateX" data-val="-300"></div>
<div class="right" data-tr="translateX" data-val="-300"></div>
<div class="top" data-tr="translateY" data-val="300"></div>
<div class="top" data-tr="translateY" data-val="300"></div>
</body>
</html>
|
рони,
я вас приветствую! Вот и в вашем примере почему-то отрицательный translateX (сдвиг влево) не работает. И еще один странный момент - нет такой плавности по Y, как она есть по X. |
Цитата:
Цитата:
|
Цитата:
|
laimas,
с анимацией разобрался, в принципе не сложно, благодарю за ссылку! рони, а вот с этим методом, как только не пробовал, ну хоть тресни, не получается мне сбросить отрицательное число (знак минус). Не силен я в знаниях этого языка. Помогите мне, пожалуйста :) |
LADYX,
я без понятия что делает ваш код. |
Цитата:
Math.abs(10); // 10 Math.abs(-10); // 10 |
Мне нужно сделать вот что: блоки .left при прокрутке меняют отступ от 300 до 0, т.е. двигаются от центра влево. А блоки .right должны менять отступ от -300 до 0, двигаясь от центра вправо, что мне и не получается сделать. Прошу у вас помощи.
$(function() {
var $win = $(window),
$rev = $('[data-tr]'),
winH2 = 0,
winSt = 0;
function reveal() {
winSt = $win.scrollTop();
winH2 = $win.height()/2;
$rev.each(function(i, el){
var y = el.getBoundingClientRect().top,
toMiddleMax = Math.max(0, y-winH2),
idealMarg = Math.min(+el.dataset.val, toMiddleMax),
margMin = Math.min(idealMarg, idealMarg * (toMiddleMax/winH2));
$(this).css({transform: el.dataset.tr+"("+ margMin +"px)"});
});
}
$win.on({
"load resize scroll" : reveal
});
});
*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}
p {height:250px;}
.left,
.right,
.top {
height: 100px;
width: 100px;
padding: 40px;
margin: 10px;
}
.left {background:red;float:left;}
.right {background:green;float:right;}
.top {background:blue;}
<p></p> <div class="left" data-tr="translateX" data-val="300"></div> <p></p> <div class="left" data-tr="translateX" data-val="300"></div> <p></p> <div class="right" data-tr="translateX" data-val="-300"></div> <p></p> <div class="right" data-tr="translateX" data-val="-300"></div> <p></p> <div class="top" data-tr="translateY" data-val="300"></div> <p></p> <div class="top" data-tr="translateY" data-val="300"></div> <p></p> |
У тебя код не совпадает с ТЗ. Прокрутка крутится сколько угодно, значит должен быть старт и стоп, даже если это 0 и конец. Дошел до старта - это число, берешь смещение прокрутки минус старт получаешь разницу, записываешь разницу в marginLeft для обоих блоков и они двигаются один влево, другой вправо. Концом является число конца смещения прокрутки или раздвигание
Почему translate? Для плавающих блоков со времен динозавров применяют margin |
| Часовой пояс GMT +3, время: 03:43. |
|