З наближенням зимових свят, таких як Різдво та Новий рік, власники сайтів прагнуть створити відповідну атмосферу для своїх відвідувачів. Тому вони додають різні візуальні ефекти на сторінки сайту, які підкреслюють чарівність зимового періоду.
Одним з таких ефектів є замерзання картинки. Тобто на якійсь конкретній картинці, або на декількох зображеннях, поступово з’являється лід чи іній. Це не лише привертає увагу користувачів, але й занурює їх у святковий настрій, роблячи сайт більш привабливим і незабутнім.
Використовуючи JavaScript, можна створити ефект плавного накладання зображення (наприклад, крижаної текстури) поверх основної картинки. Такий прийом дозволяє веб-розробникам робити не тільки зимові заморозки, а й інші тематичні ефекти: осіннє опадання листя, весняне цвітіння, спалахи феєрверків чи навіть святковий дощ з блискіток.
Головна перевага такого підходу полягає в його універсальності: ви можете накласти будь-яке додаткове зображення поверх основного. Ефект замерзання є лише одним із прикладів, але за допомогою JavaScript можна створити унікальні та динамічні елементи дизайну, що додадуть вашому сайту особливого шарму та виокремлять його серед конкурентів.
Код накладання картинки на картинку
// Знаходимо всі картинки з класом 'entry-image'
const baseImages = document.querySelectorAll('.entry-image img');
// Завантажуємо "іній"
const frostImage = new Image();
frostImage.src = 'frost-layer.png'; // Шлях до картинки "інію"
frostImage.onload = () => {
// Перебираємо всі картинки та накладаємо "іній" на кожну з них
baseImages.forEach((baseImage) => {
// Створюємо canvas для кожної картинки
const frostCanvas = document.createElement('canvas');
const ctx = frostCanvas.getContext('2d');
baseImage.onload = () => {
const rect = baseImage.getBoundingClientRect(); // Отримуємо координати картинки
frostCanvas.width = baseImage.width;
frostCanvas.height = baseImage.height;
// Позиціонуємо canvas за координатами картинки
frostCanvas.style.position = 'absolute';
frostCanvas.style.top = `${rect.top + window.scrollY}px`; // Враховуємо прокрутку сторінки
frostCanvas.style.left = `${rect.left + window.scrollX}px`;
frostCanvas.style.pointerEvents = 'none'; // Пропускаємо кліки щоб можна було клацати мишкою по посиланням
// Додаємо canvas в <body>
document.body.appendChild(frostCanvas);
// Запускаємо анімацію
animateFrost(ctx, frostCanvas);
};
// Завантажуємо картинку
baseImage.onload();
});
};
function animateFrost(ctx, canvas) {
let opacity = 0; // Початкова прозорість
const step = 0.002; // Крок підвищення прозорості
const interval = setInterval(() => {
opacity += step;
if (opacity > 1) {
clearInterval(interval);
opacity = 1;
}
// Очищаємо canvas і малюємо з новою прозорістю
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha = opacity;
ctx.drawImage(frostImage, 0, 0, canvas.width, canvas.height);
}, 50); // Інтервал оновлення
}
Пригостити автора кавою