Получить значение свойства CSS для функции

@Transform · Регистрация: 19.01.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте. Делаю параллакс эффект с помощью transform: translateY().
Вот, как здесь, если кому интересно. Там изначально каждый следующий 'text' имеет чуть большее значение translateY().

jQuery и JS знаю поверхностно.

Условия :

есть несколько элементов с изображениями, назовём их <div class='box'>. Внутри них картинка и элемент с текстом = 'text'. Они ('text') абсолютно спозиционированы относительно('box') и должны принимать эффект параллакс при скролле страницы. Это не важно, здесь всё как надо.

Я реализую это следующий методом :

JavaScript
1
2
3
4
5
6
7
$(window).scroll(function(){
     var s = $(this).scrollTop();
 
     $('.text').css({
      'transform': 'translateY(' + s / 3 + 'px)'
    });
});

Таким образом эффект параллакс применяется ко всем элементам 'text'
Но при скроллинге каждый нижний элемент уже принял значение scrollTop(), поэтому элементы ниже третьего скрываются.

Задача :

Выставить изначальное положение для каждого элемента, с учётом его позиции в структуре HTML документа. Или придавать эффект параллакс элементу, который в фокусе. В оригинале уже стоит отрицательная позиция translateY, что видно, если уменьшить масштаб страницы.

Так как я не силён в jQuery и JS, то я пытался колхозить :

Присвоил каждому элементу с классом 'text' дополнительный класс : one, two и т.д.
И изначально задавать ему transform: translateY(); с отрицательным значением исходя из его положения в документе.
Но тогда при скролле элемент резко соскакивает вниз и при обратном скролле уже не возвращается на свою позицию

Я создавал переменные,

JavaScript
1
2
3
4
5
6
7
    var one   = $('.one');
    var two   = $('.two');
    var three = $('.three');
    var four  = $('.four');
    var five  = $('.five');
    var six   = $('.six');
    var seven = $('.seven');

но не получилось получить значение их свойства transform. Возможно есть какой-то способ, типа

JavaScript
1
var one   = $('.one').css('transform', 'translateY').val;

я экспериментировал, но ничего не вышло. Пытался создавать глобальные переменные, но из-за слабого знания синтаксиса jQuery не понимаю, как это правильно написать. Чтобы задать начальную позицию, а потом вычитать из неё значение переменной var s = $(this).scrollTop();

Я пытался запустить цикл

var m = $('.text'); // Вот здесь не понятно, как получить в массив значения нужного мне свойства ? .val или .css.val или .value. Мне разок бы подсказать этот нюанс, суть синтаксиса. Или

JavaScript
1
$('.text').css('transform', 'translateY()').val

и нужно ли в CSS указывать transform: translateY или только объявлять в скрипте ? И в функции или в качестве глобальных переменных ?

JavaScript
1
2
3
4
5
var m = $('.text');
 
 for (var i=0; i.<m.length; i++) {
      m[i].css('transform', 'translateY(' + s + 'px');
    }

Что-то такое пытался сделать, чтобы цикл выдавал каждый элемент в порядке его очереди в HTML документе, и каждому следующему изначально давал некое отрицательное значение с которым потом работал scrollTop()

Пытался добавить в переменную значение свойства, но..

JavaScript
1
one.css({'transform': 'translateY(0)'});

Но понял, что всё это чушь и есть какие-то грамотные решения, до которых я без подсказок или нужного уровня знаний не смогу додуматься.

Прошу помощи, заранее спасибо

@Transform · 23.01.2018, 01:29 **[ТС]**

Разобрался

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(window).scroll(function(){
    var s       = $(this).scrollTop(),
        s3      = s / 3,
        one     = $('.one'),
        two     = $('.two'),
        three   = $('.three'),
        four    = $('.four'),
        five    = $('.five'),
        six     = $('.six'),
        seven   = $('.seven');
 
     one.css({
      'transform': 'translateY(' + s3 + 'px)'
    });
    two.css({
      'transform': 'translateY(' + (-300 + s3) + 'px)'
    });
    three.css({
      'transform': 'translateY(' + (-600 + s3) + 'px)'
    });
    four.css({
      'transform': 'translateY(' + (-900 + s3) + 'px)'
    });
    five.css({
      'transform': 'translateY(' + (-1200 + s3) + 'px)'
    });
    six.css({
      'transform': 'translateY(' + (-1500 + s3) + 'px)'
    });
    seven.css({
      'transform': 'translateY(' + (-1800 + s3) + 'px)'
    });

@msheal · 23.01.2018, 01:39

Возможно есть смысл не хардкодить шаг 300, а использовать $(el).offset() для отпределения координат элемента относительно документа. Пример вашего случая:

JavaScript
1
2
  'transform': 'translateY(' + (-300 + s3) + 'px)' // было
  'transform': 'translateY(' + (-$(el).offset().top + s3) + 'px)' // станет

@Transform · 01.02.2018, 12:51 **[ТС]**

Здравствуйте. Извините за столь поздний ответ, не видел

Попробовал сейчас Ваш вариант и у меня не работает. Если я пробую для одного изображения :

JavaScript
1
2
3
two.css({
      'transform': 'translateY(' + (-$(two).offset().top + s3) + 'px)'
    });

или

JavaScript
1
2
3
two.css({
      'transform': 'translateY(' + (- two.offset().top + s3) + 'px)'
    });

я правильно понимаю, что мне всё равно придётся для каждого элемента : one, two, three и т.д., указывать .css({}), так что разница между Вашим примером и моим заключается в том, что не нужно указывать точное число ?

Или, если есть возможность обернуть всё в функцию и для каждого указать общий offset().top, чтобы каждое изображение получало свои координаты относительно документа ?

Кстати, я столкнулся с тем, что при уменьшении ширины окна браузера, координаты -300, -600 уже неактуальны. И не получается изменить их с window.resize или @media

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .