Как сделать анимацию «плавания» облаков?

Question

[Прейс Дмитрий]

Создаем от вуза сайт, но возникла проблема: нужно сделать анимацию "плавания" облаков справа налево. То есть они появляются на какой то позиции в блоке, как только пользователь прокручивает до этого блока, начинают плавать справа налево.


Позиция облаков определяется рандомно и задается абсолютным позиционированием относительно родительского элемента. Вот небольшая идейная демонстрация на фиддле: https://jsfiddle.net/PreisDmitriy/ja4qf1so/.
Вот сам сайт https://preisy.github.io/projectSno/

Я несколько часов сижу, уж как ни пытался: простой анимацией не получается, на js тоже понятия не имею как написать.

Подскажите идейно как это можно реализовать, я право уже не знаю

Comments

[Ankhena]

Да собственно, @keyframes
А это для отлавливания попадания в область видимости https://developer.mozilla.org/ru/docs/Web/API/Inte...
Когда попадает, добавляете класс, не попадает - убираете.

Answer 1

[Андрей Мартынкевич]

Вот мой пример, не знаю такой ли результат вам надо(Прокрутите вниз)

Comments

[Прейс Дмитрий]

А есть возможность в Вашем решении сделать передвижение очень-очень медленным? Я поигрался, на маленьких скоростях движение становится очень прерывистым и одинаковым

[Андрей Мартынкевич]

Прейс Дмитрий, Думаю вас это устроит

[Прейс Дмитрий]

Андрей Мартынкевич, Господи, потрясающе! Спасибо Вам огромное, что уделили время!

[Андрей Мартынкевич]

Прейс Дмитрий, Рад, что Вам помог)

Answer 2

[DefiniteIntegral]

Достаточно прописать float(плавающий) в css

Comments

[Ankhena]

О, как!
А пример такой анимации покажете?