Форум

Volonter · #1 (**permalink**) 10.07.2023, 08:33

Всем привет! Подскажите, как доработать скрипт. Изначально буквы в элементах 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>

Доделать до требуемого результата у меня не получается, нужна ваша помощь.
Заранее благодарю!

Aetae · #2 (**permalink**) 11.07.2023, 01:06

Как-то так:

<!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>

Если же нужна какая-то дополнительная "плавность", то тут надо углубляться в математику.)

рони · #3 (**permalink**) 11.07.2023, 01:26

<!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>

Volonter · #4 (**permalink**) 11.07.2023, 07:33

Aetae,
рони,
Парни браво! Спасибо вам огромное!

Volonter · #5 (**permalink**) 11.07.2023, 10:00

Сообщение от Aetae

Если же нужна какая-то дополнительная "плавность", то тут надо углубляться в математику.)

Я извиняюсь за мою наглость)), а если не трудно и будет желание повозиться, можете дать какой то пример с математикой и плавностью?

Форум

Справочник

Discord чат

Курсы javascript