Блог

Попытка воспроизвести ту же функциональность, что и https://www.apple.com/uk/ipad-air / где при прокрутке градиент текста меняется. Прокрутите вниз до «Мощный. Красочный. Замечательно», чтобы увидеть эффект, который я пытаюсь воспроизвести. Я знаю, как сделать обычный линейный градиент (https://codepen.io/laluuk/pen/xxOwxGv ) но как мне изменить его при прокрутке, я предполагаю, что я должен использовать JS / jQuery scroll, но на самом деле не знаю, как это сделать. Был бы очень признателен за помощь…

 <section class="text-1">
    <h1>Powerful.</h1>
</section>
<section class="text-2">
    <h1>Wonderful.</h1>
</section>


section {
    height: 100vh;
}

.text-1 {
    text-transform: uppercase;
    background: linear-gradient(to right, #30cfd0 0%, #330867 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 72px;
    font-family: "Poppins", sans-serif;
}

.text-2 {
    text-transform: uppercase;
    background: linear-gradient(to right, #11825b 0%, #330867 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 72px;
    font-family: "Poppins", sans-serif;
}
  

у меня получилось что-то вроде этого:

     const textElement1 = document.querySelector('.text-1');
    const textElement2 = document.querySelector('.text-2');

    document.onscroll = () => {
        const textElement1DistanceFromTop = textElement1.getBoundingClientRect().top;
        const textElement2DistanceFromTop = textElement2.getBoundingClientRect().top;
        const { clientHeight } = document.documentElement;
        if (textElement1DistanceFromTop > clientHeight || textElement2DistanceFromTop < 0) return;

        const startPrecent = textElement2DistanceFromTop / 4   '%';
        const endPrecent = textElement2DistanceFromTop / 4   100   '%';
        textElement1.style.backgroundImage = `
            linear-gradient(to right, #30cfd0 ${startPrecent},#330867 ${endPrecent})`;
        textElement2.style.backgroundImage = `
            linear-gradient(to right, #11825b ${startPrecent},#330867 ${endPrecent})`;
    }
  

просто поиграйте с математикой преценденции