Эффекты на страницу — красивые эффекты на продающую страницу

Сейчас можно найти большое количество библиотек и плагинов, которые добавляют эффекты на страницу и делают ее анимированный. Но эффекты, которые Вы увидите сегодня я создал только с использованием библиотеки jQuery. Поэтому не нужно подключать сторонних плагинов, которые будут лишь грузить страницу. Я хотел создать не просто красивый эффект, а полезный элемент продающей страницы. Получилось это у меня или нет: судите сами! 😉

Также советую почитать следующие статьи на тему лендингов:

• Как сделать видео фоном сайта + видеостоки
• Анимация для лендинга — создание анимации на лендинге
• Исследование: почему эти популярные способы создания лендинга больше не работают?

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

Перейдите по ссылке «Посмотреть пример» и прокрутите страницу вверх-вниз, чтобы увидеть эффекты:

Посмотреть примерСкачать

Для того, чтобы показать суть эффекта в качестве примера я продемонстрировал процесс получения бесплатного мини-курса "Лендинг за 60 минут".

Ниже я сделал GIF анимацию того, как выглядят эффекты при прокрутке страницы (необходимо подождать пока изображение прогрузится).

Как установить такие эффекты на страницу?

1 HTML структура

Первым делом необходимо написать HTML структуру страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="wrapBlock">
    <div class="trg">1</div>
 
    <div class="block1">
        <p class="step">1. Подписаться</p>
        <img src="images/img1.png" class="imgWithShadow" alt="Подписаться">
    </div>
    <div class="block2">
        <p class="step">2. Активировать<br>подписку</p>
        <img src="images/img2.png" alt="Активировать подписку">
    </div>
    <div class="block3">
        <p class="step">3. Смотреть<br>1-й урок</p>
        <img src="images/img3.png" alt="Получить первый урок">
    </div>
    <div class="block4">
        <p class="step">4. Выполнить<br>д/з из урока</p>
        <img src="images/img4.png" alt="Выполнить домашнее задание">
    </div>
 
    <div class="border-number"></div>
</div>

Я привел здесь полный код HTML, поэтому немного поясню:

• Строка: 2 — блок с цифрой.
• Строки: с 4 по 19 — все 4 блока с изображениями и всплывающими подсказками.
• Строка: 21 — блок для штриховой линии.

Я думаю здесь сложностей не возникло. Поэтому идем дальше и зададим стили.

2 CSS стили

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

Задаем стили для основного блока:

1
2
3
4
5

.wrapBlock {
    position: relative;
    width: 1200px;
    margin: 100px auto;
}

Он у нас будет шириной в 1200px, а также у него относительное позиционирование, потому что внутренние блоки будут располагаться относительно его.

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

1
2
3
4
5
6

.imgWithShadow {
    -webkit-filter: drop-shadow(0px 37px 5pxrgba(0,0,0,0.75));
    filter: drop-shadow(0px 37px 5px rgba(0,0,0,0.75)); 
    -webkit-transition:all 0.35s linear;
    transition:all 0.35s linear;
}

Есть маленький нюанс по поводу данной части кода.

Важно! Для того, чтобы в PNG изображении с прозрачностью выделить только непрозрачную часть, я использовал свойство "filter". Но данное свойство совершенно не поддерживается Internet Explorer. Поэтому будьте внимательны.

Идем дальше и зададим стили для появляющейся подсказки справа:

1
2
3
4
5
6
7
8
9
10
11
12
13

p.step {
    position: absolute;
    top:30px;
    left:120px;
    margin: 0;
    color:#CEC9E7;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0;
    -webkit-transition:all 0.5s linear;
    transition:all 0.5s linear;
}

У нее изначально прозрачность равна нулю. И всю анимацию появления мы будем создавать с помощью jQuery.

Сейчас давайте разберемся с блоками, в которых находится изображение и параграф:

1
2
3
4
5
6

.block1, .block2, .block3, .block4 {
    text-align: center;
    z-index: 100;
    position: relative;
    margin-top:20px;
}

