Создаем анимированную страницу входа на сайтВы встречали сайты, которые встречают Вас страницей оглавлением для всего сайта? Лично я не раз сталкивался с подобными элементами, и сказать честно-они мне чертовски нравятся, они доставляют мне ощущение завершенности, перфекционизма, и я совсем не  преувеличиваю, так считают много моих коллег дизайнеров, начальная страница часто используется для выбора языка, или чтобы отвлечь пользователя от ожидания прогрузки «тяжелого» сайта. Такой трюк весьма распространен в современном сайтостроении и я советую Вам обратить на него внимание.

 

У нас есть изображение, которое будет оформлено центровой, анимированной кнопкой, пр наведении на которую будет происходит эффект затухание фона, или в нашем варианте цветовая заливка с установленной степенью прозрачности.

Шаг 1. HTML

Для начала нам необходимо разместить все элементы в хронологическом порядке на странице, я забыл Вам сказать, что при нажатии на кнопку, у нас будет происходить разворот страницы в котором будет отображаться навигация сайта:

У нас будет навигация, которая содержит приветствие и пять основных пунктов навигации оформленной блоками.

Создаем анимированную страницу входа на сайт

Шаг 2. CSS

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

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

Шаг 3. JS

В самом конце, нам необходимо добавить немного магии, и оживить нашу задумку, задав значение для нашей кнопки:

Данный эффект я планирую использовать в своих работах, надеюсь он также станет Вам полезным.

Вот и все. Готово!

Читайте также: