Подборка украшений для сайта ко Дню святого Валентина
Уже не за горами День святого Валентина. Специально для этого мы сделали подборку красивых украшений, посвященных этому празднику, которые вы можете добавить на свой сайт.
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 я указал все возможные настройки, где можно изменить цвет, размер, саму надпись и прочие параметры.
Внимание! Нет поддержки русского алфавита.
