Параллакс для разных элементов

[LADYX]

warren buffet,
Все блоки, у которых атрибут data, при прокрутке страницы, имеют начальное значение, указанное в атрибуте data-val, и при достижении центра экрана (по вертикали) отступ меняют до нуля. Ну а там где в атрибуте data-val указано отрицательное значение, при прокрутке оно не меняется, не уменьшается до нуля.
С margin пытался, не получается, мне ведь нужен отступ для каждого блока только с какой-то одной стороны.

[рони]

я без понятия что делает ваш код.

LADYX,
где вы взяли формулу для расчёта, и что она считает?
формула классическая =

значит должен быть старт и стоп,

result = (to - from) * delta(progress) + from

описание тут
osnovnaya-formula
и тут
https://learn.javascript.ru/js-animation
пример реализации
Нажатие кнопки = генерация числа, отпускание кнопки = остановка генерации числа.

[warren buffet]

Короче, народ, обычно делается наоборот. Сначала в инспекторе браузера выясняешь какой метод применим и какой применим лучше, потом применяешь. Не двигается? Выводишь в консоль циферки, там двигается? Значит метод применения стилей неправильный. Открываешь инспектор, вписываешь вручную, смотришь.

Вам на кой такого могучего инспектора написали? Щас даже ховеры там есть. Из испектора стили копируются как правила, причем отключенные правила копируются закомментированными.

[LADYX]

Вопрос решается заменой строки:

$(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]

[рони]

Вопрос решается заменой строки:

по моему бред, но раз у вас работает ... квадратные скобки зачем?

[LADYX]

рони,
без квадратных скобок не работает. Вот смотрите https://jsfiddle.net/LADYX/01904e4b/1/ , что мне нужно, там наглядный пример. Так вот этот скрипт работает везде, кроме IE. IE не понимает именно вот это:

[el.dataset.tr]

[warren buffet]

Смотря какая версия. Просто бери атрибут методом - .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);
  });

[warren buffet]

Я тоже не понял, что это за язык, на обычном жс строка

$(this).css({[el.dataset.tr]: margMin +"px"});

выглядела бы так

this.style[el.getAttribute('data-tr')]=margMin+'px';

[рони]

Я тоже не понял, что это за язык

es6