Анимированный фон сайта с эффектом Параллакс - Бесплатный онлайн конвертер - конвертируйте видео, фото, аудио, Ebook, текстовые документы, архивы.

Подробнее...
Подробнее...
Подробнее...
Подробнее...
Перейти к контенту

Главное меню:

Анимированный фон сайта с эффектом Параллакс

Новинки > Дизаин

Бесплатный Параллакс wysiwyg онлайн конструктор - это необычное веб-приложение, которое максимально просто в использовании и позволяет применять высокие уровня модульности элементов заднего фона страниц и Div элементов.

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

Вы можете сразу преступить к созданию Параллакс эффекта онлайн

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


В первую очередь

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

Ответив на эти вопросы, Вы будете готовы начать строить свой первый параллакса анимированный фон. Чтобы помочь Вам понять, как это делается, мы с Вами шаг за шагом создадим Ваш первый Параллакс эффект для заднего анимированного фона. В последствии Вы сможете с лёгкостью повторить последовательность, а так же увидите удивительные и новые варианты применения нашего бесплатного wysiwyg конструктора.

В этом примере мы будем использовать 5 слоев/ уровней с этими изображениями из нашей библиотеки:

Уровень 1 Уровень 2 Уровень 3 Уровень 4 Уровень 5


Все слои, кроме 4 уровня будут повторяться на оси Х, а слой 4 будет не повторяющееся изображение.

Все слои будут двигаться по оси Х, соответственно реагировать на прокрутку скролла (колёсика) мыши и перемещения мыши(курсора), но в разных направлениях.

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

Шаг 1 - Стартовое окно

Скриншот 1

Скриншот 1

Первое, что Вы видите, когда открываете Бесплатный Параллакс wysiwyg онлайн конструктор
это только начало экрана (скриншот 1) .
В этом окне Вы должны выбрать какой параллакс эффект Вам интересен. Для этого краткое руководство мы создадим «Анимированный задний фон сайта».
Нажмите на анимированную картинку под названием что бы выбрать анимированный вариант фона.

Шаг 2 - Цвет фона

Скриншот 2 Скриншот 3

Фоновый слой - это базовый слой, и он всегда представлен на панели «слой»(скриншот 2).
Этот слой имеет только одно свойство: цвет.

Чтобы установить цвет, нажмите на желаемый цвет плитки в разделе "Цвет фона"(скриншот 3) .

