Анимация градиента с помощью granim.js

Здравствуйте, сегодня будем анимировать градиент — отличное решение для фона сайта или отдельных его блоков, также есть возможность добавить картинку к анимации — выглядит потрясающе!

Скачать исходники для статьи можно ниже

анимация градиента

Демонстрацию работы данного скрипта можно посмотреть здесь (5 демо-примеров):

«sarcadass.github.io/granim.js/examples.html»

анимация градиента на wordpress

Выбираем нужный анимационный эффект копируйте его 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(http://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>

На этом все! Красивых вам сайтов!

PS: Скачать скрипт granim.js можно здесь.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *