Плывущие облака с Parallax эффектом на HTML5 Canvas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
canvas { display: block; margin: 2em; } .bg-canvas { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; margin: 0; } |
|
1 2 |
<script src='/js/Canvallax.min.js'></script> <script src='/js/clouds.js'></script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
одного понять не могу как поменять цвет облаков, все облазил, но догнать не могу, подскажет кто ?
cloudImg.src в самом конце скрипта, это картинка в формате base64 (набери в гугле конвертор изображений base 64 там можно сгенерировать код для картинки своей, а если нужно только цвет поменять то скопируй в строку браузера всё содержимое этой переменной, затем сохрани на компьютер, и там в фотошопе пошаманить немного надо, а затем сгенерийруй его base64 и замени в переменной его код)
упс не сразу заметил 😀
Можешь попробовать манипулировать с CSS фильтрами для canvas элемента. Пример: http://codepen.io/Imapo/pen/kkLqgB
При смене направление движения в clouds.js , облака пролетают направо и больше не появляются при первой загрузке страницы. Как поменять их генерацию так, чтобы они бесконечно летели слева направо?
Уффф сочно выглядит
Добавил 4 времени суток и подсчёт плотности облаков.
"morning", "noon", "twilight", "evening", "night", "afternoon"
Круто! Поделишься кодом?
Эй братишки подска жите как сменить цвет облаков ? Шото я не вижу параметра, мне надо в 2 цвета желательно верх один цвет с переходов в другой
В скрипте найди код картинки и можешь заменить просто на ссылку на своё изображение
Куда деваются посты со ссылками?
Скорее всего автоматически фильтруются. Раньше такой проблемы не было
Я не против, что есть фильтр, только хочется понять из-за чего посты попадают в спам, ссылки ведь можно давать, может редактировать нельзя уже написанный пост?
http://ipic.su/img/img7/fs/142.1692611750.png
Выглядит потрясающе!
http://ipic.su/img/img7/fs/140.1692634249.png
Вообще космос!
Добавил дождь и падающие звёзды ночью, если облачность ниже 50%.
http://vvl99.narod.ru/Clouds.html
Для вставки на страницу:
<body>
<link rel="stylesheet" type="text/css" target="_blank" rel="noopener noreferrer" href="clouds/style.css">
<script src='clouds/Canvallax.min.js' charset="UTF-8"></script>
<script src='clouds/clouds.js' charset="UTF-8"></script>
<script src="clouds/Rain.js" charset="utf-8" ></script>
<script src="clouds/Star.js" charset="utf-8" ></script>
Чувак, это - шедевр!
P.S. Вытащил твои комментарии из папки спам
На ночной сцене при облачности выше 80% ещё сверкает гроза.
http://ipic.su/img/img7/fs/145.1693678245.png
http://ipic.su/img/img7/fs/146.1693679964.png
Выглядит потрясающе!
Обновил грозу.
http://ipic.su/img/img7/fs/152.1694100812.png
Ещё разнообразия:
http://ipic.su/img/img7/fs/159.1694267217.png
http://ipic.su/img/img7/fs/160.1694267221.png
http://ipic.su/img/img7/fs/161.1694267226.png
Очень круто выглядит! Есть демка?
Я давал ссылку на страницу и давал код, как это запустить у себя,
_http://vvl99.narod.ru/Clouds.html_
Внутри Body запустить; стиль, библиотеку, скрипт облаков, скрипт дождя (опционально), скрипт падающих звёзд (опционально).
Шикарно, но дождь, идущий над облаками или из воздуха портит атмосферу
Всё тот же скрипт - _http://vvl99.narod.ru/clouds2/Clouds.html
варианты через f5/
Добавил к грозе звук - _http://vvl99.narod.ru/Clouds.html
Вкл./выкл. через ЛКМ.
Звука не услышал, сколько ни кликал
Звук есть только при грозе.
Остальные сцены без звука, можно конечно добавить ветер и дождь.
Всё, попалась эта сцена. Шикарно!
Если нужна конкретная сцена, ниже написано как именно её вызвать и дать постоянную ссылку.
Некоторые сцены имеют ещё и варианты, так что в общей сложности их вроде 18.
Молодец, хорошо поработал!
Добавил опции - _http://vvl99.narod.ru/Clouds.html#4?1?81
#[0-9] - Сцена.
?[0-1] - Тип облаков.
?[0-100] - Процент облаков.
Делал для тестов, но может пригодиться для просмотра.
К примеру гроза на 4 и 8 сцене при облаках больше 80.
Уау! Какая красота!
Всплывающая подсказка под курсором - _http://ipic.su/img/img7/fs/171.1699176980.png
Ага, я уже потом увидел, когда курсор остановился