Параллакс для разных элементов
Добрый день! Есть скрипт эффекта параллакс. Для блока .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 |
warren buffet,
Все блоки, у которых атрибут data, при прокрутке страницы, имеют начальное значение, указанное в атрибуте data-val, и при достижении центра экрана (по вертикали) отступ меняют до нуля. Ну а там где в атрибуте data-val указано отрицательное значение, при прокрутке оно не меняется, не уменьшается до нуля. С margin пытался, не получается, мне ведь нужен отступ для каждого блока только с какой-то одной стороны. |
Цитата:
где вы взяли формулу для расчёта, и что она считает? формула классическая = Цитата:
Цитата:
osnovnaya-formula и тут https://learn.javascript.ru/js-animation пример реализации http://javascript.ru/forum/dom-windo...tml#post401266 |
Короче, народ, обычно делается наоборот. Сначала в инспекторе браузера выясняешь какой метод применим и какой применим лучше, потом применяешь. Не двигается? Выводишь в консоль циферки, там двигается? Значит метод применения стилей неправильный. Открываешь инспектор, вписываешь вручную, смотришь.
Вам на кой такого могучего инспектора написали? Щас даже ховеры там есть. Из испектора стили копируются как правила, причем отключенные правила копируются закомментированными. |
Вопрос решается заменой строки:
$(this).css({transform: el.dataset.tr+"("+ margMin +"px)"});
на:
$(this).css({[el.dataset.tr]: margMin +"px"});
в целом скрипт:
$(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({[el.dataset.tr]: margMin +"px"});
});
}
$win.on({
"load resize scroll" : reveal
});
});
<div class="block" data-tr="margin-left (или любое другое свойство)" data-val="300"></div> Но теперь возникает другой вопрос: Только один браузер - Internet Explorer не понимает: [el.dataset.tr] |
Цитата:
|
рони,
без квадратных скобок не работает. Вот смотрите https://jsfiddle.net/LADYX/01904e4b/1/ , что мне нужно, там наглядный пример. Так вот этот скрипт работает везде, кроме IE. IE не понимает именно вот это: [el.dataset.tr] |
Смотря какая версия. Просто бери атрибут методом - .getAttribute('data-tr') - верняк.
|
LADYX,
.... и будет вам счатье в ie
$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));
var opt = {};
opt[el.dataset.tr] = margMin +"px";
$(this).css(opt);
});
|
Я тоже не понял, что это за язык, на обычном жс строка
$(this).css({[el.dataset.tr]: margMin +"px"}); выглядела бы так this.style[el.getAttribute('data-tr')]=margMin+'px'; |
Цитата:
|
А, капец я отстал от жизни. Спс.
|
warren buffet,
не совсем понял. Имеется ввиду: ?
$(this).css({[.getAttribute('data-tr')]: margMin +"px"});
А как правильно расписать [el.dataset.tr] по формуле: ?
var obj = {[name]: value} <=> var obj={}; obj[name]=value;
|
Цитата:
|
Цитата:
|
Причем data- тащемта и не нужна. На могучих сайтах вроде хауза (и на моих менее могучих) легко юзают однобуквенные атрибуты, поскольку маловероятно, что их когда-то заюзают.
el.getAttribute('c') и все в кармане. |
Цитата:
|
warren buffet,
рони, да все работает, я понял где была моя ошибка. Огромное вам спасибо за помощь! |
Цитата:
|
Цитата:
|
Написал что? Я про это $(this) и метод .css(). Это же jquery? Библиотека. На ее языке тоже надо уметь писать. А я умею только на js.
|
warren buffet,
ах вот вы о чем. А я подумал, что вы меня о чем-то спросили :lol: |
| Часовой пояс GMT +3, время: 09:33. |