Jednostavna Parallax Scrolling Tehnika

() translation by (you can also view the original English article)

Parallax scrolling je zanimljiva tehnika u kojoj se, dok skrolate, pozadinske slike prevode sporije od sadržaja u prvom planu, stvarajući iluziju 3D dubine. Dok sam planirao re-dizajnirati svoju osobnu web stranicu, moj prvi cilj bio je napisati najkraći i najjednostavniji kod kako bih postigao maksimalnu fantastičnost! Pokazati ću vam kako sam to učinio.

Ako tražite brz način da započnete s osnovnim predloškom za svoju temu, pronalazak jednostavne Parallax Teme mogao biti dobar izbor. Ili pregledajte naše One Page Templates jednostavne predloške. Također možete pronaći davatelje usluga na Envato Studiu koji će vam kreirati parallax scrolling stranice.

U ovom tutorialu ću vas naučiti najjednostavniju tehniku pomicanja paralakse koju ste ikada vidjeli, stoga krenimo na posao!

1 korak: Označavanje

Ova se tehnika vrti oko kontroliranja brzine pozadinske slike. Zato počnimo s HTML oznakom, stvarajući dva odjeljka zajedno s potrebnim atributima: "data-type" i "data-speed". Ne brinite; Njih ću objasniti kasnije.

                <section id="home" data-type="background" data-speed="10">                            
                </section>   
                    
                <section id="about" data-type="background" data-speed="10">
                </section>

Ja koristim <section> tag sa atributima data-type i data-speed, koji su predstavljeni u HTML5. To čini HTML oznaku čišćom i jasnijom za čitanje.

Prema specifikaciji za Custom Data Attributes, bilo koji atribut koji počinje s data- bit će tretiran kao prostor za pohranu za privatne podatke. Osim toga, to neće utjecati na izgled ili prezentaciju.

Budući da trebamo samo kontrolirati brzinu pozadinskih slika, koristit ćemo data-type="background" i data-speed="10" kao ključne atribute kako bismo odredili potrebne parametre.

Znam što mislite: zabrinuta ste za IE. Nikada se ne bojte; Pronašao sam zaobilazno rješenje i za to! Porazgovarati ćemo o tome.

Zatim, dodajmo sadržaj unutar <article> taga unutar svakog <section>.

                <section id="home" data-type="background" data-speed="10" class="pages">     
                         <article>I am absolute positioned</article>
                    </section>   
                    
                <section id="about" data-type="background" data-speed="10" class="pages">
                         <article>Simple Parallax Scroll</article>
                </section>

Ono što ovdje pokušavamo napraviti je da se <section> pozadina kreće sporije od svojeg sadržaja, tj. <article>. To će nam pomoći stvoriti iluziju paralakse. Prije nego što prijeđemo na jQuery čaroliju, dodamo pozadinske slike u našem CSS-u za svaki <section>.

                                
                #home { 
                background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
                }
                
                #about { 
                background: url(about-bg.jpg) 50% 0 no-repeat min-height: 1000px;  
                }

Nakon što dodate pozadine za oba odjeljka, ona bi trebala izgledati ovako:

Dodajmo još CSS-a da stiliziramo i začinimo stranicu!

                #home { 
                  background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
                  height: 1000px; 
                  margin: 0 auto; 
                  width: 100%; 
                  max-width: 1920px; 
                  position: relative; 
                }
                
                #home article { 
                  height: 458px; 
                  position: absolute; 
                  text-align: center; 
                  top: 150px; 
                  width: 100%; 
                }
                
                #about { 
                  background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
                  height: 1000px; 
                  margin: 0 auto; 
                  width: 100%; 
                  max-width: 1920px; 
                  position: relative; 
                  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
                  box-shadow: 0 0 50px rgba(0,0,0,0.8);
                }
                
                #about article { 
                  height: 458px; 
                  position: absolute; 
                  text-align: center; 
                  top: 150px; 
                  width: 100%; 
                }

Sada bi trebalo izgledati ovako ...

Korak 2: Čarobni Kod

Da, tako je; ovdje počinje magija! Koristeći jQuery, započinjemo sa standardnom metodom document.ready () kako bismo bili sigurni da je stranica učitana i spremna za manipulaciju.

1	$(document).ready(function(){
2
3
4	});

Ova tehnika se vrti oko kontroliranja brzine pozadinske slike koja postoji u oba odjeljka.

Sada trebam vašu pažnju. Prva stvar koja se događa u nastavku je da iteriramo preko svakog <section> na stranici, koji ima atribut data-type="background".

                $(document).ready(function(){
                
                    $('section[data-type="background"]').each(function(){
                      var $bgobj = $(this); // assigning the object
                    }); 
                
                });

Dodajte još jednu funkciju, .scroll(), unutar .each (), koja se poziva kada korisnik počne skrolati.

1	$(window).scroll(function() {
2
3	});

Moramo utvrditi koliko je korisnik skrolao prema gore, i zatim podijeliti vrijednost s data-speed vrijednosti, koja se spominje u označnoj vrijednosti.

1	var yPos = -($window.scrollTop() / $bgobj.data('speed'));

$ window.scrollTop (): dobivamo trenutnu vrijednost skrolanja odozgo. U osnovi, to određuje koliko je korisnik pomaknuo gore. $bgobj.data('speed') se odnosi na data-speed dodijeljenu u oznaci, a yPos je konačna vrijednost koju trebamo podnijeti zahtjev za pomicanje. Međutim, to će biti negativna vrijednost jer moramo premjestiti pozadinu u suprotnom smjeru korisnika.

Istražimo još malo sa primjerom:

Na slici iznad, data-speed je 10, i pretpostavimo da je prozor pretraživača pomaknut za 57px. To znači 57px podijeljeno sa 10 = 5.7px.

                // Put together our final background position
                var coords = '50% '+ yPos + 'px';
                
                // Move the background
                $bgobj.css({ backgroundPosition: coords });

Posljednja stvar koju trebamo učiniti jest sastaviti naš konačni pozadinski položaj u varijablu. Kako vodoravni položaj pozadine ostao statičan, dodijelili smo 50% kao svoju xPosition. Zatim smo dodali yPos kao yPosition i naposljetku dodijelili pozadinske koordinate našoj <section> pozadini: $bgobj.css({ backgroundPosition:coords });.

Vaš konačni kod mogao bi izgledati ovako:

$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object
    
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed')); 
            
            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });
        }); 
    });    
});

Odlično, završili smo! Isprobajte sami.

IE Popravak

Imamo još jedan posljednji popravak: stariji IE ne može renderirati <section> i <article> tagove. To je, doduše, lako popraviti; upotrijebiti ćemo standardno rješenje za izradu elemenata, što čini pretraživač magično prepoznatljivim HTML tagovima.

1	// Create HTML5 elements for IE
2
3	document.createElement("article");
4	document.createElement("section");

Osim toga, moramo upotrijebiti osnovnu CSS reset datoteku kako bi svi preglednici mogli dobro funkcionirati. Srećom, alati, kao što je HTML5 Boilerplate, obavljaju težinu posla umjesto nas, kada je riječ o normalizaciji cross-preglednika.

To će biti sve za ovu lekciju! Imate li kakvih pitanja ili neki komentar koji biste željeli dodati? Javite mi ispod u komentarima!

I ako tražite brzo rješenje sa profesionalnim rezultatima, pretražite naše Parallax Theme i One Page Template opcije, dostupne u prodaji na našem ThemeForest online tržištu.