Твит

Нет ограничений на создание действительно красивой и "емкой" анимации на сайте. Это я продемонстрировал в данной статье. Анимация в начале лендинга - это очень простой способ удержать внимание потенциального клиента и заставить посмотреть страницу дальше.

В статье Вы можете увидеть живую анимацию, которую я создал лишь с помощью CSS3 и небольшой JS библиотеки. Данная анимация имеет ряд преимуществ перед GIF или Flash анимацией:
1) Загружается быстрее
2) Меньше объем загружаемых файлов
3) Относительно легче при создании

Все этапы создания анимации я подробно описал.

Твит

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

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

Твит

Чтобы привлечь внимание посетителя отдельным элементам на странице, их необходимо каким-либо образом выделить, а еще лучше анимировать. В этом уроке я хотел показать как можно анимировать статистические данные на странице.

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

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

Твит

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

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

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

Твит

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

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

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

Твит

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

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

Твит

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

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

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

Твит

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

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

Что это за новый интерактив? Это не просто анимация при прокрутке, а анимация которая напрямую зависит от скорости и уровня прокрутки. Когда пользователь прокручивает страницу, то иконка плавно рисуется. Если же человек прокручивает страницу вверх, то анимация идет в обратном направлении.

Твит

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

Иконки появляются с эффектом рисования. Как будто кто-то их аккуратно обводит. Смотрится необычно. Всё это происходит как только страница загрузиться.

Твит

Продолжая тему уникальности элементов на сайте, я хочу предложить Вам еще один способ креативного оформления блоков на сайте.

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

Твит

Благодаря развитию CSS у нас есть возможность создания анимации без использования Flash и JS. Это является большим плюсом, потому что такие баннеры не будут заблокированы тем AdBlock. Скорость загрузки таких баннеров значительно меньше, чем того Flash, который очень сильно замедляет загрузку.

Думаете сделать анимацию на CSS сложно? Тогда просто посмотрите пример анимации, которую я сделал для этого урока. Вы сами убедитесь что во всём можно разобраться.