Жидкая страница с ошибкой 404 на HTML5 Canvas
Очень интересная жидкая страничка 404, которая придётся по душе вашим пользователям, так как она реагирует на курсор, что позволяет создавать волны или утопить циферки 404
Для начала посмотрите ДЕМО
Моё тестирование в редакторе: КЛИК
Установка:
Создайте пустой документ 404.htm и поместите в него следующее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/css/wave.css"> <script src="/js/jquery.min.js"></script> <title></title> </head> <body> <!-- Inspired by hakim.se/experiments/html5/wave/03/ * Added bubble burst on click * Text wave animation --> <canvas id="background" style="z-index: 0; position: absolute; top:0px; left: 0px"></canvas> <canvas id="world" style="z-index: 2; position: absolute; top:0px; left: 0px"></canvas> <div> <div class="cloud x1"></div> <!-- Time for multiple clouds to dance around --> <div class="cloud x2"></div> <div class="cloud x3"></div> <div class="cloud x4"></div> <div class="cloud x5"></div> </div> <script src="/js/wave.js"></script> </body> </html> |
Осталось лишь залить два JS файла в папку js и один CSS файл в папку css
P.S. Также в архиве лежит уже полностью рабочая страничка 404.htm
