Блог о программировании, сайтах, пассивном доходе, обо всем, что мне интересно!

Виджет для Adobe Muse АНИМАЦИЯ LazyAnimation

Для того, чтобы привлечь внимание посетителя вашего Лэндинг-пэйджа к определенной информации применяют разные способы: цвет, размер шрифта, обводки и так далее, но один из самых действенных способов – это

АНИМАЦИЯ!

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

Данный виджет не зависит от сторонних серверов, все работает с вашего хостинга.

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

Устанавливается и настраивается очень просто, 2 файла 121sLazyAnimation.css и 121sLazyAnimation.js вам нужно прикрепить к своему проекту Файл -> Добавить файлы для передачи и передать данные на хостинг.

После загрузки файлов виджета открывайте файл 121sLazyAnimation.mulib и в нем вы найдете 3 виджета:

  1. Конфиг для анимации и ленивой подгрузки картинок (о ленивой подгрузке чуть позже);
  2. Анимация картинок;
  3. Анимация текста (так же данным виджетом можно анимировать практически любой блок на странице).

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

И первым делом мы анимируем картинку с отложенной загрузкой. Для этого вытаскиваем второй виджет Анимация картинок.

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

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

Далее выбираете из более чем 35 видов анимации нужный вам (поэкспериментируйте).

Галочка Зацикленная анимация позволяет установить повторяющуюся анимацию, например, для вращения.

Следующий пункт – длительность анимации, устанавливайте нужное вам значение от 1 до 10 секунд, так же, как и в задержке перед срабатыванием, от 1 до 10 секунд.

Задержка перед срабатыванием будет давать паузу перед анимацией после появления блока на странице при пролистывании до этого блока.

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

Все, картинку мы настроили, теперь давайте попробуем анимировать какой-нибудь текст.

Для этого вытаскиваем на страницу третий виджет Анимация текста. По настройкам здесь есть некоторые отличия, первая – это нужно задать метку для анимации, это любое слово на английском слитно, которое вы будете использовать для анимации текста, допустим blow, anim, blabla и так далее, давайте понятную вам метку, что делать с ней чуть дальше.

Галочку Счетчик мы рассмотрим позже.

Вид анимации – тоже что и в анимации картинки, более 35 видов, выбирайте нужный вам.

Галочка Зацикленная анимация и время анимации и задержки, тоже самое что и в картинке.

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

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

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

Теперь по поводу галочки Счетчик в виджете Анимация текста.

Выставляем в виджете эту галочку, вписываем метку, допустим count, далее выделяем число,

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

Купить виджет

Стоимость данного пакета виджетов

550р.

Не забудьте указать свой e-mail, на который придет файл с виджетами

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

Последнее изменениеСреда, 06 июня 2018 15:04
Денис

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

Сайт: 121s.ru

Оставить комментарий

Убедитесь, что Вы ввели всю требуемую информацию, в поля, помеченные звёздочкой (*). HTML код не допустим.