Вход

Просмотр полной версии : Добавить анимацию

StartGames
23.04.2024, 00:16
Здравствуйте.

Есть такой костыльный скрипт

<img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive ani" id="nsv_mv_id{{ product.product_id }}" {% if product.thumb2 %}onmouseover="document.getElementById('nsv_mv_id{{ product.product_id }}').src='{{ product.thumb2 }}'" onmouseout="document.getElementById('nsv_mv_id{{ product.product_id }}').src='{{ product.thumb }}'"{% endif %}>

Нужно туда приделать анимацию. Но как это сделать...
voraa
23.04.2024, 21:43
Нужно туда приделать анимацию.
А что должно прыгать и мигать?
StartGames
24.04.2024, 05:33
А что должно прыгать и мигать?

абсолютно любая анимация, что то по типу fade)))
Потому что вот так не очень смотриться... https://nimb.ws/xImHATn

я пробовал добавить так: .fade(250) но не сработало...
StartGames
25.04.2024, 01:30
И почему то работает только через document.getElementById
StartGames
27.04.2024, 23:19
жаль конечно что в js не продумали вызов через элемент. Придется работать через скрипт...
Aetae
28.04.2024, 01:25
StartGames,
Это:
onmouseover="document.getElementById('nsv_mv_id{{ product.product_id }}').src='{{ product.thumb2 }}'"
ты можешь заменить на:
onmouseover="this.src='{{ product.thumb2 }}'"
или вообще на:
onmouseover="src='{{ product.thumb2 }}'"

А анимация смены картинки никогда не существовала, слишком заморочено с технической точки зрения.

Можно по-быстрому изобразить что-то такое из двух картинок если у них одинаковые размеры, но придётся поверстать если случай не самый простой: <body>
--
<img
width="100"
height="100"
class="img-responsive ani img-bottom"
src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif"
/><img
width="100"
height="100"
class="img-responsive ani img-top"
src="https://javascript.ru/forum/image.php?u=4993&dateline=1299014303"
/>
--
<style>
.img-bottom {
position:absolute;
z-index: -1;
}
.img-top {
opacity: 0;
transition: 1s opacity;
}
.img-top:hover {
opacity: 1;
}
</style>
</body>
voraa
28.04.2024, 08:14
А анимация смены картинки никогда не существовала, слишком заморочено с технической точки зрения.
Что то типа такого можно сделать
<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>
рони
28.04.2024, 10:56
voraa,
после run добавляй пожалуйста высоту окна просмотра run height=500
voraa
28.04.2024, 13:17
voraa,
после run добавляй пожалуйста высоту окна просмотра run height=500
Спасибо. Добавил.
Aetae
28.04.2024, 23:18
voraa, можно, но надо ещё не забыть добавить ожидание onload для второй картинки, потому что может возникнуть некрасивый эффект если загрузка тормознёт.
Также, если картинки большие, то надо будет хакать с незаметной предварительной вставкой на страницу, потому что скорость первой отрисовки уже загруженной картинки хоть и почти моментальная, но всё же именно почти и может вызвать очень краткое мигание.
Кстати в качестве хака от такого мигания помогает createImageBitmap после onload перед вставкой, но это чисто эмпирическое знание, не подкреплённое доками.:)
voraa
29.04.2024, 05:30
можно, но надо ещё не забыть добавить ожидание onload для второй картинки,
Я пытался там делать через .decode().then(....).
Но чего то не сложилось (какие то странные эффекты получались).
Разбираться с ними лень было, поэтому решил сделать через создание Image(). В расчете, что они успеют загрузиться до того, как начнут мышью водить. Мне кажется, что это примерно то же, что и createImageBitmap.