Артём Мáлков

Подборка украшений для сайта ко Дню святого Валентина

11 фев1 комм

Уже не за горами День святого Валентина. Специально для этого мы сделали подборку красивых украшений, посвященных этому празднику, которые вы можете добавить на свой сайт.

Heart – скрипт падающих сердечек

Этот скрипт добавит на ваш сайт сердечек, которые будут медленно падать вниз.

Для его установки вам потребуется:

1. Скачать в конце статьи архив heart.zip и распаковать его на рабочий стол.

2. Закачать файл heart.js на ваш сайт по FTP или другим удобным для вас способом.

3. Подключить скрипт перед закрывающим тегом </body>:

<script src="/путь к файлу/heart.js"></script>

Установка закончена. А это пример того, как все должно выглядеть:

Подборка украшений для сайта ко Дню святого Валентина

В самом файле heart.js вы можете изменить настройки (размер, скорость и другие параметры). Все они подписаны, поэтому настроить их на свой вкус у вас не составит труда.

Анимированные сердечки-фон на CSS3 + JavaScript

Это украшение будет отлично смотреться в качестве фона вашего сайта. Его основная идея - это плавное поднятие сердечек вверх. Выглядеть это будет так:

Подборка украшений для сайта ко Дню святого Валентина

Установка

1. В стили CSS вашего сайта, в самом низу, вставьте:

.bg_heart {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.heart {
	position: absolute;
	top: -50%;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-m-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.heart:before {
	position: absolute;
	top: -50%;
	left: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: 100%;
}

.heart:after {
	position: absolute;
	top: 0;
	right: -50%;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: 100%;
}

@-webkit-keyframes love {
	0%{
		top:110%;
	}
}

@-moz-keyframes love {
	0%{
		top:110%;
	}
}

@-ms-keyframes love {
	0%{
		top:110%;
	}
}

@keyframes love {
	0%{
		top:110%;
	}
}

2. Контент вашего сайта оберните в теги:

<div class="bg_heart"></div>

Для примера – эти теги пропишите внутри тега <body></body>, чтобы у вас получилось следующее:

<body>

	<div class="bg_heart">

		Здесь ваш текст

	</div>

</body>

3. Скачайте в конце статьи архив background_heart.zip и распакуйте его содержимое на рабочий стол. После чего загрузите файл background_heart.js на ваш сайт по FTP или другим удобным для вас способом, и подключите скрипт перед закрывающим тегом </body>:

<script src="/путь к файлу/background_heart.js"></script>

Установка закончена.

Курсор с летящими сердечками

Этот скрипт, добавляет сердечки к курсору пользователя, которые начинают вылетать из него когда было совершено движение мышкой. Довольно красивый эффект. Исчезновение сердечек сделано по типу лопанья пузырей. Выглядят это так:

Подборка украшений для сайта ко Дню святого Валентина

Для установки на сайт:

1. Скачайте архив love_cursor.zip в конце статьи и распакуйте его на на рабочем столе.

2. После чего, закачайте файл love_cursor.js к себе на сайт удобным для вас способом, и подключите скрипт перед закрывающим тегом </body>:

<script src="/путь к файлу/love_cursor.js"></script>

Установка закончена. По желанию, в файле love_cursor.js вы можете изменить настройки скрипта (максимальные и минимальные размеры, цвета и прочие параметры).

Кнопка-ссылка в виде сердца на CSS3

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

Подборка украшений для сайта ко Дню святого Валентина

Установка кнопки на сайте:

1. В конец ваших стилей CSS вставьте:

[id='toggle-heart'] {
	position: absolute;
	left: -100vw;}
	[id='toggle-heart']:checked + label {
	color: #e2264d;
	will-change: font-size;
	animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}

[id='toggle-heart']:checked + label:before, [id='toggle-heart']:checked + label:after {
	animation: inherit;
	animation-timing-function: ease-out;
}

[id='toggle-heart']:checked + label:before {
	will-change: transform, border-width, border-color;
	animation-name: bubble;
}

[id='toggle-heart']:checked + label:after {
	will-change: opacity, box-shadow;
	animation-name: particles;
}

[for='toggle-heart'] {
	align-self: center;
	position: relative;
	color: #aab8c2;
	font-size: 2em;
	cursor: pointer;
}

[for='toggle-heart']:before, [for='toggle-heart']:after {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	content: '';
}

[for='toggle-heart']:before {
	box-sizing: border-box;
	margin: -2.25rem;
	border: solid 2.25rem #e2264d;
	width: 4.5rem;
	height: 4.5rem;
	transform: scale(0);
}

[for='toggle-heart']:after {
	margin: -0.1875rem;
	width: 0.375rem;
	height: 0.375rem;
	box-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080;
}

@keyframes heart {
	0%, 17.5% {
		font-size: 0;
	}
}

@keyframes bubble {
	15% {
		transform: scale(1);
		border-color: #cc8ef5;
		border-width: 2.25rem;
	}
	
	30%, 100% {
		transform: scale(1);
		border-color: #cc8ef5;
		border-width: 0;
	}
}

@keyframes particles {
	0%, 20% {
		opacity: 0;
	}

	25% {
		opacity: 1;
		box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
	}
}

2. Разместите кнопку в нужном месте вашего сайта:

<input id="toggle-heart" type="checkbox">

<label for="toggle-heart">❤</label>

Установка закончена.

Открытка-поздравление с Днем святого Валентина

Интересное признание в любви своей половинке, если вы занимаетесь созданием сайтов.

Выглядит это примерно так:

Подборка украшений для сайта ко Дню святого Валентина

Все сердечки находятся в движении. Словами не передать всю красоту, которую увидит ваша любимая :)

Для установки вам потребуется:

1. В нужное место на вашем сайте вставить тег:

<canvas id="i_love_you"></canvas>

2. В конец ваших стилей CSS вставить:

#i_love_you {
	width: 660px;
	margin: 0 auto;
	display: block;
}

3. Скачать в конце статьи архив love_card.zip и распаковать его на рабочем столе. После чего загрузить файл love_card.js на сайт удобным для вас способом и перед закрывающим тегом </body> подключить скрипт:

<script src="/путь к файлу/love_card.js"></script>

В файле love_card.js я указал все возможные настройки, где можно изменить цвет, размер, саму надпись и прочие параметры.

Внимание! Нет поддержки русского алфавита.

Файл
Размер
Ссылка
heart.zip
1,48 Kb
Скачать с сервера
background_heart.zip
688 b
Скачать с сервера
love_cursor.zip
1,88 Kb
Скачать с сервера
love_card.zip
1,05 Kb
Скачать с сервера
Рекомендуем к просмотру
Четыре красивых эффекта падающего снега на jQuery/JavaScript/CSS3
Модули и скрипты
Кроссбраузерный эффект дождя на JavaScript + CSS
Модули и скрипты
Время прочтения статьи на jQuery
Модули и скрипты
1
комментарий
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 4
    766
      •  Гости
    13 фев в 00:42

    Огромное Вам спасибо за украшения! Мне очень понравился курсор с сердечками, установила его себе на сайт, пусть и недолго, всего на пару дней, но сердечная атмосфера обеспечена!

    Спасибо!!! И с наступающим праздником!

Подняться наверх
«Pandoge» - помощник вебмастера