Как проиграть анимацию при удалении файлов в корзине?
Вложений: 2
Необходимо реализовать следующую задачу, при перетягивании картинки в область корзины должна проигрываться анимация...В архиве есть видео того, как все должно выглядеть...Хотя бы подскажите что смотреть, читать, какие темы. Всем спасибо!!!
|
monah_79,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>StarTrackr!</title>
<link rel="stylesheet" href="dragdrop.css" media="screen">
<link rel="stylesheet" href="jquery-ui.css">
<style>
#photo-grid img {
width: 100px;
}
.trash {
position: relative;
}
#trash-image {
display: block;
background-image: url(images/epuff.png);
background-repeat: no-repeat;
background-size: cover;
width: 128px;
height: 120px;
background-position: 0 -768px;
top: -40px;
left: -20px;
}
.trash.drop-hover{
border: 1px solid #006400;
}
</style>
</head>
<body>
<section id="container">
<header id="header">
<h1>**************</h1>
</header>
<div id="content">
<h2>Images</h2>
<div class="trash">
<div id="trash-image" src="images/epuff.png" alt="" />
</div>
<img src="images/trash.png" alt="trash" />
<span id="trash-title">Drag images here to delete</span>
</div>
<div id="photo-grid">
<img src="images/fader_100.jpg" />
<img src="images/beau_100.jpg" />
<img src="images/glenda_100.jpg" />
<img src="images/mofat_100.jpg" />
</div>
</div>
<footer id="footer">
<p>
</p>
</footer>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
$('#photo-grid img').draggable();
$('.trash').droppable({
hoverClass: 'drop-hover',
drop: function(event, ui) {
$(ui.draggable).hide();
let {top: t, left : l} = $('.trash').offset();
let {top, left} = ui.offset;
$('#trash-image').css({top: top - t - 10, left: left - l - 20});
$({
numberValue: 0
})
.animate({
numberValue: 6
}, {
duration: 600,
easing: "linear",
step: function(val) {
val = (-Math.round(val) * 128) + 'px';
$('#trash-image').css({
'background-position-y': val
})
}
})
}
})
})
</script>
</body>
</html>
|
Вложений: 1
Не понимаю как убрать вот это изображение, когда загружается html страница.... И еще вопрос, а как реализовать анимацию, чтобы она проигрывалась именно в том месте, где я отпускаю картинку?
|
monah_79,
вы точно скопировали всю страницу целиком? нет в коде картинки, она заменена на div. в этом div сдвигается фон, последовательно показывается 5 картинок из которых состоит фон. в целом это тоже самое что gif. |
Цитата:
|
Не, не работает там где отпускаю картинку, работает чисто статично на одном месте...
|
monah_79,
видимо у нас разные браузеры ))) код проверен в Google Chrome, Firefox, Microsoft Edge, версии актуальные на данный момент. страницу данную обновите и скопируйте код(кнопка справа от кода), и создайте новый файл, там же где у вас лежит index.html. |
Создал файл html_2 скопировал в него код отсюда, не работает, браузер хром...
|
monah_79,
не судьба. |
и на том спасибо большое за помощь!!!
|
| Часовой пояс GMT +3, время: 21:50. |