<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Анимированный градиент Granim.js

Анимированный градиент Granim.js

На этом уроке мы научимся применять анимированные градиенты, используя JavaScript библиотеку – Granim.js. Вы увидите, как просто работать с этой замечательной библиотекой, тем более, когда есть все примеры вариантов анимации на сайте. Вам останется, только копировать код, вставлять в свой проект , меняя или добавляя некоторые параметры.

Официальный сайт: https://sarcadass.github.io/granim.js/examples.html

Базовая анимация градиентов

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

See the Pen Basic gradients animation with granim.js by porsake (@porsake) on CodePen.

Идентификатор у элемента (element) - #canvas-basic, должен быть один и тот же в HTML/CSS/JS коде.

Градиент может иметь четыре направления

  • left-right: слева направо
  • top-bottom: сверху вниз
  • diagonal: по диагонали
  • radial: из центра к краям

Замените в коде дефолтное значение на нужное вам.

direction: 'left-right'

Можно поменять длительность анимации градиента.

transitionSpeed: 5000

Заменить код цвета градиента.

gradients: [ ['#AA076B', '#61045F']]

Градиенты с картинкой и режимом наложения.

Это вариант, когда градиенты с двумя цветами накладываются на фоновое изображение. В примере по умолчанию, стоит режим – multiply (умножение). Можно поиграться с разными режимами смешивания, подобрав более эффектный.

See the Pen Gradients with an image with granim.js by porsake (@porsake) on CodePen.

Дополнительные параметры для options.image.

По умолчанию, изображение расположено в центре, по осям X и Y, но эти значения можно заменить на left, right, top, bottom.

position: ['center', 'center']

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

loop: true

Градиенты с маской изображения

Анимация применяется вовсе, не к текстовому логотипу, который прописан в HTML коде, а к графическому логотипу logo-mask.png. Вам надо, например в программе Photoshop сделать "дырку от бублика", то есть вместо букв создать прозрачную маску и сохранить в формате PNG с прозрачностью. Именно эта прозрачность, заполняющая контуры букв логотипа и заполняется анимированным градиентом.

Анимированный градиент Granim.js.

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

See the Pen Gradients with an image mask by porsake (@porsake) on CodePen.


Интерактивные градиенты

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

See the Pen Interactive Gradients by porsake (@porsake) on CodePen.

Требуется подключить библиотеку jQuery.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

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

loop: false

Подключить библиотеку Granim.js можно через внешнюю CDN ссылку.

<script src='https://cdnjs.cloudflare.com/ajax/libs/granim/1.1.1/granim.min.js'></script>

Или скачать файл granim.min.js, тогда путь до файла укажите свой.

<script src='js/granim.min.js'></script>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.