С приближением зимних праздников, таких как Рождество и Новый год, владельцы сайтов стремятся создать соответствующую атмосферу для своих посетителей. Поэтому они добавляют различные визуальные эффекты на страницы сайта, которые подчёркивают очарование зимнего периода.
Одним из таких эффектов является замерзание картинки. То есть на какой-то конкретной картинке, или на нескольких изображениях, постепенно появляется лёд или иней. Это не только привлекает внимание пользователей, но и погружает их в праздничное настроение, делая сайт более привлекательным и запоминающимся.
Используя 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); // Интервал обновления
}
Угостить автора чашечкой кофе