Top.Mail.Ru

Пасхалки на сайтах: 10 примеров классной реализации

Блог Пасхалки на сайтах: 10 примеров классной реализации
224

Прежде чем представить 10 гениальных примеров, давайте разберемся, что же такое пасхалки.

Пасхалки —; это такой своеобразный «привет от разработчика». Не всегда обычный пользователь способен их обнаружить, чаще всего они спрятаны в коде. Либо же нужно совершить определенные действия, чтобы их увидеть.

Чаще всего пасхалки используют в фильмах, мультфильмах или в видеоиграх. Они ссылаются на другой фильм, мультфильм, событие, персону, показывают дополнительную информацию и т.д.

К примеру, в фильме «Кролик Джоджо» воображаемый Гитлер предлагал главному герою сигареты и в одном из кадров ел мясо. Этот трюк был придуман режиссером, чтобы подчеркнуть, что мальчик ничего не знал о реальном фюрере, который был вегетарианцем и ярым противником курения.

Пасхалки на сайтах: 10 примеров классной реализации, изображение №1

Сейчас пасхалки широко применяют и на сайтах. Обычно они не несут никакого скрытого смысла и служат, чтобы донести какую-то информацию более внимательным людям или просто повеселить.

В общем, пасхалка в web-сфере—; это некий секрет/отсылка, оставленная разработчиками на сайте. Расскажу вам про 10 неочевидных пасхалок, которые вы можете встретить на популярных ресурсах.

Где найти пасхалку: 10 крутых примеров реализации

1. Метро Москвы

Загляните на этот сайт. Здесь разработчики придумали необычный способ предложить разбирающимся людям работу. Нажимаем ctrl+u и в коде на строке номер 3 видим послание.

Пасхалки на сайтах: 10 примеров классной реализации, изображение №2

Добавить такую пасхалку на сайт не составит большого труда, достаточно просто зайти в код сайта и добавить комментарий.

2. Пикабу

Забавное послание придумали пикабушники. Переходим на сайт, открываем консоль и видим смешного деда.

Пасхалки на сайтах: 10 примеров классной реализации, изображение №3

Таким образом разработчики, добавив мемного дедка, в забавной форме дают понять, что нечего лазить в консоль.

3. VC.RU

На этом популярном сайте тоже присутствует пасхалка для особо внимательных, находится она в коде. Переходим на сайт, нажимаем ctrl+u и смотрим на паука, который расположился на 5 строчке.

Пасхалки на сайтах: 10 примеров классной реализации, изображение №4

Чтобы разместить такую же пасхалку у себя на сайте, достаточно перейти в код сайта и с помощью комментария добавить.

4. 404 страница

Существуют еще такие пасхалки, на которые человек может наткнуться совершенно случайно, например, введя неправильную страницу.

Пасхалки на сайтах: 10 примеров классной реализации, изображение №5

Сделать такую пасхалку совсем не сложно, достаточно отредактировать 404 страницу, к примеру, Джон Траволта размещен как gif-картинка. Еще 50 примеров крутых 404 страниц мы давали в этой статье.

5. Артемий Лебедев

Все-таки больше всего программисты любят оставлять пасхалки комментариями в коде. Например, шутники из команды Темы Лебедева оставили на сайте целое послание. Достаточно перейти в код, начинается оно с 271 строки.

Пасхалки на сайтах: 10 примеров классной реализации, изображение №6

Пасхалки на сайтах: 10 примеров классной реализации, изображение №7

Пасхалки на сайтах: 10 примеров классной реализации, изображение №8

Также на этом сайте пасхалка скрыта в логотипе.

Когда мы заходим на сайт, то шапка выглядит следующим образом:

Пасхалки на сайтах: 10 примеров классной реализации, изображение №9

Наводим на логотим, буквы открываются и цвет начинает меняться. Наводите курсор на лого несколько раз, и вы увидите, как цвет будет каждый раз меняться.

6. Youtube

Разработчики youtube в файле robots.txt тоже не удержались и оставили послание потомкам. Достаточно перейти в файл robots.txt и вы его увидите на 2 и 3 стоках.

Пасхалки на сайтах: 10 примеров классной реализации, изображение №10

Если перевести текст, то получится следующее: Создан в далеком будущем (2000 год) после восстания роботов середины 90-х, которое уничтожило всех людей.

Создать на своём сайте такую пасхалку нетрудно, достаточно в файл robots.txt добавить в комментарии любую информацию.

7. Яндекс

Настоящая кладовая пасхалок! Одна из крутых фишек: можно оставить только поисковую строку, а все лишнее убрать. Достаточно ввести в поиск https://ya.ru/black или https://ya.ru/white. Таким образом фон станет черным или белым, и ничего лишнего не будет вас отвлекать от поиска.

Пасхалки на сайтах: 10 примеров классной реализации, изображение №11

 

Пасхалки на сайтах: 10 примеров классной реализации, изображение №12

8. Amazon

Популярный интернет-магазин тоже запрятал в коде пасхалку. Чтобы её увидеть, достаточно зайти на сайт, нажать ctrl+u и промотать в самый низ страницы. Там запряталась мяукающая уточка или странный котик —; каждый видит то, что видит. Но мне кажется, что это уточка. =)

Пасхалки на сайтах: 10 примеров классной реализации, изображение №13

9. Википедия

На сайте веб-энциклопедии на странице со статьей о пасхальных яйцах тоже есть пасхальное яйцо. При нажатии на ежа нас перебрасывает на картинку с яйцами.

Пасхалки на сайтах: 10 примеров классной реализации, изображение №14

 

Пасхалки на сайтах: 10 примеров классной реализации, изображение №15

Разберем детальнее, как сделать такую пасхалку. Если заглянем в код, то увидим следующее:

 

Пасхалки на сайтах: 10 примеров классной реализации, изображение №16

Ссылка на картинку выполнена с помощью тега.

С помощью него мы выделили активную область изображения и задали на нем ссылку. Таким образом на одном изображении можно задать несколько невидимых областей и повесить несколько ссылок.

Чтобы сделать такую пасхалку на своем сайте, следует использовать картинку с помощью тега и добавить так называемую карту изображения. Для этого нужно задать имя (через name) и его же продублировать в теге через атрибут usemap. Таким образом мы свяжем картинку и карту изображения. Далее в прописываем, через этот тег мы и добавим ссылку на изображение, с помощью атрибута shape задаем форму области, а с помощью атрибута coords задаем координаты области. Также можно добавить атрибут title, чтобы при наведении отображалась надпись.

10. Что делать?

Еще можно встретить интерактивные пасхалки, например, если на сайте долго тыкать на шапку, а потом нажать на вылетевшего trollface, то вы увидите злого дяденьку из мема.

Пасхалки на сайтах: 10 примеров классной реализации, изображение №17

Вывод

Раньше пасхалки на сайтах встречались гораздо чаще, сейчас разработчики редко добавляют на сайт подобные вещи, а зря, ведь с ними сайт становится интереснее и в некоторых случаях улучшаются поведенческие факторы.

Источник



Комментарии


Вам также может понравиться





Смотреть все