tutorial - paralaksa

[torm]

Witam,

 

szukam jakiegoś dobrego tutorialu (skryptu), do strony z zastosowaniem paralaksy.

Kluczowym dla mnie jest płynna animacja tak jak tutaj:

http://www.boy-coy.com/#apps

 

grzebałem trochę w kodzie tej strony, ale mało co z tego udało mi się wyciągnąć.

Jeśli ktoś zna jakieś rozwiązania jak osiągnąć taki efekt, to proszę o pomoc.

 

Pozdrawiam

[olaf]

no im też wyślij jak znajdziesz. na mom lapku webowym działa mało płynnie, na mobilach jak poniżej. Co w sumie jest zabawne, bo nigdy nie miałem takiej jazdy scrollując obraz w grach. Pewnie potrzebny jest lepszy framework potrafiący cachować treść na grafiki (z uzyciem canvasa) i dlatego prózno szukać, bo to raczej custom made dla kazdego projektu inaczej.T

u raczej trzeba umieć pisać kod, a ludzie potrafiący pisać albo maja dobre posady w duzych firmach albo nie zajmują się stronami www tylko innymi zastosowaniami html5. Albo maja porządną pracę z dala od js'a :)

 

[video=youtube_share;_kAD_xHz-K4]

[torm]

na urządzeniach mobilnych animacja jest raczej wyłączona.

 

udało mi sie znaleźć jedno rozwiązanie: http://jsfiddle.net/Fsx7L/4/

[olaf]

wciaz mnie zastanawia jaka jest przyszłość html5 jak najbanalniejszy efekt trzeba wylaczac na mobilu, bo nie raje rady. Rotacje wprowadzą dopiero na kwantowych komputerach :)

Ale nie ma sie co wyżywać, ten efekt bez problemu by działał na mobilu - tak jak strona boycoy, bo musiałem ruszać planami i wiem, że dałoby radę. Problem nie jest w wydajnosci paralaksy tylko jak to zadziała z calym kontentem. A zeby dobrze działało to potrzeba zarządzania obiektami, a to juz zawsze będzie custom based i zawsze będzie ścierwiło przy braku doświadczenia.

 

Ten efekt wyglada dobrze, działa poprawnie dla małych boxów, nie działa na mobliu. Wiecej nie da się na chwilę obecną powiedzieć. Najpierw zrób moze test z obciążeniem (np. po 16obiektów na 4planach powinno dać ogląd, czesc przynajmniej 1024px szeroka, pola tekstowe, png, jpg) zanim zaczniesz brać go pod uwagę, w przykładzie nie ma nawet bitmapy w procesie. Tak mozna tylko gadac.

[torm]

w przykładzie, który podałem, jest użyte .animation ({ top... z tego co wiem, to obciążenie procesora jest mniejsze, jeśli używasz transformY zamiast animacji... ale jak na razie zrobiłem na .animation ({ top... i działa ok :) fakt, że testowałem na razie tylko na swoim sprzęcie... ale powinno być ok :)

[olaf]

ja zawsze w html5 zaczynam od testów obciązeniowych szukając rozwiązania i sprawdzam kiedy muli. Bo jak działa płynnie to tak naprawde nic nie wiesz.

[torm]

to trochę jest tak jak z grami... im wyższy budżet... tym mniejsze obciążenia sprzętu ;)

[olaf]

chodzi o to, ze musisz mieć wiedzę, by ją sprzedać klientowi. A jak robisz coś, co wyglada ok i na tym poprzestajesz, to zwyczajnie nie nabywasz zadnej. Dopóki nie zepsujesz tego czym się bawisz niewiele wiesz o narzędziu ktorego uzywasz.

 

Oczywiście zrobisz jak chcesz ale inne faktury wystawia się za 'powinno być ok', a inne za 'wiem k$#wa wszystko'.

Bo boy-coy tez u Ciebie działał ok, a jest dupiaście napisanym kodem ;)

 

na początek chyba warto uzyc obu metod i porównać -ale musiałbyś stworzyć setup, ktory muli Ci kompa. To już jakaś wedza, ktora warto posiadac, skoro jest okazja.

[torm]

boy-coy, akurat dostałem od klienta jako benchmark... więc teoretycznie tak to powinno działać :)

[torm]

nadal walczę z rozwiązaniem snap to point... do tej pory, udało mi się wypróbować dwa pomysły.. jednak nie działają one najlepiej

 

pierwszy:

(function () {
var previousScroll = 0;

$(window).scroll(function () {
  var currentScroll = $(this).scrollTop();
  if (currentScroll > previousScroll){
      $(document).scrollTop(1700);
  }
  if (currentScroll       $(document).scrollTop(0);
  }
  previousScroll = currentScroll;
});
}());

 

drugi:

 

if ($(document).scrollTop(); > 0 ) {
  $(document).scrollTop(1700);
} 

 

pierwsze rozwiązanie o tyle się nie sprawdza, że niestety kiedy currentScroll staje się większy, zaczyna całość wariować - góra dół

drugie rozwiązanie... nie pozwala wyjść z określonego ifami punktu...:/

[olaf]

Pierwszy moze wariowac bo zczytuje scrola w trakcie. Nie wiem czy zauwazyles ale jak poszurasz rolke mocniej zwraca Ci kilka eventow wiec bedzie szalec. Musisz wylaczac opcje po pierwszym badaniu czy cos w tym stylu.

[torm]

do tego doszedłem.. :) niestety nie bardzo wiem jak to napisać...:/

[olaf]

i tak musisz w spokoju wytweenować animacje więc ignoruj przez np. 1sek event.

 

var react=true;

window.onscroll=function(e){

if(react){

scrollTo(0,1700);

react=false;

tuWstawSwojUlubionyTimeInterval(1000)

}

}

 

function myInterval(){react=true} // przywraca czulosc kodu na scrolla

[torm]

działa tylko po pierwszym odpaleniu strony, jak jest ustawiona na scrollTop(0)... :/

[olaf]

no bo nie ustawiles setInterval albo czegos, co ustawia spowrotem true. Nie moze nie działać, bo wczoraj sprawdzałem.

[torm]

faktycznie, chyba nie ustawiłem setInterval, ale nawet po ustawieniu, strona blokuje się po prostu na scrollTop(1700); i już nie chce dalej ruszyć

[olaf]

no to musisz trochhe potrenowac debugowanie kodu, bez tego ani rusz. alertuj sobie zmienne w takim razie, bediesz wiedział czy currentScroll nie jest zle ustawiony itp. bo to pewnie problem tego typu. To ta najmniej przyjemna czesc pracy programisty ale opanowanie pomoze Ci szybciej łapać bledy więc ustaw sobie konsolę developera i pchaj tam interesujace Ciebie zmienne, by miec kontrole nad tym o czym zapomniałeś w czasie pracy.

[torm]

no w końcu metodą prób i błędów się udało ;)

dzięki też Twojej pomocy oczywiście ;)

 

(function () {
		var previousScroll = 0;

		$(window).scroll(function () {
		   var currentScroll = $(this).scrollTop();
		   var react=true;
		   if (currentScroll > previousScroll && react == true && currentScroll 				   $(document).scrollTop(1700);
			   react=false;
			   myInterval(2000)
		   }
		   if (currentScroll 				  $(document).scrollTop(0);
			  react=false;
			  myInterval(2000)
		   } if (currentScroll  1700){
			   $(document).scrollTop(1700);
			   react=false;
			   myInterval(2000)
		   } if (currentScroll > previousScroll && react == true && currentScroll > 1700 && currentScroll 				   $(document).scrollTop(3570);
			   react=false;
			   myInterval(2000)
		   } if (currentScroll  3570){
			   $(document).scrollTop(3570);
			   react=false;
			   myInterval(2000)
		   }  if (currentScroll > previousScroll && react == true && currentScroll > 3570 && currentScroll 				   $(document).scrollTop(5440);
			   react=false;
			   myInterval(2000)
		   } if (currentScroll  5440){
			   $(document).scrollTop(5440);
			   react=false;
			   myInterval(2000)
		   } if (currentScroll > previousScroll && react == true && currentScroll > 5440 && currentScroll 				   $(document).scrollTop(7810);
			   react=false;
			   myInterval(2000)
		   }
		   previousScroll = currentScroll;
		   function myInterval(){react=true}
		});
	}());

[olaf]

Super. Jak teraz dodasz easing na warstwy to masz plynna paralakse.