ссылка
http://test.status-card.ru/rolly
4 votes
Анимация добавления товара в корзину
Started by
Cheren-dow
, Oct 07 2013 09:41
рецепт корзина
78 replies to this topic
#32
Posted 11 October 2013 - 14:03
Скорей всего придется ещё один точно такой же JS скрипт писать но уже обращаться к фрейму.
var image = $('.fancybox-iframe jbzoo-item-'+ itemID +' .item-image .jbimage');
И скорей всего в самом шаблоне quickview -e надо делать
jQuery(function($){
$("a.jsAddToCart").click(function(){
var itemID = $(this).attr('id');
var basketPosition = $(".jsJBZooModuleBasket").offset();
var imagePosition = $('.fancybox-iframe .jbzoo-item-'+ itemID +' .item-image').offset();
var image = $('.fancybox-iframe .jbzoo-item-'+ itemID +' .item-image');
var posit = basketPosition.left - imagePosition.left;
var top = basketPosition.top - imagePosition.top;
$(image).clone().css({
'top' : '10px',
'left' : '20px',
'position' : 'absolute'
}).prependTo($('.fancybox-iframe .jbzoo-item-'+ itemID +' .item-image')).animate({
opacity : 0.6,
zIndex : 9999,
top : "-100px",
left : "50px"
}, 300).animate({
width : "100px",
height : "100px",
left : posit + "px",
top : top + 'px'
}, 1000).hide(300,function(){jQuery(this).remove();});
});
});
Точно сказать затрудняюсь будет ли работать
#34
Posted 19 December 2013 - 11:57
Спасибо большое
прекрасно работает
сайт http://new.sad-kvitiv.com
вариант предложеный ТС выдавал ошибку (ругался на положение модуля корзины)
а http://forum.jbzoo.c...inu/#entry28827 подхватился на ура
всплыл один момент - если товара нет в наличии, он не добавляется в корзину, но анимация все равно срабатывает
есть какие то соображения по этому поводу?
Edited by alexmixaylov, 19 December 2013 - 12:06.
#35
Posted 11 January 2014 - 23:40
дабы не плодить рецепты предлагаю более эстетичный вариант полета)
скрипт приложить на дает так что пишу код сюда
jQuery(function($){
$("a.jsAddToCart").click(function(){
var itemID = $(this).attr('id');
var img = $('.jbzoo-item-'+ itemID +' .item-image img');
if (!img.length) return;
var papa = img.parents('.item-image');
var clone = img.clone();
var position = papa.offset();
var bezier_params = {
start: {
x: position.left,
y: (position.top - $(document).scrollTop()),
angle: 90
},
end: {
x: (/*$(window).width()-*/($('.jsJBZooModuleBasket').offset().left) + rand(0,15)),
y:(0+rand(0,15)),
angle: 180,
length: .2
}
};
clone.prependTo('body');
clone.css({
'width':+img.width()+'px'
});
clone.addClass('addAnimation');
clone.animate({
opacity: 0.2,
width: 20,
height: 20,
path : new $.path.bezier(bezier_params)
}, 600/*, function(){
clone.css({'z-index': 999999})
}*/);
setTimeout(function(){
clone.css({
'z-index': '9 !important'
}).remove()
},600);
});
/*
* jQuery css bezier animation support -- Jonah Fox
* version 0.0.1
*/
/*
var path = $.path.bezier({
start: {x:10, y:10, angle: 20, length: 0.3},
end: {x:20, y:30, angle: -20, length: 0.2}
})
$("myobj").animate({path: path}, duration)
*/
(function($){
$.path = {};
var V = {
rotate: function(p, degrees) {
var radians = degrees * 3.141592654 / 180;
var c = Math.cos(radians), s = Math.sin(radians);
return [c*p[0] - s*p[1], s*p[0] + c*p[1] ];
},
scale: function(p, n) {
return [n*p[0], n*p[1]];
},
add: function(a, b) {
return [a[0]+b[0], a[1]+b[1]];
},
minus: function(a, b) {
return [a[0]-b[0], a[1]-b[1]];
}
};
$.path.bezier = function( params ) {
params.start = $.extend({
angle: 0,
length: 0.3333
}, params.start );
params.end = $.extend({
angle: 0,
length: 0.3333
}, params.end );
this.p1 = [params.start.x, params.start.y];
this.p4 = [params.end.x, params.end.y];
var v14 = V.minus(this.p4, this.p1);
var v12 = V.scale(v14, params.start.length);
v12 = V.rotate(v12, params.start.angle);
this.p2 = V.add(this.p1, v12);
var v41 = V.scale(v14, -1);
var v43 = V.scale(v41, params.end.length);
v43 = V.rotate(v43, params.end.angle);
this.p3 = V.add(this.p4, v43);
this.f1 = function(t) {
return (t*t*t);
};
this.f2 = function(t) {
return (3*t*t*(1-t));
};
this.f3 = function(t) {
return (3*t*(1-t)*(1-t));
};
this.f4 = function(t) {
return ((1-t)*(1-t)*(1-t));
};
/* p from 0 to 1 */
this.css = function(p) {
var f1 = this.f1(p), f2 = this.f2(p), f3 = this.f3(p), f4=this.f4(p);
var x = this.p1[0]*f1 + this.p2[0]*f2 +this.p3[0]*f3 + this.p4[0]*f4;
var y = this.p1[1]*f1 + this.p2[1]*f2 +this.p3[1]*f3 + this.p4[1]*f4;
return {
top: y + "px",
left: x + "px"
};
};
};
$.path.arc = function(params) {
for(var i in params)
{
this[i] = params[i];
}
this.dir = this.dir || 1;
while(this.start > this.end && this.dir > 0)
{
this.start -= 360;
}
while(this.start < this.end && this.dir < 0)
{
this.start += 360;
}
this.css = function(p) {
var a = this.start * (p ) + this.end * (1-(p )) ;
a = a * 3.1415927 / 180; // to radians
var x = Math.sin(a) * this.radius + this.center[0];
var y = Math.cos(a) * this.radius + this.center[1];
return {
top: y + "px",
left: x + "px"
};
}
};
$.fx.step.path = function(fx){
var css = fx.end.css(1 - fx.pos);
for(var i in css)
{
fx.elem.style[i] = css[i];
}
};
})(jQuery);
jQuery.fn.animateStep = function( options ) {
var settings = {
css : {},
speed: 200,
limit: null,
after: function(){},
delay: 50
};
if ( options )
$.extend( settings, options );
return this.each(function(x,item){
if( x === settings.limit )
return false;
var me = $(item);
if( x < options.limit-1 )
me.delay(x*settings.delay).animate(settings.css,settings.speed);
else
me.delay(x*settings.delay).animate(settings.css,settings.speed,settings.after);
});
};
// menu
function rand( min, max )
{
if( max ) {
return Math.floor(Math.random() * (max - min + 1)) + min;
} else {
return Math.floor(Math.random() * (min + 1));
}
}
});
в сss дописываем
.addAnimation{ position: fixed !important; z-index: 999999 !important; display: block;}
#37
Posted 12 January 2014 - 08:33
если есть на каком нибудь сайте этот пример выложите ссылку что бы наглядно можно было увидеть.
#39
Posted 12 January 2014 - 11:47
http://jarko66.ru/rolly
Здесь много всего дописано и переписано, половины боюсь уже не вспомню.
Большинство ответов можно получить на форуме.
#40
Posted 19 February 2014 - 12:23
Заметил, что в тизерах все работает отлично, а в full представлении при нажатии кнопки "Купить!" анимируется основная картинка и дополнительная "левая", тоесть анимация состоит из двух "летящих в корзину картинок...
Не подскажете, как это можно исправить.
Вот ссылка на страницу примера: http://happyhome-meb...-orbita-111-new
Как Вы решили свою проблему? У меня тоже летит картинка слевого края да еще и дублируется http://aldentrade.co...aquasystem-vr-5
Edited by Виктор.У, 25 February 2014 - 13:57.
