Лого www.SiteHere.ru

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

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

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

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

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

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

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

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

Красивая анимация для продающей страницы

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

1 HTML структура

Первым делом необходимо написать 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 стили

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

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

CSS КОД
1
2
3
4
5
.wrapBlock {
    position: relative;
    width: 1200px;
    margin: 100px auto;
}

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

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

CSS КОД
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. Поэтому будьте внимательны.

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

CSS КОД
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.

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

CSS КОД
1
2
3
4
5
6
.block1, .block2, .block3, .block4 {
    text-align: center;
    z-index: 100;
    position: relative;
    margin-top:20px;
}

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

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

CSS КОД
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). Данное свойство искажает блок с цифрой, чтобы создать эффект объема.

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

CSS КОД
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>:

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

HTML КОД
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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

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

HTML КОД
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 минут

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

Успехов!

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

Эффекты на страницу — красивые эффекты на продающую страницу 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *