IQSites - smart website builder
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, а мы в свою очередь, постараемся по больше радовать интересными скриптами, дополнениями и фишками :)



Subscribe to Blog Updates
Would you like to quickly receive the company news from the corporate blog? Just fill in the form below.
You can unsubscribe at any time.
* To be filled in
I Agree To Terms of Service

More articles

Записываем скринкасты при помощи YouTube
Записываем скринкасты при помощи YouTube
Как узнать потребности посетителей вашего сайта?
Как узнать потребности посетителей вашего сайта?
Otivana.com. Премиум сайт для кальянов экстра класса.
Otivana.com. Премиум сайт для кальянов экстра класса.

Go up
array(5) { ["id"]=> int(0) ["ip"]=> string(13) "34.229.151.87" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "09f6674ff4fc393502828321b23807f6" }