красивые эффекты на сайт

Библиотеки кода для украшения ваших сайтов

Здравствуйте, сегодня поговорим о сайтах, на которых вы сможете найти код (html+css+js) для создания на ваших сайтах различных «няшек» (красивых вещей): анимашек, кнопочек, питомцев, красивых форм и т.д. — все что можно создать с помощью HTML, CSS, JS кода.


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

1. «Codepen.io»

Покажу на примере данной библиотеки кода — как вставить на wordpress сайте какую-нибудь красивую «няшку» (красивый эффект на сайт):

На каждом из таких сервисов есть строка поиска — введем в нее, например — animation

эффекты для сайта

Далее выбираем понравившийся вам эффект сайта, например вот этот — зеленый «колобок», постоянно махающий своей ручкой — находится по следующему url — «codepen.io/geertjanhendriks/pen/xBkFI»:

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

Интерфейс сайта Codepen сверху разделен на 3 окошка: HTML, CSS, JS, а внизу в окошке вы можете наблюдать результат работы кода.

Для сайтов на wordpress все, что записано в окошке CSS сайта Codepen нужно добавить в файл стилей сайта — style.css.
Содержимое окошка JS — записываем либо в файл functions.php, либо создаем плагин — более подробно о том как подключить javascript в wordpress читайте тут:

А содержимое HTML окошка записываем в код шаблонов сайта, также можно записать в текстовой виджет (Админка — в левом меню пункт «Внешний вид» — подпункт «Виджеты» — виджет «Текст») — если вы хотите видеть «няшку» в сайдбаре (боковой колонке) сайта.

Для примера — давайте вставим «Зеленого колобка» в сайдбаре сайта.
1.1. Копируем содержимое окошка CSS в файл стилей style.css (пункт админки «Внешний вид» — подпункт «Редактор» — справа в списке шаблонов файл style.css), вот этот код:

#sprite{
	width: 257px;
	height: 186px;
	background: url('http://www.studiogj.nl/codepen/sprite/sprite.jpg') left center;
	margin: 0 auto;
	margin-top: 50px;
	animation: sprite 1s steps(8) infinite;
	-webkit-animation: sprite 1s steps(8) infinite;
}
@keyframes sprite {
	100% { background-position: -2056px; }
}
@-webkit-keyframes sprite {
	100% {background-position: -2056px; }
}

как вставить эффект на сайт с codepen

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

А мы продолжим.
1.2. Далее открываем текстовой виджет (Админка — в левом меню пункт «Внешний вид» — подпункт «Виджеты» — виджет «Текст») и вставляем в него содержимое окошка HTML:

<div id="sprite"></div>

красивый эффекты для вашего сайта

Далее заходим на сайт и радуемся «Зеленому колобку»:
онлайн сайты с эффектами на сайт

2. «cssdeck.com»

как вставить эффект на сайт wordpress

3. «jsdo.it»

красивые эффекты для сайтов на wordpress

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


knopkisoc

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

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