JavaScript Teknikleri

Paralaks efekti oluşturmak için en popüler yöntem JavaScript kullanmaktır. Bu bölümden itibaren JavaScript kavramlarını ve Paralaks kaydırmayı gerçekleştirmek için kullanılan bazı kitaplıkları tartışacağız.

Saf JavaScript kullanmak, web sitesi performansını optimum seviyede tutmak için mantıklıdır. Kitaplıkları performans açısından kullanmanın başka birçok avantajı vardır. Bununla birlikte, kod organizasyonunu daha iyi anlamak için saf JavaScript paralaks uygulamasıyla başlayacağız. Eğlenceli gerçek, bazen saf JavaScript de denirvanilla JavaScript.

Saf JavaScript kullanarak Paralaks Kaydırma

İlk olarak, aşağıda gösterilen kodla ana HTML dosyasını oluşturun. HTML sayfası sadece dört başlık metninden oluşacaktır.

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
      <script src = "myscripts.js"></script>  
   </head>  
   
   <body>  
      <section class = "parallax">  
         <h1>The First Scroll</h1>
      </section>       
      
      <section class = "parallax">  
         <h1>The Second One</h1>
      </section>       
      
      <section class = "parallax">  
         <h1>GoingOn !!</h1>
      </section>       
      
      <section class = "parallax">  
         <h1>And we've reached the bottom!!</h1>
      </section>  
   </body>
   
</html>

4. satırda, bu örnekte kullandığımız myscripts.js HTML dosyası ve CSS dosyası ile aynı klasörde saklanacak olan dosya.

Şimdi CSS dosyamızı aşağıda gösterildiği gibi hazırlayalım.

header {  
   height: 4em;  
   background: #845;  
}  

.parallax {  
   background-repeat: no-repeat;  
   background-size: cover;  
}
  
.parallax h1 {  
   text-align: center;  
   margin: 0;  
   font-size: 2.5em;  
   letter-spacing: .2em;  
   color: red;    
   padding: 10rem 0;  
   mix-blend-mode: exclusion;  
} 
 
.parallax:nth-of-type(1) {  
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);  
}  

.parallax:nth-of-type(1) h1 {  
   padding: 15rem 0;  
}  

.parallax:nth-of-type(2) {  
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);  
} 
 
.parallax:nth-of-type(2) h1 {  
   padding: 12rem 0;  
} 
 
.parallax:nth-of-type(3) {  
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);  
}  

.parallax:nth-of-type(4) {  
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);  
}

Şimdi JavaScript bölümü geliyor, not defterinde bir dosya oluşturun ve myscripts.js olarak kaydedin .

function $$(selector, context) {  
   context = context || document;  
   var elements = context.querySelectorAll(selector);  
   return Array.prototype.slice.call(elements);  
}   
window.addEventListener("scroll", function() {  
   var scrolledHeight= window.pageYOffset;  
   
   $$(".parallax").forEach(function(el,index,array) {   
      var limit = el.offsetTop+ el.offsetHeight;  
      
      if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {  
         el.style.backgroundPositionY=  (scrolledHeight - el.offsetTop) /1.5+ "px";  
      } else {  
         el.style.backgroundPositionY=  "0";  
      }  
   });  
});

Kod Analizi

JavaScript kodunu analiz edelim.

Kod line number 1 to 4 yardımcı işlevi temsil eder.

6. satırda paralaks elemanımızı seçip scrollpencereye olay. Ne kadar alanın kaydırılacağını belirlemek için kullanıyoruzscrolledHeightEmlak. Ekran aşağı doğru kayarken,backgroundPositionY paralaks öğesi için güncellenir.

Paralaks etkisini yavaşlatmak için 1.5'e böldük, bu sayı istediğiniz herhangi bir sayıya değiştirilebilir.

Şimdi, aşağıdaki ekran görüntüsünde gösterildiği gibi sayfanın aşağı kaydırıldığını görebileceksiniz.

ScrollMagic JavaScript Kitaplığını Kullanma

Önceki bölümde tartışıldığı gibi, paralaks efekti oluşturmak için saf JavaScript kullanabilirken, kullanıcı deneyimini geliştirecek bazı güçlü JavaScript kitaplıkları vardır. ScrollMagic, paralaks kaydırma etkileşimleri oluşturmak için böyle bir kitaplıktır.

Aşağıda verilen bir örnek yardımıyla bu konu hakkında daha fazla tartışalım -

Note- Bu örnekte, basit tutmak için CSS'yi HTML dosyasında saklayacağız. Ayrıca, JavaScript kodu aynı belgede bulunacaktır. Özetle, yalnızca bir HTML dosyası oluşturacağız ve gerekli CSS ile birlikte ScrollMagic kitaplıklarına sahip olacağız.

