Jednoduchá scrolovacie technika Parallax

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

Parallax scrolovanie je zaujímavá technika, kde sa pri scrollovanie snímky na pozadí pohybujú pomalšie ako obsah a tým sa vytvára ilúzia 3D hĺbky. Ako som plánoval prerobiť svoju osobnú stránku, mojím cieľom bolo napísať najkratšie a najjednoduchšie kód a získať maximalní štýl. Ukážem vám, ako som to urobil.

Ak hľadáte rýchly spôsob ako začať so základnou šablónou pre vaše tému, nájsť jednoduché Parallax Theme by mohlo byť dobrou variantom. Alebo si prejdite jednu z našich stránok s šablónami. Môžete tiež nájsť poskytovateľa služieb na Envato Studio, ktorí pre vás vytvoria Parallax scrolovacie stránku.

V tomto tutoriale vás naučím najjednoduchší Parallax scrolling techniku, ktorú uvidíte, tak začnime!

Krok 1: Označenie

Táto technika sa točí okolo ovládanie rýchlosti snímke pozadia. Takže začneme s HTML označením, vytvorte dve sekcie spolu s potrebnými Attribut: "data-type" a "data-speed". Nebojte, vysvetlím neskôr.

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

Používam section tag s Attribut data-typ a data-speed, ktoré sú v HTML5. To robí HTML značenie jasnejšie a jednoduchšie sa číta.

Podľa špecifikácie pre Custom Data Attributes, akýkoľvek attribute, ktorý začína s data- sa bude správať ako skladisko pre privátne dáta. Dodatočne, toto neovplyvní rozloženie prezentácie.

Pretože všetko čo potrebujeme je kontrolovať rýchlosť snímok na pozadí, použijeme data-type = "background" a dáta-speed "10" ako kľúčové atribúty pre špecifikáciu potrebných parametrov.

Viem čo si myslíte, bojíte sa o IE. Nikdy sa nebojte; mám workaround! V správny čas vám dám poviem.

Ďalšie, pridajme obsah do tagu article> vnútri každe 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>

O čo sa tu pokúšame je vytvorenie section> scrollovanie pozadí pomalší ako jeho obsahu, napr. Article>. Toto nám pomôže vytvoriť Parallax ilúziu. Než budeme pokračovať na jQuery kúzla, pridáme snímky pozadia do nášho CSS pre každú 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;  
                }

Po pridaní pozadia pre obe sekcie, by to malo vyzerať takto:

Pridáme viac CSS pre štýl a oživenie stránky!

                #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%; 
                }

Teraz by to malo vyzerať takto ..

Krok 2: Kúzelný kód

Áno, je to tak; to je to, kde začínajú kúzla! Pomocou jQuery, začneme štandardne document.ready () metódou pre zaistenie, že stránka je nahraná a pripravená pre manipuláciu.

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

Táto technika sa točí okolo kontroly rýchlosti snímke pozadí, ktorý existuje v oboch sekciách.

Teraz potrebujem vašu pozornosť tu. Prvá vec čo sa dole deje je, že prechádzame cez každú section> na stránke, ktorá má atribút data-type = "background"

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

Pridajte ďalšiu funkciu, .scroll (), vnútri .each (), ktorá je volaná ako užívateľ začne scrollovať.

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

Musíme určiť koľko toho užívateľ nascrolloval a potom vydeliť hodnotu s data-speed hodnotou, spomínanú v Markup.

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

$ Window.scrollTop (): získavame aktuálnu scrollovacie hodnotu z vrchu. To vlastne určuje o koľko užívateľ scrolloval nahor. $ Bgobj.data ('speed') odkazuje na dáta-speed ktoré je priradené v Markup a yPos je konečná hodnota, ktorú musíme použiť na scrollovanie. Avšak, bude to záporná hodnota, pretože musíme pozadí posunúť opačným smerom, než scrolluje používateľ.

Preskúmame to trochu viac s príkladom:

Na snímke vyššie, data-speed je 10 a predpokladajme, že okno prehliadača scrollovalo 57px. To znamená 57px delené 10 = 5.7px.

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

Posledná vec čo musíme urobiť, je dať dohromady pozíciu nášho pozadia do premennej. Kvôli zachovaniu horizontálnej pozície pozadí ako statické, nastavili sme 50% ako xPosition. Potom sme pridali yPos ako yPosition a konečne sme nastavili súradnice pozadia do nášho section> pozadie: $ bgobj.css ({backgroundPosition: coords}) ;.

Váš konečný kód by mal vyzerať takto:

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

Jaj, zvládli sme to! Skúste si to.

IE oprava

Je tu posledná oprava: staršie IE nevie vykresliť section> a article> tagy. To je ale jednoducho opraviteľné; použijeme štandardné riešenie vytváranie elementov, čo spôsobí magické rozpoznanie HTML5 tagov.

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

Dodatočne, musíme použiť základný CSS reset súbor, aby všetky prehliadače fungovali správne. Našťastie nástroj, ako je HTML5 Boilerplate sa o všetko postará, keď dôjde na normalizáciu medzi prehliadačom.

To je všetko v tejto lekcii! Otázky a poznámky, ktoré by ste chceli pridať? Dajte mi vedieť v komentároch!

A ak hľadáte rýchlo riešenie s profesionálnymi výsledkami, potom sa pozrite na naše Parallax témy a One Page Template možnosti, k dispozícii na ThemeForest.