Witam,
zmagam się z pewnym problemem.
Jestem w trakcie pisania strony :
http://page4u.waw.pl/ania5/ i wszystkie aniamcje podczas scrolowania strony działają poprawnie. Dokładnie chodzi mi płynność przscrollowania strony (przechodzenie między slajdami).
Pod Firefoxem wszystko działa idealnie, niestety pod Google Chrome i IE 11 działa strasznie - brak płynności.
Ponież kod aniamacji :
var $document = $(document);
$document.ready(function(){
//////////////////////////////////////////////**
var winWidth, winHeight;
var $body = $('body'),
$circle = $('.circle');
var R = $circle.width() / 2;
var C = Math.PI * R * 2;
$(window).on('resize', function(){
winWidth = $(this).width();
winHeight = $(this).height();
$body.css('height', C + winHeight);
}).trigger('resize');
var scrolled = false;
$document.on('scroll', function(){
var top = $document.scrollTop();
if(top > C - 1){
$document.scrollTop(1);
} else if (top == 0 && scrolled) {
$document.scrollTop(C - 1);
}
scrolled = true;
var d = ((top / C) * Math.PI * 2) - (Math.PI);
var x = Math.cos(d) * R;
var y = Math.sin(d) * R;
$circle.css({
top: -(R-y) + winHeight/2,
left: -(R-x) + winWidth/2
});
////////ułożenie orbit
$
('div#orbita').each(function(){ $(this).css({
top: (-(R-y) + winHeight/2)+(($circle.height()-$(this).height())/2),
left: (-(R-x) + winWidth/2)+(($circle.width()-$(this).width())/2)
});
});
}).trigger('scroll');
/////////////pozycja slajdów
var $things = $circle.children('div:not(.planet)').css('position', 'absolute');
var i;
$things.each(function(i
){
var $this = $(this);
var a = (Math.PI * 2 / $things.length) * i;
var x = Math.cos(a) * R;
var y = Math.sin(a) * R;
$this.css({
top: y + R - ($this.height() / 2)-20,
left: x + R - ($this.width() / 2)-20-(winWidth*0.05)
});
});
///////////////// pozycje planet
function setPos(pozycja, pozycja2, RR, $this){
var a = (Math.PI * 2 / pozycja) * pozycja2;
var x = Math.cos(a) * RR;
var y = Math.sin(a) * RR;
$this.css({
top: y + RR - ($this.height() / 2),
left: x + RR - ($this.width() / 2)
});
setInterval(function(){
if(pozycja2==pozycja){
pozycja2=0;
}
a = (Math.PI * 2 / pozycja) * pozycja2++;
x = Math.cos(a) * RR;
y = Math.sin(a) * RR;
$this.css({
top: y + RR - ($this.height() / 2),
left: x + RR - ($this.width() / 2)
});
}, Math
.floor((Math
.random
() * 10
) + 1
));
}
var poz = 5000;
var $thing = $('.b').children().css('position', 'absolute');
setPos
(poz
,Math
.floor((Math
.random
() * poz
) + 0), ($
('.b').width
()/2
), $thing); });
var $thing = $('.c').children().css('position', 'absolute');
setPos
(poz
,Math
.floor((Math
.random
() * poz
) + 0), ($
('.c').width
()/2
), $thing); });
var $thing = $('.circle').children('.planet').css('position', 'absolute');
setPos
(poz
,Math
.floor((Math
.random
() * poz
) + 0), ($
('.circle').width
()/2
), $thing); });
var $thing = $('.d').children().css('position', 'absolute');
setPos
(poz
,Math
.floor((Math
.random
() * poz
) + 0), ($
('.d').width
()/2
), $thing); });
var $thing = $('.e').children().css('position', 'absolute');
setPos
(poz
,Math
.floor((Math
.random
() * poz
) + 0), ($
('.e').width
()/2
), $thing); });
var $thing = $('.f').children().css('position', 'absolute');
setPos
(poz
,Math
.floor((Math
.random
() * poz
) + 0), ($
('.f').width
()/2
), $thing); });
var $thing = $('.g').children().css('position', 'absolute');
setPos
(poz
,Math
.floor((Math
.random
() * poz
) + 0), ($
('.g').width
()/2
), $thing); });
var $thing = $('.h').children().css('position', 'absolute');
setPos
(poz
,Math
.floor((Math
.random
() * poz
) + 0), ($
('.h').width
()/2
), $thing); });
/////////////////
$(window).bind('resize', function(e){
window.resizeEvt;
$(window).resize(function()
{
clearTimeout(window.resizeEvt);
window.resizeEvt = setTimeout(function()
{
location.reload();
}, 250);
});
});
//////////////////////////////////////////////**
///////////// obsluga menu
$('.menu #menu span:first-child').css({
'font-size':'16px',
'font-weight':'bold'
});
$('.menu #menu span').click(function(){
if(open_menu){
$(".menu").css({'right': "-170px"});
open_menu=false;
}
$('.menu #menu span').css({
'font-size':'',
'font-weight':''
});
$(this).css({
'font-size':'16px',
'font-weight':'bold'
});
var id = $(this).attr('pos');
$('html, body').stop().animate({
scrollTop: id
}, 1000);
});
var start = [];
var arrow_pos=0;
$
('div.menu #menu span').each(function(i
){
start[i] = $(this).attr('pos');
end[i
] = $
(this
).next('span').attr
('pos'); end[i
] = $
('body').height
(); }
$document.on('scroll', function(){
if($(this).scrollTop()>=start[i] && $(this).scrollTop()<end[i]){
$('.menu #menu span:nth-child('+(i+1)+')').css({
'font-size':'16px',
'font-weight':'bold'
});
arrow_pos=i;
}else{
$('.menu #menu span:nth-child('+(i+1)+')').css({
'font-size':'',
'font-weight':''
});
}
});
});
var open_menu=false;
$('.menu .mobile_menu').click(function () {
if(!open_menu){
$(".menu").css({'right': "-0px"});
open_menu=true;
}else{
$(".menu").css({'right': "-170px"});
open_menu=false;
}
});
$(document).keydown(function(e) {
if(e.keyCode == 40 || e.keyCode){
$('html, body').stop().animate({
scrollTop: start[arrow_pos+1]
}, 500);
}
if(e.keyCode == 38 || e.keyCode == 37){
$('html, body').stop().animate({
scrollTop: start[arrow_pos-1]
}, 500);
}
});
var arrow_keys_handler = function(e) {
switch(e.keyCode){
case 37: case 39: case 38: case 40: // Arrow keys
case 32: e.preventDefault(); break; // Space
default: break; // do not block other keys
}
};
window.addEventListener("keydown", arrow_keys_handler, false);
});
////////////////////////
Będę wdzieczy za pomoc.
Ktoś coś (IMG:
style_emoticons/default/smile.gif) ?
[JavaScript][CSS] Płynność animacji w różnych przeglądarkach
