|
Параллакс для разных элементов
Добрый день! Есть скрипт эффекта параллакс. Для блока .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, время: 01:03. |
|