Здравствуйте, сегодня будем анимировать градиент – отличное решение для фона сайта или отдельных его блоков, также есть возможность добавить картинку к анимации – выглядит потрясающе!
Скачать исходники для статьи можно ниже
Демонстрацию работы данного скрипта можно посмотреть здесь (5 демо-примеров):
“sarcadass.github.io/granim.js/examples.html”
Выбираем нужный анимационный эффект копируйте его HTML, CSS и JavaScript код и вставляйте на сайт.
Также данный скрипт представлен на codepen (можете подредактировать код под свой сайт):
“codepen.io/JonathanSchndr/pen/KgVmLo”
Давайте же “прикрутим” один из демо-примеров (первый пример) к сайту на wordpress!
1. Добавляем скрипт granim.min.js к сайту на wordpress:
Добавить скрипт можно разными способами, но более правильный через файл functions.php (способ 1).
Способ 1: Заходим в файл functions.php и вставляем в него следующий код:
function wpb_adding_scripts() {
wp_enqueue_script('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.2/jquery.min.js');
wp_register_script('my_amazing_script', 'https://cdn.rawgit.com/sarcadass/granim.js/master/dist/granim.min.js', array ('jquery', 'jquery-ui'),'1.1', false );
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
Чтобы открыть файл functions.php в wordpress – нужно зайти в пункт “Внешний вид”, подпункт “Редактор” и справа в списке шаблонов выбрать – файл functions.php:
Способ 2: Просто вставить код подключения скрипта внутрь тега “head” – для этого нужно зайти в файл – header.php найти тег head и вставить слующий код:
<script src="https://cdn.rawgit.com/sarcadass/granim.js/master/dist/granim.min.js"></script>
Вот как он выглядит между тегами head:
Чтобы открыть файл header.php в wordpress – нужно зайти в пункт “Внешний вид”, подпункт “Редактор” и справа в списке шаблонов выбрать – файл header.php:
2. Вставляем CSS стили:
Заходим в файл – style.css – и вствялем в него следующий код:
.sandbox {
position: relative;
height: 300px;
border: solid 2px #eee;
}
.sandbox canvas-basic {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Чтобы открыть файл style.css в wordpress – нужно зайти в пункт “Внешний вид”, подпункт “Редактор” и по умолчанию у вас откроется файл style.css.
3. Вставляем HTML код + код javascript там, где хотим видеть анимированный градиент:
Код следующий:
<div class="sandbox">
<canvas id="canvas-basic" width="1000" height="300"></canvas>
</div>
<script>
var granimInstance = new Granim({
element: '#canvas-basic',
name: 'basic-gradient',
direction: 'left-right',
opacity: [1, 1],
isPausedWhenNotInView: true,
states : {
"default-state": {
gradients: [
['#AA076B', '#61045F'],
['#02AAB0', '#00CDAC'],
['#DA22FF', '#9733EE']
]
}
}
});
</script>
3.1. Для примера, можно вставить данный код во вкладке “Текст” при создании/редактировании записей и страниц:
Получим следующее (длину нужно уменьшить:) :
3.2. Или например, можно вставить вышеуказанный код в виджет “HTML”:
3.3. Также можно вставить вышеуказанный код в файл header.php после тега body:
Получится вот так:
Пример 2: Давайте “прикрутим” ещё один пример “Градиент с картинкой”:
1. Добавляем скрипт granim.min.js к сайту на wordpress:
function wpb_adding_scripts() {
wp_enqueue_script('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.2/jquery.min.js');
wp_register_script('my_amazing_script', 'https://cdn.rawgit.com/sarcadass/granim.js/master/dist/granim.min.js', array ('jquery', 'jquery-ui'),'1.1', false );
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
2. Вставляем CSS стили:
.sandbox {
position: relative;
height: 300px;
border: solid 2px #eee;
}
.sandbox canvas {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#canvas-image {
background-image: url(https://mnogoblog.ru/wp-content/uploads/2017/11/bg-forest.jpg);
background-position-x: 50%;
}
Фоновую картинку можно скачать здесь – загрузить её на свой сайт и прописать ссылку для неё в коде.
3. Вставляем HTML код + код javascript там, где хотим видеть анимированный градиент:
<div class="sandbox">
<canvas id="canvas-image" width="974" height="300"></canvas>
</div>
<script>
var granimInstance = new Granim({
element: '#canvas-image',
direction: 'top-bottom',
opacity: [1, 0.5, 0],
isPausedWhenNotInView: true,
states : {
"default-state": {
gradients: [
['#485563', '#29323c', '#29323c'],
['#00c6ff', '#0072ff', '#0072ff']
],
transitionSpeed: 10000
}
}
});
</script>
На этом все! Красивых вам сайтов!