Свойство zoom не использую, ибо при его использовании расчет координат отличается от браузера к браузеру, использую transform: scale, если не поддерживается, просто «сворачиваю» по высоте. Ниже код того что на картинке.
Fly to cart
«Полет в корзину», если у нас нужно «отправлять в полет» только картинку, то все очень легко, пример с перемещением всей карточки и текст описания и картинка.
Свойство zoom не использую, ибо при его использовании расчет координат отличается от браузера к браузеру, использую transform: scale, если не поддерживается, просто «сворачиваю» по высоте.
Ниже код того что на картинке.
<style>
.card {
font-size: 60px;
color: #444;
}
.card .panel-body {
font-size: 60px;
}
.card .fa-cart-plus {
font-size: 26px;
}
.cart {
margin: 60px 100px;
}
.cart i {
font-size: 46px;
color: #aeb733;
}
.card-body {
position: relative;
margin-bottom: 6px;
}
.card-body-copy {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1100;
zoom: 1;
}
</style>
<div id="cart" class="cart clearfix">
<button type="button" class="btn btn-default btn-lg pull-right"><i class="fa fa-shopping-cart" aria-hidden="true"></i></button>
</div>
<div class="row">
<div class="col-xs-3">
<div class="card panel panel-default">
<div class="panel-heading clearfix">
<div class="pull-right"><h4>Card 1</h4></div>
</div>
<div class="panel-body">
<div class="card-body">
<img src="/public/img/export_excel2.png">
111<i style="color: #ee0;" class="fa fa-bitcoin" aria-hidden="true"></i>
</div>
<div class="clearfix">
<div class="pull-right"><button class="btn"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></div>
</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="card panel panel-default">
<div class="panel-heading clearfix">
<div class="pull-right"><h4>Card 2</h4></div>
</div>
<div class="panel-body">
<div class="card-body">
<img src="/public/img/export_excel2.png">
222<i style="color: #c0e;" class="fa fa-eur" aria-hidden="true"></i>
</div>
<div class="clearfix">
<div class="pull-right"><button class="btn"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></div>
</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="card panel panel-default">
<div class="panel-heading clearfix">
<div class="pull-right"><h4>Card 3</h4></div>
</div>
<div class="panel-body">
<div class="card-body">
<img src="/public/img/export_excel2.png">
333<i style="color: #0f0;" class="fa fa-dollar" aria-hidden="true"></i>
</div>
<div class="clearfix">
<div class="pull-right"><button class="btn"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function($) {
$('body').on('click', '.btn', function(e) {
var card = $(this).closest('.panel-body').find('.card-body');
if (!card.size())
return;
var cardCopy = $(this).closest('.panel-body').find('.card-body-copy');
if (!cardCopy.size())
$('<div/>').addClass('card-body-copy').html( card.html() ).appendTo(card);
var cart = $('#cart .fa-shopping-cart');
var cardCopy = $(this).closest('.panel-body').find('.card-body-copy');
if (!cardCopy.size() || !cart.size())
return;
var cardCoord = cardCopy.offset();
var cartCoord = cart.offset();
var lenght = Math.sqrt(Math.pow((cardCoord.top-cartCoord.top),2) + Math.pow((cardCoord.left-cartCoord.left),2));
var zoom = 0.5;
var speed = 1/4; // pixel in msec
var maybeTransform = (card.get(0).style['transform'] !== undefined);
var l = (cartCoord.left - cardCoord.left);
var t = (cartCoord.top - cardCoord.top);
$(cardCopy).animate($.extend({
opacity: 0.4,
left: (l > 0 ? '+' : '') + l.toString(),
top: (t > 0 ? '+' : '') + t.toString(),
}, maybeTransform ? {} : {height: 'toggle'}), {
duration: lenght/speed,
step:function(now, fx){
if (fx.prop == 'left') {
$(this).css('transform-origin', '0 0' );
$(this).css('transform', 'scale('+ (zoom+(1-zoom)*(1-now/l)) +')' );
}
},
complete:function(){
$(this).remove();
// cart.toggle( "bounce", { times: 3 }, "slow" );
}
});
});
})(jQuery);
</script>
Свойство zoom не использую, ибо при его использовании расчет координат отличается от браузера к браузеру, использую transform: scale, если не поддерживается, просто «сворачиваю» по высоте. Ниже код того что на картинке.
