Isang simpleng teknik ng Parallax Scrolling

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

Ang Parallax scrolling ay isang kawili-wiling teknik, kung saan, habang ikaw ay nag-iiscroll, ang background ng mga larawan, ay nagiging mas mabagal sa nilalaman nito sa foreground, na lumilikha ng ilusyon na 3D depth. Sa pagpaplano ko na idisenyong muli ang aking sariling websayt, una kong naging layunin ang gumawa ng pinakamaikli at pinakasimpleng kowd para makamit ang pinakamataas na kahusayan! Ipapakita ko sa inyo kung paano ko nagawa ito.

Kung naghahanap ka ng pinakamabilis na paraan para magsimula gamit ang pangunahing template para sa iyong theme, ang paghahanap ng simpleng Parallax Theme ay isang magandang opsyon. O mag-browse sa aming One Page Templates. Makakahanap ka din ng mga tagapagbigay ng serbisyo sa Envato Studio na lilikha ng mga parallax scrolling site para sa iyo.

Sa tutoryal na ito, ituturo ko sa inyo ang pinakasimpleng teknik ng parallax scrolling na malalaman mo, kaya tingnan pa natin ito!

Hakbang 1: Ang Markup

Ang teknik ay umiikot sa pagkontrol sa bilis ng background ng larawan. Kaya magsimula tayo sa HTML markup, lumilikha ng dalawang bahagi kasama ng mga kinakailangan na attribute: "data-type" at "data-speed". Huwag mag-alala; ipapaliwanag ko ang mga ito mamaya.

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

Ginagamit ko ang <section> tag kasama ng mga attribute na data-type & data-speed, na ipinakilala sa HTML5. Ito ang bumubuo sa markup cleaner ng HTML at dahit dito nagiging mas madali ang pagbasa nito.

Ayon sa espesipikasyon ng Custom Data Attributes, anumang attribute na nagsisimula sa data- ay maituturing na imbakan ng mga pribadong datos. Bukod pa dito, hindi ito nakakaapekto sa layout o presentasyon.

Dahil ang kailangan lang nating gawin ang pagkontrol sa bilis ng background ng mga larawan, gagamitin natin ang data-type="background" at data-speed="10" bilang mga panunahing attribute para matukoy ang mga mahahalagang parametro.

Alam ko ang iniisip mo: nag-aalala ka sa IE. Huwag matakot; Mayroon din akong solusyon diyan! Tatalakayin natin maya-maya lamang.

Pagkatapos, ilagay natin ang nilalaman sa loob ng <article> tag na makikita sa bawat <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>

Ang sinusubukan nating gawin dito ay gawing mas mabagal ang <section> background kaysa sa nilalaman nito, i.e <article>. Tayo ay matutulungan nitong lumikha ng isang parallax illusion. Bago pumunta sa jQuery magic, ilagay natin ang background ng mga larawan sa ating CSS para sa bawat <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;  
                }

Sa paglalagay ng mga background sa dalawang bahagi, dapat ito ay magmukhang:

Maglagay pa tayo ng ilan pang CSS na maaaring madisenyuhan at ito din ay magpapaganda ng page!

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

Ngayon ito ay dapat maging ganito…

Hakbang 2: Ang Magic Code

Oo, tama; dito nagsisimula ang mahika! Gamit ang jQuery, magsisimula tayo sa standard document.ready() method upang tiyakin na ang page ay nakikita na at handa ng magamit.

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

Umiikot ang teknik na ito sa pagkontrol sa bilis ng background na mayroon ang mga larawan sa parehong bahagi.

Ngayon kailangan ko ang atensiyon mo dito. Ang unang nangyayari sa ibaba ay inuulit natin ang bawat <section> sa page, na may attribute data-type="background".

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

Maglagay ng isa pang function, .scroll(), inside .each(), na nagsisimulang gumana kapag nag-umpisang mag-scroll ang user.

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

Kailangan nating malaman kung gaano karami ang na-scroll up ng user, at pagkatapos hatiin ang halaga nito sa pamamagitan ng data-speed value, na nabanggit sa markup.

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

$window.scrollTop(): Kinukuha natin ang kasalukuyang scroll value mula sa itaas. Ito ay tunay na tumutukoy kung gaano karami ang na-scroll up ng isang user. $bgobj.data('speed') ay tumutukoy sa data-speed na itinakda sa markup, at ang yPos ang pinakahuling value na kinakailangan nating ilagay para sa scrolling. Gayunpaman, ito ay magiging negative value, dahil kinakailangan nating ilipat ang background sa ibang direksiyon ng scroll ng user.

Halika’t imbestigahan pa natin sa pamamagitan ng isang halimbawa:

Sa imaheng nasa itaas, ang data-speed ay 10, at ipalagay natin na ang browser window ay nag-scroll up ng 57px. Ang ibig sabihin ang 57px ay hinati sa 10 = 5.7px.

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

Ang pinakahuling dapat gawin ay ang pagsamahin natin ang pinakahuling posisyon ng background sa isang variable. Upang mapanatili ang horizontal na posisyon ng background na hindi gumagalaw, itinakda namin ang 50% na xPosition nito. Pagkatapos, inilagay namin ang yPos bilang the yPosition, at, ang pinakahuli, itinakda ang background na nakatugma sa aming <section> background: $bgobj.css({ backgroundPosition: coords });.

Ang huling kowd mo ay maaaring katulad nito:

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

Yay, nagawa natin! Subukan mo ito para sa iyong sarili.

IE Fix

May isa pang kailangan ayusin: hindi kayang ibigay ng mas lumang IE ang <section> at <article> tags. Madali naman itong maayos; gagamitin natin ang mga kinikilalang solusyon sa paggawa ng mga elemento, na hinahayaan ang browser na matukoy ang mga HTML5 tag.

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

Bukod pa dito, kailangan nating gumamit ng pangunahing CSS reset file upang ang lahat ng mga browser ay magamit nang maayos. Sa kabutihang palad, ang mga tool, na tulad ng HTML5 Boilerplate ang gumagawa ng pinakamahirap na bahagi ng gawain natin, kung tungkol sa cross-browser normalizing ang pinag-uusapan.

At iyan ang ating leksiyon! May mga katanungan o mga listahan ba kayo na nais niyong idagdag? Ipaalam niyo sa akin sa ibaba!

At kung kayo ay naghahanap ng mabilis na solusyon na may mga propesyunal na resulta, tingnan ang aming mga opsyon para sa Parallax Theme at One Page Template, na maaaring mabili sa ThemeForest.