Нужна помощь в доработке небольшого скрипта
Всем привет! Подскажите, как доработать скрипт. Изначально буквы в элементах span имеют opacity:.2, в зависимости от того, насколько прокручен скролл, элементы должны приобретать либо opacity:1, либо возвращаться в прежнее значение 0.2. Например, скролла нет. Все буквы полупрозрачны. Скролл немного прокручен вниз - закрасились буквы С,Л,О а буквы В,О остались полупрозрачными. Вернули скрол чуть назад - ранее закрашенные буквы Л,О вернулись в исходную полупрозрачность, а С осталась подсвеченной - мы до нее назад не докрутили.
Сейчас код на таком этапе
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width:500px;margin:20px auto;background: #f3f4f4;border-radius: 12px;padding: 30px;">
<p class="text-2">
<span class="sp">С</span>
<span class="sp">Л</span>
<span class="sp">О</span>
<span class="sp">В</span>
<span class="sp">О</span>
</p>
</div>
<script>
var chars = document.querySelectorAll('.sp');
addEventListener('scroll', function() {
var d = document.documentElement;
// приводим значение скролла к интервалу [0-1]
upd(d.scrollTop / (d.scrollHeight - d.clientHeight))
});
upd(0)
function upd(v) {
// умножаем на диапазон возможных значений (индексов)
v *= chars.length - 1;
for (let i = 0; i < chars.length; i++) {
// расcтояние между текущим элементом и значением скролла в нашем диапазоне
let d = Math.abs(i - v);
// вычисляем значение прозрачности, как 1 минус расстояние
// тут браузер не ругается при opacity<0, поэтому к диапазону 0-1 можно не приводить
if(v === 0) {
chars[i].style.opacity = 0.2;
} else {
chars[i].style.opacity = 1 - d;
chars[i].style.transform = `scale(${1 - i + v})`
}
}
}
</script>
</body>
</html>
Доделать до требуемого результата у меня не получается, нужна ваша помощь. Заранее благодарю! |
Как-то так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>.sp {transition: opacity .6s;}</style>
</head>
<body>
<div style="position:fixed;width:500px;margin:20px auto;background: #f3f4f4;border-radius: 12px;padding: 30px;">
<p class="text-2">
<span class="sp">С</span>
<span class="sp">Л</span>
<span class="sp">О</span>
<span class="sp">В</span>
<span class="sp">О</span>
</p>
</div>
<div style="height:1000px"></div>
<script>
var chars = document.querySelectorAll('.sp');
addEventListener('scroll', function() {
var d = document.documentElement;
// приводим значение скролла к интервалу [0-1]
upd(d.scrollTop / (d.scrollHeight - d.clientHeight))
});
upd(0)
function upd(scrollValue) {
// умножаем на диапазон возможных значений (индексов)
const { length } = chars;
chars.forEach((char, index) => {
// приводим положение символа к интервалу [0-1]
const position = index / (length - 1);
// вычисляем разницу положения сивола и положения скролла
const diff = scrollValue - position;
// если символ раньше скролла или скролл внизу и символ последний
if (diff > 0 || (position === 1 && scrollValue === 1)) {
char.style.opacity = 1;
} else {
char.style.opacity = 0.2;
};
})
}
</script>
</body>
</html>
Если же нужна какая-то дополнительная "плавность", то тут надо углубляться в математику.) |
:-?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sp {
transition: opacity .6s;
}
</style>
</head>
<body>
<div style="position:fixed;width:500px;margin:20px auto;background: #f3f4f4;border-radius: 12px;padding: 30px;">
<p class="text-2">
<span class="sp">С</span>
<span class="sp">Л</span>
<span class="sp">О</span>
<span class="sp">В</span>
<span class="sp">О</span>
</p>
</div>
<div style="height:1000px"></div>
<script>
let chars = document.querySelectorAll('.sp');
function upd() {
var d = document.documentElement;
showLetters(d.scrollTop / (d.scrollHeight - d.clientHeight));
}
addEventListener('scroll', upd);
upd()
function showLetters(scrollValue) {
const {
length
} = chars;
const max = Math.round(length * scrollValue);
chars.forEach((char, index) => {
const diff = scrollValue && index <= max;
char.style.opacity = diff ? 1 : 0.2;
})
}
</script>
</body>
</html>
|
Aetae,
рони, Парни браво! Спасибо вам огромное! |
Цитата:
|
| Часовой пояс GMT +3, время: 02:06. |