🎁 Забирайте код новогоднего шара для GetCourse

🎁 Забирайте код новогоднего шара для GetCourse

Дарю вам код новогоднего шара, который можно повесить, например, в раздел «Тренинги» на GetCourse.

При наведении шар трясется и идет снег ❄️

Как забрать себе:

1️⃣ Вставьте HTML

<div class="snowglobe-wrapper">

<div class="snowglobe">

<div class="snowglobe-inner">

</div>

</div>

</div>

2️⃣ Добавьте CSS

.snowglobe-wrapper {

width: 260px;

height: 260px;

position: relative;

overflow: visible;

}

/* стеклянный шар со свечением */

.snowglobe {

position: absolute;

left: 50%;

top: 0;

transform: translateX(-50%);

width: 220px;

height: 220px;

border-radius: 50%;

background:

radial-gradient(circle at 30% 20%, rgba(255,255,255,0.7), transparent 55%),

radial-gradient(circle at 50% 100%, rgba(255,255,255,0.9), rgba(200,220,255,0.95));

box-shadow:

0 0 25px rgba(0,0,0,0.35),

0 0 30px rgba(255,255,255,0.6);

overflow: hidden;

cursor: pointer;

position: relative;

z-index: 0;

}

/* подставка под шаром */

.snowglobe::after {

content: "";

position: absolute;

left: 50%;

bottom: -55px;

transform: translateX(-50%);

width: 190px;

height: 65px;

border-radius: 0 0 120px 120px;

background: linear-gradient(90deg, #b68a4a, #f1d09a, #8b5a24);

box-shadow: 0 8px 18px rgba(0,0,0,0.6);

z-index: -1;

}

/* ёлка внутри шара */

.snowglobe-inner {

position: absolute;

inset: 10px 10px 35px 10px;

border-radius: 50%;

overflow: hidden;

background-image: url("https://fs.getcourse.ru/fileservice/file/download/a/734648/sc/350/h/6bc8ff92901e29ba0b8e962b8f4d2dde.png");

background-position: center bottom;

background-size: contain;

background-repeat: no-repeat;

z-index: 1;

}

/* тряска при наведении */

.snowglobe:hover {

animation: globe-shake 0.8s ease-in-out infinite;

}

@keyframes globe-shake {

0%, 100% {ransform: translateX(-50%) rotate(0deg); }

20% { transform: translateX(calc(-50% - 6px)) rotate(-3deg); }

40% {transform: translateX(calc(-50% + 6px)) rotate(3deg); }

60% { transform: translateX(calc(-50% - 4px)) rotate(-2deg);}

80% { transform: translateX(calc(-50% + 4px)) rotate(2deg);}

}

/* снежинка */

.flake {

position: absolute;

top: -10px;

width: 6px;

height: 6px;

border-radius: 50%;

background: white;

opacity: 0.9;

pointer-events: none;

box-shadow: 0 0 6px rgba(255,255,255,0.9);

animation-name: fall;

animation-timing-function: linear;

}

/* падение снежинок */

@keyframes fall {

0% { transform: translateY(0) translateX(0); opacity: 0; }

10% { opacity: 1; }

100% { transform: translateY(220px) translateX(var(--drift)); opacity: 0; }

}

3️⃣ Добавьте JS

const globeInner = document.querySelector('.snowglobe-inner');

const globeOuter = document.querySelector('.snowglobe');

let isSnowing = false;

let snowInterval = null;

function createFlake() {

if (!isSnowing) return;

const flake = document.createElement('div');

flake.classList.add('flake');

const size = Math.random() * 4 + 2;

const left = Math.random() * 100;

const duration = Math.random() * 3 + 3;

const delay = Math.random() * 0.5;

const drift = (Math.random() - 0.5) * 40;

flake.style.width = size + 'px';

flake.style.height = size + 'px';

flake.style.left = left + '%';

flake.style.animationDuration = duration + 's';

flake.style.animationDelay = delay + 's';

flake.style.setProperty('--drift', drift + 'px');

globeInner.appendChild(flake);

setTimeout(() => flake.remove(), (duration + delay) * 1000);

}

globeOuter.addEventListener('mouseenter', () => {

if (isSnowing) return;

isSnowing = true;

snowInterval = setInterval(createFlake, 200);

});

globeOuter.addEventListener('mouseleave', () => {

isSnowing = false;

if (snowInterval) {

clearInterval(snowInterval);

snowInterval = null;

}

});

4️⃣Готово! Шар уже на вашем сайте 🎄

Создавайте новогоднее настроение для своих учеников! 🎅

В комментариях добавлю файлик для импорта блока👇

#полезности #getcourse #новыйгод_GC #кастомизация_getcourse #kuz_getcourse #kuz_инструкции