24.09.2016, 21:23
|
 |
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
|
Параллакс для разных элементов
Добрый день! Есть скрипт эффекта параллакс. Для блока .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>
|
|
24.09.2016, 22:05
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
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>
|
|
24.09.2016, 22:42
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
|
рони,
я вас приветствую! Вот и в вашем примере почему-то отрицательный translateX (сдвиг влево) не работает. И еще один странный момент - нет такой плавности по Y, как она есть по X.
|
|
24.09.2016, 23:00
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от LADYX
|
|
Вот и в вашем примере почему-то отрицательный translateX (сдвиг влево) не работает. И еще один странный момент - нет такой плавности по Y, как она есть по X.
|
|
Сообщение от рони
|
|
математику сами
|
видимо надо куда-то Math.abs  |
|
24.09.2016, 23:29
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от LADYX
|
|
И еще один странный момент - нет такой плавности по Y, как она есть по X.
|
Для справки почитать о CSS анимации. |
|
25.09.2016, 01:06
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
laimas,
с анимацией разобрался, в принципе не сложно, благодарю за ссылку!
рони,
а вот с этим методом, как только не пробовал, ну хоть тресни, не получается мне сбросить отрицательное число (знак минус). Не силен я в знаниях этого языка. Помогите мне, пожалуйста
|
|
25.09.2016, 01:13
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
LADYX,
я без понятия что делает ваш код.
|
|
25.09.2016, 09:53
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
Сообщение от LADYX
|
|
сбросить отрицательное число (знак минус)
|
Math.abs(10); // 10
Math.abs(-10); // 10 |
|
25.09.2016, 18:09
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
Мне нужно сделать вот что: блоки .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>
|
|
26.09.2016, 04:07
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
У тебя код не совпадает с ТЗ. Прокрутка крутится сколько угодно, значит должен быть старт и стоп, даже если это 0 и конец. Дошел до старта - это число, берешь смещение прокрутки минус старт получаешь разницу, записываешь разницу в marginLeft для обоих блоков и они двигаются один влево, другой вправо. Концом является число конца смещения прокрутки или раздвигание ног шторок до упора.
Почему translate? Для плавающих блоков со времен динозавров применяют margin
|
|
|
|
