Здравствуйте, сегодня поговорим о сайтах, на которых вы сможете найти код (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 читайте тут:

• Как подключить скрипт к определенной странице, посту, записи в wordpress
• Подключение javascript в плагине wordpress (вызов php функции)
• Как подключить javascript в wordpress

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

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

#sprite{
	width: 257px;
	height: 186px;
	background: url('https://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; }
}

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

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

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

Далее заходим на сайт и радуемся “Зеленому колобку”:

2. “cssdeck.com”

3. “jsdo.it”