Уменьшить непрозрачность js
Я пытаюсь уменьшить непрозрачность изображения при прокрутке. Это должно быть похоже на исчезновение
var scrollPercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
if (scrollPercent < 0.25){
var myImage3 = document.getElementById('wheat-image-main3');
myImage3.style.opacity = '1'
}
if (scrollPercent > 0.25){
var myImage3 = document.getElementById('wheat-image-main3');
myImage3.style.opacity = '0'
}
Непрозрачность может быть числом от 0 до 1. Таким образом, не «0» или «1», вы также можете установить 0.5 (тогда не '). Вы можете просто установить любое значение с плавающей запятой от 0,0 до 1,0. См. документацию по непрозрачности. Является ли scrollPercent хорошим значением? Я бы использовал верхний угол элемента myImage3.
—
07.02.2023 14:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
55
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Ответ принят как подходящий
Вам просто нужно обернуть его в прослушиватель событий прокрутки, и он будет работать:
const myImage3 = document.getElementById('wheat-image-main3');
document.addEventListener('scroll', (e) => {
var scrollPercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
if (scrollPercent < 0.25){
myImage3.style.opacity = '1'
}
if (scrollPercent > 0.25){
myImage3.style.opacity = '0'
}
})body {
height: 200vh;
}
#wheat-image-main3 {
transition: opacity 125ms ease-in-out;
opacity: 1;
}<img id = "wheat-image-main3" src = "//placehold.it/200/200" alt = "">Вам нужно добавить прослушиватель событий прокрутки.
addEventListener("scroll", (event) => {
if (scrollPercent < 0.25){
var myImage3 = document.getElementById('wheat-image-main3');
myImage3.style.opacity = '1'
}
if (scrollPercent > 0.25){
var myImage3 = document.getElementById('wheat-image-main3');
myImage3.style.opacity = '0'
}
})
Вы должны слушать события прокрутки, чтобы получить эту работу. Ниже приведен пример, но вы также можете добиться этого, работая с классом CSS и свойством classList.
const img = document.querySelector('.image')
document.addEventListener('scroll', (e) => {
if (this.scrollY >= 100) {
img.style.opacity = "0.5"
}
else {
img.style.opacity = "1"
}
})<img src = "" height = "500" class = "image" />Другие вопросы по теме
Активная панель навигации с основным содержимым
Как сделать так, чтобы div был от края до края с боковыми сторонами области просмотра?
Ionic 6 стиль ion-datetime
Как центрировать h1 на странице с меню
Как переключить таблицу стилей CSS в зависимости от значения заголовка?
В контейнере с flex-grow: 1 содержимое переполняется, когда оно должно прокручиваться
Изображение не настраивается на разных экранах
Изображение не содержится внутри div
Как настроить<input type="color">?
Курсор: выравнивание div
Похожие вопросы
Chart.js наведите курсор на метку
Активная панель навигации с основным содержимым
Как проверить, соответствует ли «любой» объект типу объединения?
Как сгруппировать данные по полю в подмассив в JavaScript
Оповещение, когда счетчик достигает 0, не работает
Window.open с именем - страница результатов поиска Google ведет себя по-другому
Обновить страницу автоматически в реакции js
Ошибка API OpenAI: «Максимальная длина контекста этой модели составляет 2049 токенов»
Обратный инжиниринг алгоритма RSA, используемого маршрутизатором HUAWEI в Java/Kotlin
Когда выбран один параметр, все остальные должны быть отключены
Вы проверили процентное значение прокрутки?