Элемент перемещен в другой элемент (библиотеки JS Animation)
Сначала скачайте библиотеки JS Animation из моего репозитория GitHub — https://github.com/litsazib/Fly-to-cart-animation-libs.git.
Включите стиль CSS: fly.min.css и включите файл JS: fly.min.js.
Пример:
<link rel="stylesheet" href="lib/fly.min.css"> <script src="lib/fly.min.js"></script>
Дополнительный
Вы можете добавить специальный класс targetPulse к целевому элементу в своем пользовательском действии файла скрипта.
Простой пример клика:
$('.yourBtnClass').on('click', function() {
rocketcss(this,'.yourTargetClass', 'rocketPulse');
$('.yourTargetClass').addClass('targetPulse');
});
Пример использования (разметка):
<div class="row">
<div class="col-md-4">
<div class="target btn btn-default">
<img src="img/recycle.png" alt="recycle icon">
</div>
</div>
<div class="col-md-3 rocket_base">
<div class="rocket btn_rocketPulse btn btn-default">
<img src="img/orange.png" alt="orange" width="200px">
</div>
<div class="rocket btn_rocketPulseHole btn btn-default">
<img src="img/stobary.png" alt="stobary" width="200px">
</div>
<div class="rocket btn_rocketRotate btn btn-default">
<img src="img/applepng.png" alt="applepng" width="200px">
</div>
<div class="rocket btn_rocketRotateHole btn btn-default">
<img src="img/pineapple.png" alt="pineapple" width="200px">
</div>
</div>
</div>
Доступные классы css для анимации:
.rocketPulse .rocketPulseHole .rocketRotate .rocketRotateHole .rocketRotateGo .rocketGost .rocketFlip .rocketCircle
Пример использования (функция JS):
$(document).ready(function() {
//Default
function normalstate(norm) {
$(norm).css({ opacity: "1" });
}
//rocketPulse Effect Animation
$('.btn_rocketPulse').on('click', function() {
rocketcss(this,'.target', 'rocketPulse');
$('.target').addClass('targetPulse');
setTimeout(function () {
normalstate('.rocket');
$('.target').removeClass('targetPulse');
}, 2300);
});
});
Спасибо.
Возможно, вы дошли до конца этого блога, но впереди еще много всего.