<html>  
   <head>  
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>  
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>  
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>  
   </head>  
   
   <body>   
      <style type = "text/css">  
         .parallaxParent {  
            height: 100vh;  
            overflow: hidden;  
         }  
         .parallaxParent > * {  
            height: 200%;  
            position: relative;  
            top: -100%;  
         }  
      </style>  
      <div class = "spacing0"></div>  
      
      <div id = "parallax1" class = "parallaxParent">  
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>  
      </div>  
      
      <div class = "spacing1">  
         <div style = "background-color:cyan">  
         <p>These are bricks</p>  
         </div>  
      </div>
      
      <div class = "spacing0"></div>  
      <div id="parallax2" class = "parallaxParent">  
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>  
      </div>  
      
      <div class = "spacing1">  
         <div style = "background-color:yellow">  
            <p>Some More Bricks</p>  
         </div>  
      </div>  
      
      <div class = "spacing0"></div>  
      <div id = "parallax3" class = "parallaxParent">  
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>  
      </div>  
      <div class = "spacing2"></div>  
      
      <script>  
         // init controller  
         var controller = new ScrollMagic.Controller({
            globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});  

         // build scenes  
         new ScrollMagic.Scene({triggerElement: "#parallax1"})  
            .setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})  
            .addIndicators()  
            .addTo(controller);  

         new ScrollMagic.Scene({triggerElement: "#parallax2"})  
            .setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})  
            .addIndicators()  
            .addTo(controller);  

         new ScrollMagic.Scene({triggerElement: "#parallax3"})  
            .setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})  
            .addIndicators()  
            .addTo(controller);  
      </script>  
   </body>
   
</html>

Yukarıdaki kodda gösterildiği gibi, JavaScript kitaplık referansları için gerekli line 3 to 6. CSS kodu 9. satırdan 19. satıra kadar belirtilir.

İçerik Dağıtım Ağı

3. satırdan 6. satıra kadar olan komut dosyası referansları, ScrollMagic İçerik Dağıtım Ağı (CDN) URL'lerini işaret eder. Bir CDN kullanmak, web sitenizi yavaşlatmadan gerekli kitaplıkları yüklediğiniz için modern web sitesi geliştirmede mantıklıdır.

Kitaplıklarda gerekli özelleştirmeler varsa, bu efektleri kullanmak için kitaplıkları kendi sunucularında barındırmak gerekir. Bir kitaplıktan temel işlevleri kullanıyorsanız, CDN URL'sini kullanmak etkilidir.

Yukarıdaki HTML kodu, 2 bölümle ayrılmış bir görüntüyü gösterir. İlk bölüm bir başlık ile görünür -These are bricks ve ikinci bölüm - Some More Bricks.

CSS kodunda 9'dan 19'a kadar olan satırlarda, yalnızca ilgili paralaks div için konumu ve stili belirttiğimize dikkat edin.

Bu yumuşak paralaksı yaratma işi sceneScrollMagic kitaplığı tarafından yapılır. 43. satırdan 62. satıra kadar komut dosyası koduna başvurursanız, ScrollMagiccontroller çağrılır ve bir scene yaratıldı.

Sahneler, DOM'un ekranın% 80'i dolduğunda paralaks efekti oluşturmasına rehberlik eder. JavaScript, kaydırma tetikleyicisini anlamak için kullanılır. Sonuç olarak, elde ettiğiniz şey bu sayfada yüzen bir deneyimdir.

Note - Yukarıdaki görüntü bir GIF görüntüsü olarak düşünüldüğünde, metin bölmelerinin yumuşak etkisini göremezsiniz.

Tetikleyici Animasyonlar

ScrollMagic Library ile çeşitli kullanıcı deneyimi yaratma olanakları sonsuzdur. Kaydırma sırasında animasyonları tetiklemek için aşağıda verilen kod parçacıklarını inceleyin.

Bunun için iki dosyaya ihtiyacınız olduğunu unutmayın * eksi; bir HTML dosyası ve bir CSS dosyası.

Aşağıda gösterilen kodla HTML dosyası oluşturun -

<html>  
   <head>  
      <link rel = "stylesheet" href = "style.css">  
   
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>  
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>  
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>  
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>  
   </head>  
   
   <body>   
      <div class = "spacing0"></div>  
      <div id = "parallax1" class = "parallaxParent">  
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>  
      </div>  
      
      <div style = "height:450px;"></div>  
      <div id = "square" class = "square">This is it!</div>  
      <div style = "height:450px;"></div>  
      
      <script>  
         var controller = new ScrollMagic.Controller();  
         var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})  
            .setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})  
            .addTo(controller);   
         
         var scene = new ScrollMagic.Scene({triggerElement: '.square'})  
            .setClassToggle('.square', 'show')  
            .addTo(controller);  
      </script>  
   </body>
   
</html>

Şimdi, içinde aşağıdaki kodun bulunduğu bir CSS dosyası oluşturun.

