Принцип строения страниц по продаже любого товара практически всегда неизменен. Они состоят из отдельных блоков, обращаясь к которым, пользователь может составить мнение о продаваемых на нем товарах. Если каждый такой блок оригинально оформить, то страница, которая из них состоит, будет выглядеть ярко и привлекательно. Так, чтобы посетителю обязательно захотелось купить предлагаемый товар, даже если всего пять минут назад он об этом и не думал. Здесь мы рассмотрим, как грамотно создать блок с выгодами на CSS. Остановимся на этом вопросе отдельно, так как использование блоков – самый популярный способ организации одностраничного сайта.
Что мы должны получить в результате: конструктивно блок состоит из двух составляющих — видимой и скрытой. Видимый модуль составляют иконка и наименование выгоды, преимущества. В скрытой части помещается полное описание выгоды, оно появляется при наведении на иконку курсора.
Чтобы увидеть эффекты скачайте страницу с примером:
Как сделать красивое оформление для своего продающего сайта?
1. HTML структура
В первую очередь необходимо вставить иконки от FontAwesome между тегами <head></head>, которые будем использовать для описания:
|
1 |
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
Мы имеем один большой блок, в котором будут три блока с описаниями и иконками.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="bulletsBlock"> <div class="bullet-item"> <span class="iconBullet fa fa-cog"></span> <p class="titleBullet">Выгода 1</p> <p class="hideText">Дополнительный<br>скрытый текст 1</p> </div> <div class="bullet-item"> <!-- Содержимое 2-го блока --> </div> <div class="bullet-item"> <!-- Содержимое 3-го блока --> </div> </div> |
Описание структуры:
- С первой по пятнадцатую строчки – общий блок, содержащий три блока с описанием.
- Со второй по шестую строчки – один отдельный блок с описанием выгоды.
- Третья строчка – иконка блока.
- Четвертая строчка – видимый модуль с указанием выгоды.
- Пятая строчка – скрытый модуль с подробным описанием выгоды.
Как видим, конструкция очень простая. Теперь нужно добавить анимацию.
2. CSS стили
Чтобы создать анимацию нам не придется обращаться к Javascript. Нам будет достаточно возможностей CSS3.
Указываем стили, общие для всех трех блоков:
|
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 27 28 29 |
.bulletsBlock:after { content: ""; display: table; clear: both; } .bulletsBlock > div { width: 30%; float: left; background: rgba(0,0,0,0.3); margin-left:5%; text-align: center; position: relative; padding-bottom: 31.7%; cursor: pointer; -webkit-transition:all 0.35s linear; transition:all 0.35s linear; } .bulletsBlock > div:first-child { margin-left:0; } /*Тень снизу у блока при наведении*/ .bulletsBlock > div:hover { -webkit-box-shadow: 0 35px 35px -35px #000000; -moz-box-shadow: 0 35px 35px -35px #000000; box-shadow: 0 35px 35px -35px #000000; } |
Затем следует иконка с анимацией:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.bullet-item span{ line-height: 1.5em; font-size: 12.5em; color:#fff; position: absolute; top:0; left:0; display: block; width: 100%; -webkit-transition:all 0.35s ease; transition:all 0.35s ease; } /*Анимация иконки при наведении - уменьшение и сдвиг вверх*/ .bulletsBlock > div:hover span.iconBullet{ line-height: 1.35em; font-size: 10.625em; top:-2.7%; } |
В конце описываем стили для блоков с текстовым указанием выгоды:
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.titleBullet, .hideText { position: absolute; left:0; bottom:0; text-align: center; width: 100%; margin: 0; color: #fff; -webkit-transition:all 0.35s ease; transition:all 0.35s ease; } .titleBullet { line-height: 2.5em; font-size: 2.1875em; background:#3B3B3B; z-index: 10; } .hideText { line-height: 1.3em; font-size: 1.25em; padding: 1em 0; background:#3B3B3B; font-weight: 300; z-index: 8; height: 50px; -webkit-transition:all 0.35s linear 0.2s; transition:all 0.35s linear 0.2s; } /*Анимация при наведении видимого текстового блока*/ .bulletsBlock > div:hover p.titleBullet{ bottom:80px; } /*Анимация при наведении скрытого текстового блока*/ .bulletsBlock > div:hover p.hideText{ background:#454545; } |
Вывод
Хорошая анимация сделает ваш сайт более привлекательным, заинтересует пользователя. Но постарайтесь не переусердствовать, аляповатость и безвкусие скорее отпугнут потенциального клиента.
Возьмите исходные файлы на сайте и переработайте их так, чтобы они соответствовали вашим интересам. Надеюсь, они будут для вас полезны.
Залишити відповідь