Плывущие облака с Parallax эффектом на HTML5 Canvas
Очень здоровский эффект с облаками, создающими иллюзию движения в перспективе
Для начала посмотрите ДЕМО
Моё тестирование в редакторе: КЛИК
Установка:
1#: В самый низ вашего CSS вставьте:
|
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; } |
2#: После /head на нужных страницах вставьте:
|
1 2 |
<script src='/js/Canvallax.min.js'></script> <script src='/js/clouds.js'></script> |
Два JS файла из прикреплённого архива залейте в папку js
одного понять не могу как поменять цвет облаков, все облазил, но догнать не могу, подскажет кто ?
cloudImg.src в самом конце скрипта, это картинка в формате base64 (набери в гугле конвертор изображений base 64 там можно сгенерировать код для картинки своей, а если нужно только цвет поменять то скопируй в строку браузера всё содержимое этой переменной, затем сохрани на компьютер, и там в фотошопе пошаманить немного надо, а затем сгенерийруй его base64 и замени в переменной его код)
Можешь попробовать манипулировать с CSS фильтрами для canvas элемента. Пример: http://codepen.io/Imapo/pen/kkLqgB
При смене направление движения в clouds.js , облака пролетают направо и больше не появляются при первой загрузке страницы. Как поменять их генерацию так, чтобы они бесконечно летели слева направо?