Их всего 4, и поэтому я перечислил их через запятую, потому что свойства для всех одинаковы.

Далее задаем стили для блока с цифрой, которые перемещается по правому краю:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.trg {
    position: absolute;
    left: 75.9%; 
    top: 140px;
    width: 80px;
    height: 80px;
    background: #159A7F;
    color: #fff;
    text-align: center;
    line-height: 80px;
    font-size: 40px;
    -webkit-transition: all 0.45s ease;
    transition: all 0.45s ease;
    -webkit-transform: skewY(27deg);
    transform: skewY(27deg);
    z-index: 100;
}

Как видите, стилей здесь достаточно много, но в основном все стили довольно понятны. Хочу лишь заострить Ваше внимание на свойстве transform: skewY(27deg). Данное свойство искажает блок с цифрой, чтобы создать эффект объема.

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

1
2
3
4
5
6
7
8
9

.border-number {
    position: absolute;
    top: 240px;
    left: 82%;
    height: 0;
    border-right: 5px dashed #BFB8E7;
    -webkit-transition:height 0.45s ease;
    transition:height 0.45s ease;
}

Этот блок имеет высоту 0px и по мере прокрутки страницы пользователем будет увеличиваться.

Это все стили. Их не так и много. Основная часть находится в JS. Если с этим блоком разобрались, тогда движемся дальше.

3 jQuery код

Я писал код с использованием библиотеки jQuery, поэтому сначала необходимо ее подключить перед закрыюващим тегом </body>:

Задаем стили для основного блока:

1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Для тех, кому не хочется разбираться в коде, просто подключите данный JS-файл: script-sitehere.js. Его также можно взять в архиве с исходниками в начале статьи.

Ну а для тех, кто хочет изменить данные эффекты под себя, немного поясню код:

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

$(document).ready(function() {
	// по умолчанию первая подсказка видна, а остальные скрыты
	$(".step").css({opacity: 0});
	$(".block1 .step").css({opacity: 1});
 
    // события при прокрутке страницы
	$(window).scroll(function() {
		var wB = $( ".wrapBlock" );
		var position = wB.position(); // узнаем позицию главного блока
 
        // первое условие, когда блок "прокрутили" до 30px
        if (isSTop < position.top + 30)
        {
            $('.trg').css({top: "140px", background: "#159A7F"}); // меняем цвет у блока с цифрой
            $('.trg').text("1"); // меняем цифру при прокрутке
 
            $('.border-number').css({height: "0"}); // задаем высоту для блока со штриховой линией
 
            $("img").removeClass( "imgWithShadow" ); // убираем класс с тенью у всех изображений
            $(".block1 img").addClass( "imgWithShadow" ); // добавляем тень для изображения в центре
 
            $(".step").css({opacity: 0}); // задаем нулевую прозрачность всем блокам с подсказкой
            $(".block1 .step").css({opacity: 1, display: "block"}); // показываем только нужный блок у которого изображение в центре
        }
        // второе условие, когда блок "прокрутили" более 30px
        if (isSTop > position.top + 30) {
            // код
        } 
        // третье условие, когда блок "прокрутили" более 549px
        if (isSTop > position.top + 549) {
            // код
        }
        // четвертое условие, когда блок "прокрутили" более 912px
        if (isSTop > position.top + 912) {
            // код
        }
    });
});

Здесь всё легко. Мы просто проверяем с помощью каждого условия до какого момента был прокручен блок с классом "wrapBlock" и в зависимости от положения задаем те или иные свойства для наших элементов.

Вывод

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

Если Вы хотите научиться создавать продающие страницы с нуля, но у Вас нет времени, тогда специально для Вас бесплатный мини-курс "Лендинг за 60 минут":

Все этапы создания лендинга Вы можете изучить в бесплатном мини-курсе «Лендинг за 60 минут», где я на Ваших глазах создам лендинг с полного нуля. Вы его можете получить здесь:ПОЛУЧИТЬ МИНИ-КУРС СЕЙЧАС

Успехов!

С Уважением, Юрий Немец