Анимированная 404 HTML страница сайта
 | |
| Это великолепно выполнена по своей анимации страница ошибки 404, которая предназначена для сайта, что идет в адаптивной верстке при помощи CSS. Здесь нужно подчеркнуть, что страница с ошибкой, это отличная возможность продемонстрировать индивидуальность самого сайта, где возможно предлагают помощь потенциальному пользователю, который заплутал в сети интернет. Как только открыли сайт или блог, и не рассматриваете 404 страницу, что обозначает ошибку, то здесь вам рекомендуется решить эту проблему. Так, как сейчас, все поисковые системы учитывают ее, как стандартная страница, которая аналогично должна смотреться корректно на всех мобильных аппаратах. Эта страница мне попалась в сети и понравилась своей анимацией, что решил поделиться с пользователем сайта, так как возможно по своему характеру или направлению, она отлично впишется в интернет ресурс. Что по адаптивности, то она выполнена отлично, что на самом большом экране все корректно просматривается, и также на самом малом. Мы ведь должны понимать, что здесь идет анимация, где по своему весу она изначально больше весит других. Но попав на нее гость или потенциальный пользователь изначально будет удивлен. Ведь если так страница выполнена, то и сам основной дизайн не хуже смотрится. Так она выглядит в реальности, где нет переходов и ссылок:  При мобильном рассмотрение:  Одним из наиболее распространенных сообщений об ошибках компьютера является страница 404 не найдена. По сути, это означает, что страница, которую вы ищете, она просто не существует, хотя ранее была доступной, а сейчас ее удалили. А также перенесли в другой раздел, где ссылка автоматически меняется. Установка: Подключаем в HEAD Код <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script> HTML CSS Код body{ background-color:#141019; background: radial-gradient(at 50% -20%, #908392, #0d060e) fixed; } #handboy { animation: swing ease-in-out 1.3s infinite alternate; transform-origin: 98% 98%; transform-box: fill-box; } #girllight { animation: swing ease-in-out 1.3s infinite alternate; transform-origin: 0% 97%; transform-box: fill-box; } #hairgirl { animation: swinghair ease-in-out 1.3s infinite alternate; transform-origin: 60% 0%; transform-box: fill-box; } #zero { transform-origin:bottom; transform-box:fill-box; } /*************swing************/ @keyframes swing { 0% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } } /*************swing hair************/ @keyframes swinghair { 0% { transform: rotate(6deg); } 100% { transform: rotate(-6deg); } } JS Код anime({ targets: '.row svg', translateY: 10, autoplay: true, loop: true, easing: 'easeInOutSine', direction: 'alternate' }); anime({ targets: '#zero', translateX: 10, autoplay: true, loop: true, easing: 'easeInOutSine', direction: 'alternate', scale: [{value: 1}, {value: 1.4}, {value: 1, delay: 250}], rotateY: {value: '+=180', delay: 200}, }); Здесь страница, которую многие ищут в поиске, где безусловно думают, что она все еще существует. И не понимая, что просто URL-адрес изменился или был введен где-то неправильно, а то и вообще удалена страница, а запрос в поиске какое-то время будет виден. Вот так в большинстве попадаются на такую страницу, но нужно понимать, что это потенциальные пользователи, что переходят на тематические ссылки по запросу в поисковой системе. Это дает пользователю возможность искать то, на что он пытался сослаться, и найти правильный URL для себя. Где для этого можно поставить кнопку перехода на главную страницу, но здесь изначально идет только анимационный фон. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
|
| |
