Плывущие облака с 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 запустить; стиль, библиотеку, скрипт облаков, скрипт дождя (опционально), скрипт падающих звёзд (опционально).
Шикарно, но дождь, идущий над облаками или из воздуха портит атмосферу