|
Сообщение от Aetae
|
|
А анимация смены картинки никогда не существовала, слишком заморочено с технической точки зрения.
|
Что то типа такого можно сделать
<head>
<style>
img {
width: 200px;
opacity: 1;
transition: opacity 0.5s;
}
img.hide {
opacity: 0;
}
</style>
</head>
<body>
<img src="https://img.freepik.com/free-photo/view-of-adorable-kitten-with-simple-background_23-2150758096.jpg?size=626&ext=jpg&ga=GA1.1.2029024492.1713601918&semt=ais"
data-img2="https://img.freepik.com/free-photo/closeup-vertical-shot-of-a-cute-european-shorthair-cat_181624-34587.jpg?size=626&ext=jpg&ga=GA1.1.2029024492.1713601918&semt=ais">
<script>
const el = document.querySelector('img');
const img1 = new Image();
img1.src = el.src;
const img2 = new Image();
img2.src = el.dataset.img2;
el.addEventListener('mouseenter', ({target}) => {
target.classList.add('hide');
target.addEventListener('transitionend', () => {
target.src = img2.src;
target.classList.remove('hide');
}, {once:true})
})
el.addEventListener('mouseleave', ({target}) => {
target.classList.add('hide');
target.addEventListener('transitionend', () => {
target.src = img1.src;
target.classList.remove('hide');
}, {once:true})
})
</script>
</body>