[CSS][JavaScript] Paralaksy - podstawy Opcje

[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

[HTML] pobierz, plaintext 
<img src="logo.png" class="logo" />
[HTML] pobierz, plaintext 

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:

[HTML] pobierz, plaintext 
<script>
$(window).bind('scroll',function(e){
    parallaxScroll();
});
 
function parallaxScroll(){
    var scrolled = $(window).scrollTop();
    var scrolledmax = (window.innerHeight||document.body.clientHeight);
    if (scrolled>scrolledmax) {
      //$('.logo').css('width',(254-(scrolled*.25))+'px');
      $('.logo').css({'height':(40)+'px', 'width':(169)+'px'});
      $('#menu-head').css({'height':(70)+'px', 'max-height':(70)+'px', 'min-height':(70)+'px'});
      $('.menu-content').css('line-height',(70)+'px');
    } else {
      $('.logo').css({'height':(60)+'px', 'width':(254)+'px'});
      $('#menu-head').css({'height':(90)+'px', 'max-height':(90)+'px', 'min-height':(90)+'px'});
      $('.menu-content').css('line-height',(90)+'px');    
    } 
      $('.divek1').css('width',(scrolled)+'px');
      $('.divek2').css('width',(scrolledmax)+'px');
}
</script>
[HTML] pobierz, plaintext 

Ten post edytował bahh 9.11.2014, 13:31:42

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