Jednoduchá scrolovací technika Parallax

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

Parallax scrolování je zajímavá technika, kde se při scrollování snímky na pozadí pohybují pomaleji než obsah a tím se vytváří iluze 3D hloubky. Jak jsem plánoval předělat svoji osobní stránku, mým cílem bylo napsat nejkratší a nejjednodušší kód a získat maximalní styl. Ukážu vám, jak jsem to udělal.

Pokud hledáte rychlý způsob jak začít se základní šablonou pro vaše téma, nalézt jednoduché Parallax Theme by mohlo být dobrou variantou. Nebo si projděte jednu z našich stránek s šablonami. Můžete také najít poskytovatele služeb na Envato Studio, kteří pro vás vytvoří parallax scrolovací stránku.

V tomto tutorialu vás naučím nejjednodušší parallax scrolling techniku, kterou uvidíte, tak začněme!

Krok 1: Označení

Tato technika se točí kolem ovládání rychlosti snímku pozadí. Takže začneme s HTML označením, vytvořte dvě sekce spolu s potřebnými attributy: "data-type" a "data-speed". Nebojte, vysvětlím později.

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

Používám <section> tag s attributy data-typ a data-speed, které jsou v HTML5. To dělá HTML značení jasnější a jednodušeji se čte.

Podle specifikace pro Custom Data Attributes, jakýkoliv attribute, který začíná s data- se bude chovat jako skladiště pro privátní data. Dodatečně, tohle neovlivní rozložení prezentace.

Protože vše co potřebujeme je kontrolovat rychlost snímků na pozadí, použijeme data-type="background" a data-speed"10" jako kličový atribut pro specifikaci potřebných parametrů.

Vím co si myslíte, bojíte se o IE. Nikdy se nebojte; mám workaround! Ve správný čas vám dám řeknu.

Další, přidejme obsah do tagu <article> uvnitř 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 co se tu pokoušíme je vytvoření <section> scrollování pozadí pomalejší než jeho obsahu, např. <article>. Tohle nám pomůže vytvořit parallax iluzi. Než budeme pokračovat na jQuery kouzla, přidáme snímky pozadí do našeho CSS pro každou <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 přidání pozadí pro obě sekce, by to mělo vypadat takto:

Přidáme více CSS pro styl a oživení 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%; 
                }

Nyní by to mělo vypadat takto..

Krok 2: Kouzelný kód

Ano, je to tak; to je to, kde začínají kouzla! Pomocí jQuery, začneme standardně document.ready() metodou pro zajištění, že stránka je nahrána a připravena pro manipulaci.

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

Tato technika se točí kolem kontroly rychlosti snímku pozadí, který existuje v obou sekcích.

Nyní potřebuji vaši pozornost zde. První věc co se dole děje je, že procházíme přes každou <section> na stránce, která má atribut data-type="background"

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

Přidejte další funkci, .scroll(), uvnitř .each(), která je volána jak uživatel začne scrollovat.

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

Musíme určit kolik toho uživatel nascrolloval a potom vydělit hodnotu s data-speed hodnotou, zmíněnou v markupu.

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

$window.scrollTop(): získáváme aktuální scrollovací hodnotu z vrchu. To vlastně určuje o kolik uživatel scrolloval nahoru. $bgobj.data('speed') odkazuje na data-speed které je přiřazeno v markupu a yPos je konečná hodnota, kterou musíme použít pro scrollování. Ovšem, bude to záporná hodnota, protože musíme pozadí posunout opačným směrem, než scrolluje uživatel.

Prozkoumáme to trochu víc s příkladem:

Na snímku výše, data-speed je 10 a předpokládejme, že okno prohlížeče scrollovalo 57px. To znamená 57px děleno 10 = 5.7px.

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

Poslední věc co musíme udělat, je dát dohromady pozici našeho pozadí do proměnné. Kvůli zachování horizontální pozice pozadí jako statické, nastavili jsme 50% jako xPosition. Potom jsme přidali yPos jako yPosition a konečně jsme nastavili souřadnice pozadí do našeho <section> pozadí: $bgobj.css({ backgroundPosition: coords });.

Váš konečný kód by měl vypadat 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 jsme to! Zkuste si to.

IE oprava

Je zde poslední oprava: starší IE neumí vykreslit <section> a <article> tagy. To je ale jednoduše opravitelné; použijeme standardní řešení vytváření elementů, což způsobí magické rozpoznání HTML5 tagů.

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

Dodatečně, musíme použít základní CSS reset soubor, aby všechny prohlížeče fungovali správně. Naštěstí nástroj, jako je HTML5 Boilerplate se o vše postará, když dojde na normalizaci mezi prohližeči.

To je vše v této lekci! Dotazy a poznámky, které byste chtěli přidat? Dejte mi vědět v komentářích!

A pokud hledáte rychle řešení s profesionálními výsledky, potom se podívejte na naše Parallax témata a One Page Template možnosti, k dispozici na ThemeForest.