Как известно, на codepen.io можно найти массу красивых и полезных примеров с кодом HTML / CSS / JavaScript / jQuery / React и т.п. Сегодня мы остановимся на примерах страниц с ошибкой 404 - Not Found (не найдено). Такая страница должна быть на каждом сайте, т.к. есть масса пользовательских запросов, на которые на сайте не будет страниц. Собственно, такую страницу и надо будет отображать при неудачном запросе пользователя.
Начнем со страницы с анимацией и с юмором от Aishwary Gupta.
See the Pen 404 Page_Not_Found by Aishwary Gupta (@Aishwary2004Gupta) on CodePen.
Анимированная на CSS и близкая по тематике к предыдущему примеру страница 404 от Sergio.
See the Pen code for fun (day02): 404 error page, Caveman mode - pure CSS by Sergio (@SofiaSergio) on CodePen.
Трехмерная синяя комната 404 от Josetxu.
See the Pen 404 Error Room - CSS by Josetxu (@josetxu) on CodePen.
Трехмерное предупреждение от Lisi
В примере использованы SVG и анимация на основе плагина GSAP.
See the Pen SVG & GSAP by Lisi (@lisilinhart) on CodePen.
И еще один пример с анимированным SVG от Stéphane Deluce
See the Pen SVG Animation 404 page by Stéphane Deluce (@Stephane) on CodePen.
Транспортная развязка с SVG от Sylvain Lepinard
See the Pen 404 error | SVG - CSS by Sylvain Lepinard (@Sylvain_Lepinard) on CodePen.
Печатный текст от Selcuk Cura
Сделано на основе плагина GSAP Sp;itText.
See the Pen GSAP 404 typed message using SplitText by Selcuk Cura (@selcukcura) on CodePen.
Страницы с фонарем
Анимационный пример от Jhey.
See the Pen 404 Concept Page @property by Jhey (@jh3y) on CodePen.
Еще один пример с раскачивающимся фонарем от Swarup Kumar Kuila
See the Pen error page 404 by Swarup Kumar Kuila (@uiswarup) on CodePen.
Страница 404 с фонарем, но без анимации от Janet Mendez.
See the Pen 404 Error - Lost and Alone #CodePenChallenge by Janet Mendez (@janmez) on CodePen.
Анимация в космосе
Черно-белый пример от Kasper De Bruyne
See the Pen 404 Page by Kasper De Bruyne (@kdbkapsere) on CodePen.
Цветной марсианский пример от Asyraf Hussin.
See the Pen Mars 404 Error Page by Asyraf Hussin (@AsyrafHussin) on CodePen.
Затерявшийся астронавт от Filip Vitas.
See the Pen Error 404 Page With Astronaut by Filip Vitas (@FilipVitas) on CodePen.
И еще один астронавт в космосе от anhat.dev.
See the Pen 404 Error Page by anhat.dev (@nhatanh17) on CodePen.
Анимированная страница с ошибкой 404 от Kumar Kuila
See the Pen 404 error page by Swarup Kumar Kuila (@uiswarup) on CodePen.
Анимированная страница 404 от Rafaela Lucas
В этом примере с анимацией появляется текс, есть анимация на заднем фоне и при наведении мышкой. Основано на исаользовании плагина jQuery Paralax.js. Саму библиотеку можно скачать по ссылке на CDNJS.
See the Pen Daily UI #008 - 404 Page by Rafaela Lucas (@rafaelavlucas) on CodePen.
Для любителей пива от Chelsea Adams
See the Pen Beer 404 by Chelsea Adams (@chadamski) on CodePen.
Разорванная страница от Jon Kantner
Здесь тоже есть анимация, причем только на CSS, но и проще, чем в предыдущих примерах.
See the Pen Ripped 404 Page Animation by Jon Kantner (@jkantner) on CodePen.
Страница с анимацией цифр
Пример от Ahmed. Дизайн основан на Bootstrap.
See the Pen Error 404 Page design BOOTSTRAP by Ahmed (@Ahmed_B_Hameed) on CodePen.
Прмер с крутящимися шестеренками от Manaswini.
See the Pen 404 Error Cogwheels(GSAP) by Manaswini (@1832Manaswini) on CodePen.
Пример с поездом от Carla
See the Pen CSS Train 404 Page by Carla (@ckroll17) on CodePen.
Анимированная страница с глазами от Vineeth.TR
See the Pen 404 Error page by Vineeth.TR (@vineethtrv) on CodePen.
Дядечка в недоумении от Henry W
See the Pen 404 Error page - Animated SVG by Henry W (@henrywr) on CodePen.
Страница 404, стилизованная в виде кода из 80-х
Автор Robin Selmer.
See the Pen Error 404: Page not found – 80s hacker theme by Robin Selmer (@robinselmer) on CodePen.
Проявление Error 404 в виде пикселей от Taufik Nurrohman
See the Pen My Error 404 Page by Taufik Nurrohman (@taufik-nurrohman) on CodePen.
Страница с анимированным текстом и треугольниками от Dany Santos
See the Pen 404 page Animation by Dany Santos (@THEORLAN2) on CodePen.
Анимация разрушения после нажатия на кнопку
Автор Anton.
See the Pen 404 ERROR Template by Anton (@Pogodaanton) on CodePen.
Простые примеры страницы 404
Мерцающий курсор на CSS от Akash Rajendra
See the Pen Simple 404 Page by Akash Rajendra (@akashrajendra) on CodePen.
Автор Ivanna использовал просто текст с тенью.
See the Pen #CodePen Challenge 404 - Breakout! by HTML-plus (@ambassador) on CodePen.
Рисунок с перспективой от Jon Kantner.
See the Pen 404 Error Page with Tumbleweed Game by Jon Kantner (@jkantner) on CodePen.
Предупреждение, похожее на окно alert, от Marco Biedermann.
See the Pen ERROR 404 - Page not found by Marco Biedermann (@marcobiedermann) on CodePen.
Короткое сообщение о закрытии от Takane Ichinose.
See the Pen E-Commerce Store is closed sign (Responsive) by Takane Ichinose (@takaneichinose) on CodePen.
Трясущийся текст от Marco Biedermann.
See the Pen Error 404 Animation by Marco Biedermann (@marcobiedermann) on CodePen.
Разрыв страницы с кодом от Kilchenmann.
See the Pen Error 404 Page by Kilchenmann (@kilchenmann) on CodePen.
