1

Тема: Анімація для текста при прокрутці сторінки

Доброго дня.

Підкажіть будь лака як реалізувати.

Завдання:

Є рядок <p>Test text Test text Test text Test text</p>

При прокрутці сторінки вниз рядок рухається вправо і зникає.

(Бажано, ще реалізувати щоб рядок з'являвся назад якщо скролити вверх).

Наперед дякую.

2

Re: Анімація для текста при прокрутці сторінки

Здоров. Тут все очевидно, вам треба підписатись на івент прокрутки onscroll, і в залежності від того, яке значення він поверне, змінювати стилі рядка, аби він рухався вправо.
Там можна змінювати або margin-left; або padding-left (оце не точно), або ж встановити position: absolute; або position: relative; і тоді вже змінювати left. Коли left буде 100%, або дорівнювати ширині сторінки в якихось юнітах, як от пікселі, то рядок буде прихованим.

Подякували: SearchProg, leofun012

3

Re: Анімація для текста при прокрутці сторінки

Можна приклад?

4

Re: Анімація для текста при прокрутці сторінки

то ви ніколи не писали нічого, чи що?

5

Re: Анімація для текста при прокрутці сторінки

На елемент (який ви хочете анімувати) потрібно поставити
animation-fill-mode: forwards;
animation-play-state: paused;

і додати слухача на scroll, який буде міняти animation-play-state на running.
Це буде працювати краще ніж динамічне оновлення позиції елемента.