Федулина Елена Геннадьевна
+7 (921) 755 62 74
Звоните прямо сейчас
Site registration
Register your website right now.
Register website
Подписка на обновления блога
Хотите оперативно получать новости и полезные материалы из блога? Просто заполните форму ниже.
Вы сможете отписаться в любой момент.
* To be filled in
I Agree To Terms of Service
Social networks
Оживляем свой сайт эффектной анимацией

Оживляем свой сайт эффектной анимацией

Дополнительная эффектная анимация на сайте? В конструкторе IQSites это можно сделать с невероятной легкостью!

January 6, 2017 at 2:00 pm

В одной из предыдущих статей мы писали про возможности виджета HTML при работе с текстом. Самое время посмотреть на что ещё способен данный виджет, а способен он на многое! По сути, мы можем находить в сети интересные скрипты и вставлять их к себе на сайт, и поверьте, в этом нет ничего сложного! Давайте рассмотрим несколько красивых скриптов:

1) Эффект падающего снега

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

Итак, переходим в конструктор IQSites, выбираем виджет HTML текст и копируем в этот виджет весь код из ссылки - http://pader.ru/hqfl1i

Для удобства копирования, после перехода по ссылке, просто наведите курсор на любое место в коде и зажмите сочетание клавиш ctrl+a, это позволит автоматически скопировать весь код.

Оживляем свой сайт эффектной анимацией

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

Оживляем свой сайт эффектной анимацией

Чтобы было более наглядно, перейдите по ссылке и посмотрите как это выглядит:

СМОТРИМ ПРИМЕР

Кстати, количество падающих снежинок можно редактировать. Для этого меняем в коде цифры 165 в строчках:
sflakesMax = 165;
sflakesMaxActive = 165;

Чем больше цифра, тем больше снега :)

2) Графическая иллюзия

Иногда хочется добавить на фон секции чего нибудь эдакого, для таких случаев мы припасли скрипт графической иллюзии, который вы также можете скопировать к себе в виджет HTML текста отсюда - http://pader.ru/bwb53r

Оживляем свой сайт эффектной анимацией

Эта штуковина весьма примечательно двигается, опять же, эффект лучше смотреть по ссылке:

СМОТРИМ ПРИМЕР

В данном случае мы тоже можем немного редактировать эффект, а именно менять количество графических элементов, это делается в строчке particlesNumber: 90, найдите её и меняйте цифру в зависимости от нужного количества.

3) Печатающийся текст

Можно оживить не только фон секции, но и сам текст, например, в каком либо удачном месте вставить скрипт печатающегося текста. Как всегда копируем код по ссылке - http://pader.ru/li0vyx и вставляем к себе в виджет HTML текст.

Оживляем свой сайт эффектной анимацией

Смотрим, как это выглядит.

СМОТРИМ ПРИМЕР

Что мы можем отредактировать? Мы можем менять сам текст, скорость печати текста, шрифт, размер шрифта, цвет шрифта.

Где менять текст, вы уже наверняка нашли, просто замените в коде словосочетание "ЖИВОЙ ТЕКСТ!" на то, что вам нужно.

За скорость печати отвечает пункт - setTimeout("changetext()", 180);
В данном случае, чем меньше цифра, тем быстрее скорость.

Настройки шрифта меняются в самом низу кода:

Оживляем свой сайт эффектной анимацией

За цвет отвечает font color="#ffffff", где #ffffff - код цвета.
За сам шрифт отвечает пункт face="Geometria", где Geometria - название шрифта.
За размер шрифта отвечает size="18", где 18 - размер шрифта.

Читайте блог чаще и расширяйте возможности визуального редактора IQSites, а мы в свою очередь, постараемся по больше радовать интересными скриптами, дополнениями и фишками :)



Заявка на IQSites
* To be filled in
I Agree To Terms of Service

More articles

Эффективная организация рабочего дня.
Эффективная организация рабочего дня.
What Does a Convenient Website Interface Look Like? 5 Tips from IQSites.
What Does a Convenient Website Interface Look Like? 5 Tips from IQSites.
Где взять качественные графические паттерны?
Где взять качественные графические паттерны?

Go up
array(5) { ["id"]=> int(0) ["ip"]=> string(14) "44.200.145.223" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "160d631fcadc27ecd7e066fa9469ca11" }