Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.09.2016, 21:23
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

Параллакс для разных элементов
Добрый день! Есть скрипт эффекта параллакс. Для блока .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>
Ответить с цитированием
  #2 (permalink)  
Старый 24.09.2016, 22:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #3 (permalink)  
Старый 24.09.2016, 22:42
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

рони,
я вас приветствую! Вот и в вашем примере почему-то отрицательный translateX (сдвиг влево) не работает. И еще один странный момент - нет такой плавности по Y, как она есть по X.
Ответить с цитированием
  #4 (permalink)  
Старый 24.09.2016, 23:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от LADYX
Вот и в вашем примере почему-то отрицательный translateX (сдвиг влево) не работает. И еще один странный момент - нет такой плавности по Y, как она есть по X.
Сообщение от рони
математику сами
видимо надо куда-то Math.abs
Ответить с цитированием
  #5 (permalink)  
Старый 24.09.2016, 23:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от LADYX
И еще один странный момент - нет такой плавности по Y, как она есть по X.
Для справки почитать о CSS анимации.
Ответить с цитированием
  #6 (permalink)  
Старый 25.09.2016, 01:06
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

laimas,
с анимацией разобрался, в принципе не сложно, благодарю за ссылку!
рони,
а вот с этим методом, как только не пробовал, ну хоть тресни, не получается мне сбросить отрицательное число (знак минус). Не силен я в знаниях этого языка. Помогите мне, пожалуйста
Ответить с цитированием
  #7 (permalink)  
Старый 25.09.2016, 01:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

LADYX,
я без понятия что делает ваш код.
Ответить с цитированием
  #8 (permalink)  
Старый 25.09.2016, 09:53
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от LADYX
сбросить отрицательное число (знак минус)

Math.abs(10); // 10
Math.abs(-10); // 10
Ответить с цитированием
  #9 (permalink)  
Старый 25.09.2016, 18:09
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

Мне нужно сделать вот что: блоки .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>
Ответить с цитированием
  #10 (permalink)  
Старый 26.09.2016, 04:07
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

У тебя код не совпадает с ТЗ. Прокрутка крутится сколько угодно, значит должен быть старт и стоп, даже если это 0 и конец. Дошел до старта - это число, берешь смещение прокрутки минус старт получаешь разницу, записываешь разницу в marginLeft для обоих блоков и они двигаются один влево, другой вправо. Концом является число конца смещения прокрутки или раздвигание ног шторок до упора.

Почему translate? Для плавающих блоков со времен динозавров применяют margin
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
обработчик событий для динамически добавленных элементов Tecvid Events/DOM/Window 28 25.06.2018 13:49
Имитация элемента label не для элементов формы Jeremen Events/DOM/Window 3 09.01.2015 21:25
Пишу плагин. Не работает.live('click') для элементов. mr_freeman jQuery 4 20.12.2012 20:00
TreeStore, стили для элементов дерева. Black_Prince ExtJS 1 26.09.2011 13:33
Некорректно работает функция для создания элементов exec Общие вопросы Javascript 4 13.07.2010 11:15