1 Тема від SearchProg

  • SearchProg
  • Користувач
  • Поза форумом
  • Дата реєстрації: 07.03.2019
  • Повідомлень: 2
    • Репутація: 0

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

Доброго дня.

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

Завдання:

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

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

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

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

2 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • На форумі
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 096
    • Репутація: 5659

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

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

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

3 Відповідь від SearchProg

  • SearchProg
  • Користувач
  • Поза форумом
  • Дата реєстрації: 07.03.2019
  • Повідомлень: 2
    • Репутація: 0

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

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

4 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • На форумі
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 096
    • Репутація: 5659

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

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

5 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 277
    • Репутація: 2720

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

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

leofun01 вебсайт