.square {  
   background: aqua;  
   margin: 0 auto;  
   display: block;  
   padding: 40px 0;  
   text-align: center;  
   color: #000;  
   font-size: 40px;  
   font-weight: bold;  
   opacity: 0;  
   transition: .3s;  
   width: 0%;  
}  
.square.show{  
   opacity: 1;  
   width: 100%;  
}  
.parallaxParent {  
   height: 100vh;  
   overflow: hidden;  
}  
.parallaxParent > * {  
   height: 200%;  
   position: relative;  
   top: -100%;  
}

Kod Analizi

HTML koduna göre ScrollMagic kodu, line 17 ve kadar devam ediyor line 25. Bu bölümde iki ScrollMagic sahnesi oluşturuyoruz. İlk sahne tuğla görüntüsü için, diğeri ise banner animasyonu içindir.

Belirtildiği gibi setTween işlev açık line 20, kaydırma eylemi ekran boyutunun% 40'ında gerçekleştiğinde, afişi gösteren bir sonraki sahne başlar İşte bu!

Kimliğine sahip div'in opaklığı - square CSS dosyasında kontrol ediliyor line 10 ve line 15.

Sonuç olarak, aşağıdaki animasyonu sayfada göreceksiniz.

Yatay Kaydırma

Ayrıca paralaks kaydırma uygulayabilir ve yatay kaydırma yapabiliriz. ScrollMagic kütüphanesi yatay bir kaydırma efekti oluşturmak için kullanılabilir. Aşağıdaki koda bakın.

Kod yatay kaydırma efekti oluşturmak için basit olsa da, ekranların yatay hareketini elde etmek için jquery referansına ihtiyacımız olacak. JQuery'nin detayları sonraki bölümde verilmektedir, şimdilik sadece aşağıda verilen kodu takip edin.

Üç ayrı dosya oluşturacağız - ana kod için HTML dosyası, stiller için CSS dosyası ve ScrollMagic işlev çağrıları için JS dosyası.

İşte HTML belgesinin kodu.

<html>  
   <head>  
      <link rel = "stylesheet" href = "style.css">  
   </head>  
   
   <script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>  
   <script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>  
   <script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script> 
   <script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script> 
   <script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>  
   <script src = "animation.js"></script>  
   
   <body>  
      <div class = "wrapper" id = "js-wrapper">  
         <div class = "sections" id = "js-slideContainer">  
            <section class = "section">  
               <span class = "section__title" id = "title1">Scroll Once</span>  
               <span id = "trigger--title1"></span>  
            </section>  
            
            <section class = "section">  
               <span class = "section__title" id = "title2">Do It Again</span>  
               <span id = "trigger--title2"></span>  
            </section>  
            
            <section class = "section">  
            <span class = "section__title" id = "title3">Thank You!</span>  
            <span id = "trigger--title3"></span>  
         </div>  
      </div>  
   </body> 
   
</html>

Kaydırdıktan sonra görünecek üç bölümümüz olduğunu gözlemleyin. Üç bölüm sırasıyla 15, 19 ve 23. satırlarda id title1, title2 ve title3 ile gösterilir.

CSS belgesinin kodu aşağıda verilmiştir -

body {  
   font-family: serif;  
}  

body, html {  
   height: 100%;  
} 
 
.wrapper {  
   width: 100%;  
   height: 100%; 
   overflow: hidden;  
}  

.section {  
   height: 100%;  
   width: calc( 100% / 5 );  
   float: left;  
   position: relative;  
}  

.section:nth-child(1) {  
   background: green;  
}  

.section:nth-child(2) {  
   background: orange;  
}  

.section:nth-child(3) {  
   background: red;  
}  

.sections {  
   width: 500%;  
   height: 100%;  
}  

.section__title {  
   position: absolute;  
   top: 50%;  
   left: 50%;  
   font-size: 30px;  
   color: #fff;  
}

Kod Analizi

Üç ekranın (veya bölümlerin) arka plan renkleri şurada verilmiştir: lines 10, 22 ve 25.

Başlayan koddaki her bir ekranın göreceli genişliğini hesaplıyoruz. line 13.

ScrollMagic için JavaScript kodu aşağıda verilmiştir -

$(function () {   
   var controller = new ScrollMagic.Controller();  
   var horizontalSlide = new TimelineMax()  
      .to("#js-slideContainer", 1,   {x: "-20%"})     
      .to("#js-slideContainer", 1,   {x: "-40%"})  
   
   new ScrollMagic.Scene({  
      triggerElement: "#js-wrapper",  
      triggerHook: "onLeave",  
      duration: "400%"  
   })  
   .setPin("#js-wrapper")  
   .setTween(horizontalSlide)  
   .addTo(controller);    
});

Dikkat edin triggerHooközellik satır 8. Bu özellik, kullanıcı kaydırma olayını tamamladığında kaydırma efektini sağlamaktan sorumludur. İşlevTimelineMax ekranlarımıza yatay kaydırma efekti sağlamaktan sorumludur.

İlgili dosyaları oluşturduktan sonra, aşağıda gösterildiği gibi yatay kaydırma animasyonunu görebileceksiniz.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved