Jump to content
Sign in to follow this  
torm

tutorial - paralaksa

Recommended Posts

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

Share this post


Link to post
Share on other sites

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]

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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...:/

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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}
		});
	}());

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

We are using cookies. Read about our Privacy Policy