[JavaScript][CSS] Płynność animacji w różnych przeglądarkach Opcje

[kamilo818]

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 :

[PHP] pobierz, plaintext 
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');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.b').width()/2), $thing);
				});
 
				var $thing = $('.c').children().css('position', 'absolute');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.c').width()/2), $thing);
				});
 
				var $thing = $('.circle').children('.planet').css('position', 'absolute');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.circle').width()/2), $thing);
				});
 
				var $thing = $('.d').children().css('position', 'absolute');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.d').width()/2), $thing);
				});
 
				var $thing = $('.e').children().css('position', 'absolute');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.e').width()/2), $thing);
				});
 
				var $thing = $('.f').children().css('position', 'absolute');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.f').width()/2), $thing);
				});
 
				var $thing = $('.g').children().css('position', 'absolute');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.g').width()/2), $thing);
				});
 
				var $thing = $('.h').children().css('position', 'absolute');	
				$thing.each(function(){
					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 end =[];
	var arrow_pos=0;
	$('div.menu #menu span').each(function(i){
 
		start[i] = $(this).attr('pos');
		end[i] = $(this).next('span').attr('pos');
		if(!end[i]){
			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);
 
	});
////////////////////////
[PHP] pobierz, plaintext 

Będę wdzieczy za pomoc.

Ktoś coś (IMG:style_emoticons/default/smile.gif) ?

[kamilo818]

To ostatnia 'orbita'. W większości przypadków nie widoczna ze względu że mało kto będzie miał taki monitor. Ale animuje ją tak samo jak wszystkie poprzednie. Usuwając ją nie będzie kompletnego układu.

Chyba że bym sprawdzał szerokości ekranu i animował tylko te co są widoczne.

Ale nawet wywalając najszersze elementy muli tak samo.
Jednak jak zmniejsze główny element po którym odbywa sie animacja po kole z 6000 do no 2000 to już płynnie przebiega animacja.
Czyli za szeroki jest element?