Если Вы хотите выбрать другой цвет, введите HEX код цвета (например # FFFFFF) в поле ввода «Иной код цвета» (Скриншот 2) .

Шаг 3 - Создание слоев (1, 2)


Нажмите на "Создать новый слой" значок в верхней части панели «слои» отмеченный красным (скриншот 3), эта кнопка открывает диалоговое окно "Выбрать изображение"(скриншот 4).

Скриншот 4

Скриншот 4

Скриншот 5

Вы можете ввести адрес изображения в поле ввода "URL изображения", но в этом примере мы будем использовать изображения из встроенной галереи изображений (скриншот 5).

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

Выберите изображение, отмеченные чёрным номером 1 на скриншоте 5, и нажмите кнопку ОК.

Скриншот 6

В панели "Свойства картинки", применяются следующие параметры (как показано на скриншоте 6):
-Установить слой, как «Узор»
-Выберите «Повторение по оси Х».
-Поставьте галочку «Привязать к нижнему полю».

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

В этот момент Вы уже можете видеть такие же результаты на своём мониторе (скриншот 7):

Скриншот 7

Шаг 4 - Создание слоев (3, 4, 5)


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

Скриншот 8

Слой 3 - Выберите изображение отмеченное красным номером 3 на скриншоте 5, и примените следующие настройки (как показано на скриншоте 8):
- Установите слой, как «Узор»
- Выберите «Повторение по оси Х»
- Укажите «Смещение» в X поле на «-50» , а затем нажмите на кнопку «Применить».

Скриншот 9

Слой 4 - Выберите изображение отмеченное красным номером 4 в скриншоте 5, и примените следующие настройки (как показано на скриншоте 9):
- Установите слой как «Изображение»
- Установите "Смещение" X поле на 150, а в Y поле на -100, а затем нажмите на кнопку «Применить».

Скриншот 10

Слой 5 - Выберите изображение отмеченное красным номером 5 на скриншоте 5, и примените следующие настройки (как показано на скриншоте 10):
- Установить слой, как «Узор»
- Выберите «Повторение по оси Х»
- Установите «Смещение» Х поля на 50, а затем нажмите на кнопку «Применить».

Теперь у вас есть полный образ, он должен выглядит как в скриншоте 11.

Скриншот 11

Шаг 5 - Программирование поведения слоя на действия мыши


. Чтобы слои реагировали на движение мышки, Вам нужно задать факторы при которых они активируются и то каким образом слои реагируют. Основные элементы - это «Направление, «Оси движения» и «Скорость».
Давайте начнем с Уровня 1:

Нажатием на «Уровнь 1» в панели «Слои» (скриншот 12).

Скриншот 12

В панелях 'Поведение слоя», ставим флажок наэлемент «Движение мыши» (скриншот 13).

Скриншот 13

Скриншот 14

Примените к слою следующие параметры (как показано на скриншоте 14):
- Установите в разделе «Направление» флажок на «Против курсива».
- Установите в разделе «Движение только по:» флажок на «Оси X».
- Напишите в разделе «Скорость» цифру 2, затем нажмите кнопку «Применить».


Повторите этот шаг для другого слоя, каждый с различными настройками:

Уровень 2:

- Установите в разделе «Направление» флажок на «Против курсива».

- Установите в разделе «Движение только по:» флажок на «Оси X».

- Напишите в разделе «Скорость» цифру 3, затем нажмите кнопку «Применить».

Уровень 3:

- Установите в разделе «Направление» флажок на «За курсивом».

- Установите в разделе «Движение только по:» флажок на «Оси X».

- Напишите в разделе «Скорость» цифру 2, затем нажмите кнопку «Применить».

Уровень 4:

- Установите в разделе «Направление» флажок на «Против курсива».

- Установите в разделе «Движение только по:» флажок на «Оси X».

- Напишите в разделе «Скорость» цифру 1, затем нажмите кнопку «Применить».

Уровень 5:

- Установите в разделе «Направление» флажок на «За курсивом».

- Установите в разделе «Движение только по:» флажок на «Оси X».

- Напишите в разделе «Скорость» цифру 3, затем нажмите кнопку «Применить».

Шаг 6 - Программирование поведения слоя на действия прокрутки скролла мыши


Чтобы слоя реагировали на прокрутку скроллинга (колёсика) мыши, Вам нужно задать факторы при которых они активируются и то каким образом слои реагируют. Основные элементы - это «Направление», «Ориентация» и «Скорость».

Давайте начнем с уровня 1:

Выберем «Уровень 1», щелкнув по нему в панели «слои» (скриншот 12).

В панелях «Поведение слоя», включении флажок на «Прокрутка скролла» (скриншот 15).

Скриншот 15 Скриншот 16

Примените к слою следующие параметры (как показано на скриншоте 16):
- Установите в разделе «Направление» флажок на «За направлением».
- Установите в поле «Ориентация» флажок на «Горизонтальная».
- Напишите в разделе «Скорость» цифру 10, затем нажмите кнопку «Применить».


Повторите этот шаг для другого слоя, каждый с различными настройками:

Уровень 2:

- Установите в разделе «Направление» флажок на «За направлением».

- Установите в поле «Ориентация» флажок на «Горизонтальная».

- Напишите в разделе «Скорость» цифру 25, затем нажмите кнопку «Применить».

Уровень 3:

- Установите в разделе «Направление» флажок на «Против направления».

- Установите в поле «Ориентация» флажок на «Горизонтальная».

- Напишите в разделе «Скорость» цифру 10, затем нажмите кнопку «Применить».

Уровень 4:

- Установите в разделе «Направление» флажок на «Против направления».

- Установите в поле «Ориентация» флажок на «Горизонтальная».

- Напишите в разделе «Скорость» цифру 5, затем нажмите кнопку «Применить».

Уровень 5:

- Установите в разделе «Направление» флажок на «Против курсива».

- Установите в поле «Ориентация» флажок на «Горизонтальная».

- Напишите в разделе «Скорость» цифру 25, затем нажмите кнопку «Применить».

Шаг 7 - Получение готового продукта

Скриншот 17

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

Нажмите на кнопку "Получить код" на верхней части экрана (скриншот 17)

Скриншот 18

Скопируйте код, который появится в всплывающем окне (скриншот 18).

Вставьте его между "<head> </ HEAD>" тегами в HTML-странице на которой Вы бы хотели видеть анимированный фон.

Наслаждайтесь! Удивляйте и радуйте посетителей вашего интернет ресурса.

P.S. Для Div элементов последовательность действий такая же, но там вам нужно указать размер и уникальное название Div контейнера - «Id». Это может быть как верхний (header) так и нижний (footer) сайд бар, так же любые другие элементы имеющие границы и позицию.

Стоит отметить, что при копировании кода Вам автоматически будет прибавляться текстовый элемент "See more at: http://online-convert.ru/Parallax_wysiwyg_for_free.htm". При Вашем желании, Вы можете просто удалить данную часть кода - так как она является информационной, а не рабочей частью.

Как видите - ограничить Вас Может только Ваша фантазия.

Начать создание

 

Рейтинг@Mail.ru

Подробнее...
Подробнее...
Подробнее...
Подробнее...
Назад к содержимому | Назад к главному меню