Как поставить приставку _active сразу нескольким классам элементов при скролле до определенного блока?

Question

[Freeman0205]

Здравствуйте, необходимо анимировать шесть шаров, расходящихся из центра при скролле до определенного блока, анимацию заложил в css в приставке(_active) к каждому их классу (класс1_active, класс2_active и тд) подскажите как передать одновременно эту приставку сразу шести элементам с разными классами. Есть js код , может его допилить кто подскажет?

Comments

[Вадим]

Правила ресурса:

3.4. Помнить о том, что сервис вопросов и ответов «Хабр Q&A» не является форумом, чатом или социальной сетью. Следует избегать употребления речевых оборотов, характерных для этих типов ресурсов. Вопрос и его описание не должны содержать приветствий и прочих «лирических отступлений».

[Вадим]

Так же правила, раздел 3.8

Answer 1

[Вадим]

const animItems = // Элементы для анимации. Можете задать им общий класс и найти сразу все, можете сложить разные(с разными классами) элементы в один массив
// ..code
animItems.forEach(function(item){item.classList.add('_active')})

Comments

[Freeman0205]

Можете немного подробнее пожалуйста, у меня мало опыта Задаю общий класс для всех элементов, вот допустим в коде у меня const animItems получает массив элементов с общим классом ._anim-items, далее подскажите пожалуйста вы имели ввиду перебор элементов с добавлением класса куда его вставить? Извините некорректно вопрос еще задал, у меня к 6 различным классам необходимо добавить приставку _active
(класс_active)

[Вадим]

Freeman0205, Смотрите, находите в DOM все элементы, которые хотите анимировать и помещаете их в переменную.
Как я понял, Вы хотите анимировать дивы с картинками? Или сами картинки? Не столь важно на самом деле, но Вам нужно это точно для себя определить.
Таким образом, если хотите анимировать все дивы с class="problem-...",
то делаете в начале кода такую переменную:

const elemnsToAnimate = document.querySelectorAll('div[class^="problem"]') // найдёт все дивы, у который атрибут class начинается на problem.

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

elemnsToAnimate.forEach(function(item){item.classList.add('_active')}) // Вы правильно сказали - перебираются все элементы, которым мы хотим добавить класс и каждому добавляется класс _active

А вот куда этот перебор вставить - Вам виднее. Когда Вы хотите их заанимировать, туда и вставляйте.

[Freeman0205]

Вадим, Спасибо большое, а то что главный контейнер div где все это находится тоже называется problems это не критично?

[Вадим]

Freeman0205, критично, его тоже найдёт, но мне же этого не видно, т.к. Вы скинули обрезанный скриншот :-)
Можете всем элементам, которые хотите анимировать, добавить отдельный класс, скажем 'problems_animation' и тогда искать по нему в querySelectorAll

[Вадим]

Freeman0205, Увидел Ваш новый скрин. Судя по стилями Вы хотите анимировать только картинки. Тогда можете не добавлять новый класс, а поменять селектор на такой:
document.querySelectorAll('img[class^="problem"]')

[Freeman0205]

))) ясно , замучаю вас до конца, но у меня же у каждого элемента _active идет как приставка к классу со стилями анимации у которых отличаются параметры, а не класс, как с этим быть?

[Вадим]

Freeman0205, а, да, ну тут несколько вариантов, но самый простой если вы поменяете свой scss чтобы вложенный в картинки селектор был такой:

&-img{
// styles
  &.problem_with-animation{} // То есть не модификатор как приставка, а отдельный модификатор-анимация (можно хоть просто active)
}

И тогда просто добавлять класс .problem_with-animation (или любой другой, какой выбирете) в скрипте.
Просто у Вас тут вроде как БЭМ, но на самом деле нет, поэтому вот так просто и красиво выкрутиться с приставкой как Вы хотите будет замороченно.

Другие варианты более замороченные и нужно будет много чего поменять.

[Freeman0205]

Спасибо большое Вам очень помогли!!!

[Вадим]

Freeman0205, обращайтесь ;-)

[Вадим]

Freeman0205, Обновил предыдущий комментарий, не совсем корректно был scss написан, чтоб работало как задумывалось.

[Вадим]

Freeman0205, Да и вообще чёт по-моему я с Вами запутался, или не так понял :-)
Но так как у Вас на скриншоте вроде тоже должно быть ок

[Вадим]

Freeman0205,

у которых отличаются параметры, а не класс,

Что Вы имели в виду?

[Freeman0205]

имел ввиду что образно модификатор один _active а координаты расхождения шаров на конечные участки в анимации разные(то есть один модификатор, но разные координаты в зависимости от класса картинки), короче запудрил я Вам голову)

[Вадим]

Freeman0205, Так, ну Вы же все эти координаты описали в css, то есть для каждой картинки этот модификатор применит разную анимацию.
Ну вроде всё верно я Вам сказал)

[Freeman0205]

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

[Вадим]

Freeman0205, А по точнее? У Вас на фоне картинка и Вы хотите сделать её чёрно белой при начале анимации? На фоне всего блока? Именно через background-image вставлена?
Прикрепите скрин как это выглядит.

[Freeman0205]

Извините прикрепить не могу, есть блок в него вставлена в стилях через background: url картинка jpg, на ней у нас многострадальные шары с анимацией , вот задумка когда скроллим до этого блока шары анимируются а картинка заднего фона становится черно белой, первая часть сделана), сделать подложку что ли из черно-белой картинки и менять opacity так же задав модификатор со стилями?? вот не знаю

[Вадим]

Freeman0205, Да, так, как Вы сказали один из вариантов. Но так получается нужно две картинки.
А можно так:
Нажимайте на кнопку "filter"

[Вадим]

Freeman0205, если добавить transition: filter 0.5s linear на #bg из демки выше, то будет плавный переход.

[Freeman0205]

Попробую позже. Спасибо большое за вклад в развитие будущих специалистов!)

[Freeman0205]

Добрый день, есть один нюанс, шары с анимациями находятся в том же блоке и они тоже становятся черно-белыми, а необходимо оставить их цветными...

[Вадим]

Freeman0205, так да, Вы посмотрите демку внимательнее, там фон вынесен в другой блок как раз из-за этого

[Вадим]

Freeman0205, или в псевдоэлемент можно фон вынести по тому же принципу

[Freeman0205]

Спасибо, через псевдоэлемент не подскажете как сделать? Обещаю больше не мучать Вас вопросами!)

[Вадим]

Freeman0205,

.block {
  position:relative;
}

.block::before {
  content: ''
  //и дальше все стили как у блока bg из демки, только position со значением absolute
}

.block.grayscale::before {
  filter: grayscale(1)
}

Ну и в скрипте просто добавляем класс .grayscale блоку .block

[Freeman0205]

Очень благодарен Вам!

[Freeman0205]

.block.grayscale::before {
filter: grayscale(1);
z-index: 0; <- (с этим все работает норм)
}
спасибо еще раз