Разумеется, эту функцию вы можете разместить в том месте вашего сайта, где хотите, чтобы она отображалась. Например, эта функция будет показываться в виде рекламы внизу экрана с правой стороны на 5 секунд, и при нажатии на неё пользователь будет перенаправлен на страницу песни, которую вы хотите рекламировать. Главное — не забыть заменить ссылки в коде на ссылки вашего собственного веб-сайта.
CSS
Код:
<style>
/* Общие стили всплывающего окна */
.ucoz-popup {
position: fixed;
bottom: 20px;
left: 20px;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(8px);
color: white;
border-radius: 20px;
display: flex;
align-items: center;
padding: 12px;
font-family: sans-serif;
max-width: 360px;
z-index: 9999;
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
/* При отображении */
.ucoz-popup.show {
opacity: 1;
transform: translateY(0);
}
/* Изображение (аватар) */
.ucoz-popup img {
width: 65px;
height: 65px;
border-radius: 50%;
border: 3px solid magenta;
object-fit: cover;
margin-right: 12px;
cursor: pointer;
animation: pulse 1.5s infinite;
}
/* Анимация пульсации аватара */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Тексты */
.ucoz-popup-content {
flex: 1;
}
.ucoz-popup-title {
font-weight: bold;
font-size: 17px;
margin-bottom: 5px;
}
.ucoz-popup-text {
font-size: 14px;
opacity: 0.9;
margin-bottom: 8px;
}
/* Контейнер кнопок */
.ucoz-popup-buttons {
display: flex;
gap: 10px;
}
/* Стиль кнопки */
.ucoz-btn {
padding: 6px 12px;
border-radius: 50px;
font-size: 13px;
cursor: pointer;
border: none;
color: white;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 3px 8px rgba(0,0,0,0.4);
transition: transform 0.2s ease, background 0.3s ease;
}
.ucoz-btn:hover {
transform: scale(1.05);
}
.ucoz-btn-like {
background: linear-gradient(135deg, #ff4d4d, #cc0000);
}
.ucoz-btn-download {
background: linear-gradient(135deg, #28a745, #1e7e34);
}
/* Стиль иконки кнопки */
.ucoz-btn i {
font-size: 16px;
}
/* Анимация ритма */
.ucoz-ritm {
display: flex;
align-items: flex-end;
height: 30px;
gap: 3px;
margin-left: 10px;
}
.ucoz-ritm span {
display: block;
width: 4px;
background: #ff0080;
animation: bounce 1s infinite ease-in-out;
}
.ucoz-ritm span:nth-child(2) { animation-delay: 0.2s; }
.ucoz-ritm span:nth-child(3) { animation-delay: 0.4s; }
.ucoz-ritm span:nth-child(4) { animation-delay: 0.6s; }
.ucoz-ritm span:nth-child(5) { animation-delay: 0.8s; }
@keyframes bounce {
0%, 100% { height: 5px; }
50% { height: 25px; }
}
</style>
HTML
jаvascript
Код:
<script>
// Выходит через 3 секунды
setTimeout(function() {
document.getElementById('popupBox').classList.add('show');
}, 3000);
// Постепенно скрывается через 10 секунд
setTimeout(function() {
document.getElementById('popupBox').classList.remove('show');
}, 13000);
</script>
• Prod By M.Rasulov |
