Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JavaScript] Paralaksy - podstawy
Forum PHP.pl > Forum > Przedszkole
bahh
Witam,

chcę wejść w temat paralaksów, jednakże potrzebne mi są podstawowe wskazówki. Zwięźle, chcę podczas przewijania strony zmieniać style divów na inne.

1. Jakie biblioteki używać? Które uważacie za najpraktyczniejsze i najlepsze? Widziałem sporo przykładów, ale wolałbym nie wdrażać się w ich dokumentację niepotrzebnie.

2. Jak używać ich przy budowie strony? Na co zwrócić uwagę?

Mam
  1. <img src="logo.png" class="logo" />
i chcę sprawić, że jak ktoś przewinie pasek przewijania o 100% (mam na myśli przewinie tą część którą wpierw widzimy po załadowaniu się strony) to do tego przypisywany jest styl "width:60%"

Myślę, że to prosty przykład, a temu kto przedstawi mi dosyć łatwy i uniwersalny sposób bardzo podziękuję, bo bazując na tym, będę. wiedział jak robić inne rzeczy (odpowiednio przypisywał klasy, style itp).
tzm
Użyj jQuery , na prawdę fajna biblioteka i napiszesz coś takiego w 50 linijek.
Pyton_000
Czek dis ałt:
http://thedesignpixel.com/best-jquery-para...-tutorials.html
bahh
Chcę spośród wszystkich paraleksów, mieć możliwie najmniej bibliotek do wgrania - najepiej jquery.min i kilka linijek kodu dla jednego efektu - definiuję w której części scrolla zmienia się styl css i na jaki. Tyle mi wystarczy. Większość gotowców tego mi nie oferuje.

Przy bibliotece jQuery można korzystać z takiego kodu, jeśli ktoś szukałby rozwiązania:


  1. $(window).bind('scroll',function(e){
  2. parallaxScroll();
  3. });
  4.  
  5. function parallaxScroll(){
  6. var scrolled = $(window).scrollTop();
  7. var scrolledmax = (window.innerHeight||document.body.clientHeight);
  8. if (scrolled>scrolledmax) {
  9. //$('.logo').css('width',(254-(scrolled*.25))+'px');
  10. $('.logo').css({'height':(40)+'px', 'width':(169)+'px'});
  11. $('#menu-head').css({'height':(70)+'px', 'max-height':(70)+'px', 'min-height':(70)+'px'});
  12. $('.menu-content').css('line-height',(70)+'px');
  13. } else {
  14. $('.logo').css({'height':(60)+'px', 'width':(254)+'px'});
  15. $('#menu-head').css({'height':(90)+'px', 'max-height':(90)+'px', 'min-height':(90)+'px'});
  16. $('.menu-content').css('line-height',(90)+'px');
  17. }
  18. $('.divek1').css('width',(scrolled)+'px');
  19. $('.divek2').css('width',(scrolledmax)+'px');
  20. }
tzm
Haha, płacze ze śmiechu... mówiłem z sarkazmem o tym jquery przekonany że jednak jakąś gotową bibliotekę weźmiesz a tu kuku. Jednak jQuery, masz gdzieś jakiś gotowy przykład z użyciem tego skryptu?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.