Skocz do zawartości

tutorial - paralaksa


torm

Rekomendowane odpowiedzi

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

Odnośnik do komentarza
Udostępnij na innych stronach

  • Odpowiedzi 18
  • Created
  • Ostatniej odpowiedzi

Top Posters In This Topic

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]

Odnośnik do komentarza
Udostępnij na innych stronach

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.

Odnośnik do komentarza
Udostępnij na innych stronach

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

Odnośnik do komentarza
Udostępnij na innych stronach

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.

Odnośnik do komentarza
Udostępnij na innych stronach

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

Odnośnik do komentarza
Udostępnij na innych stronach

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.

Odnośnik do komentarza
Udostępnij na innych stronach

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

Odnośnik do komentarza
Udostępnij na innych stronach

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.

Odnośnik do komentarza
Udostępnij na innych stronach

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

Odnośnik do komentarza
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się



×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Wykorzystujemy cookies. Przeczytaj więcej Polityka prywatności