Forum PHP.pl

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ś ?

mi pod ff tez muli wiec nie zagladam nawet na chrome, ale zamysł fajny tylko widać uczniactwo

A masz jakiś pomysł jak temu zaradzić?



Co masz na myśli ?

Czemu animujesz warstwy o rozmiarze 9000x9000?

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?

trzeba zmniejszyc total max do 4k to i tak narazie nisza bo siliniki sie przegrzewają, mam na myśli dopracować żeby wyglądało profesjonalnie bez konkretów

Wywaliłem wszsytkie orbity poza główna i już całkiem nieźle działa animacja.

Ale czy tak powinno być?

Ok czyli rozmiar ma znaczenie

Jeśli chodzi o dopracowanie to jestem w trakcie, mam nadzieje że finał będzie wyglądał lepiej:)

Ten post edytował kamilo818 3.01.2015, 22:52:38

musi być płynnie żeby nie było beznadziejnie, lepsze małe fajerwerki niż wielkie niewypały, coś wymyslisz