free_gen
@free_gen

Как заставить готовый скрипт JS работать только для определенного класса из HTML?

Вопрос наверное глупый, но гугл меня даже близко не привел к решению.

Нашел готовый скрипт с глитч эффектом, в котором все анимации и само изображение прописывается в JS, а в HTML только импортируется этот самый JS. Хотел бы его использовать, но только для отдельного изображения на уже сверстанной странице.
Можно ли как-то изменить скрипт так, чтоб он срабатывал, например, на определенный класс из HTML?
Например, в HTML img с классом glitch_effect:
<body>
	<div class="section">
		<img class="glithc_effect" src="https://www.shutterstock.com/image-illustration/triangle-solid-black-golden-illustration-260nw-1862937556.jpg" alt="">
	</div>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js'></script>
  <script  src="js/index.js"></script>
</body>

Сам скрипт с примером анимации здесь.
Я в JS абсолютный ноль, поэтому обращаюсь к сообществу Хабра.
  • Вопрос задан
  • 134 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Sozdavan
Да, можно изменить скрипт, чтобы он работал на конкретном классе из HTML. В коде JavaScript вы можете использовать метод querySelector или querySelectorAll, чтобы выбрать элемент (элементы) с определенным классом, а затем манипулировать этими элементами или применять к ним желаемую функциональность. Вот пример того, как вы можете использовать метод querySelector для выбора изображения с классом «glitch_effect» и применить к нему эффект сбоя с помощью библиотеки p5.js:

// Select the image element with the class "glitch_effect"
const img = document.querySelector('.glitch_effect');

function setup() {
    // Create a canvas and set its size
    createCanvas(img.width, img.height);
    // Draw the image on the canvas
    image(img, 0, 0);
}

function draw() {
    // Apply the glitch effect to the image
    // (This would typically involve manipulating the pixels of the image)
    // ...
}


Точно так же, если вы хотите выбрать несколько элементов с одним и тем же классом, вы можете вместо этого использовать метод querySelectorAll, который возвращает NodeList элементов, соответствующих переданному ему селектору.

const images = document.querySelectorAll('.glitch_effect');
images.forEach(image =>{
    // apply effect to each image
})

Также важно отметить, что ваш сценарий должен располагаться после элементов, которые вы хотите выбрать. в приведенном выше примере у вас есть тег
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы