CSS ve JavaScript ile Özel Tam Sayfa Kaydırıcı Oluşturun

Özel tam ekran düzenleriyle pratik olarak günlük olarak çok çalışıyorum. Genellikle, bu düzenler önemli miktarda etkileşim ve animasyon anlamına gelir. İster zaman tarafından tetiklenen karmaşık bir geçiş zaman çizelgesi isterse kaydırma tabanlı kullanıcı odaklı bir dizi olay olsun, çoğu durumda UI, birkaç ince ayar ve değişiklikle kullanıma hazır bir eklenti çözümü kullanmaktan fazlasını gerektirir. . Öte yandan, birçok JavaScript geliştiricisinin işlerini kolaylaştırmak için favori JS eklentisine ulaşma eğiliminde olduğunu görüyorum, ancak görev belirli bir eklentinin sağladığı tüm özelliklere ihtiyaç duymayabilir.

Yasal Uyarı: Mevcut birçok eklentiden birini kullanmanın elbette avantajları vardır. Çok fazla kodlama yapmak zorunda kalmadan ihtiyaçlarınıza göre ince ayar yapmak için kullanabileceğiniz çeşitli seçenekler elde edeceksiniz. Ayrıca, çoğu eklenti yazarı kodlarını optimize eder, tarayıcılar arası ve platformlar arası uyumlu hale getirir vb. Ama yine de, sağladığı bir veya iki farklı şey için projenize dahil edilen tam boyutlu bir kitaplık elde edersiniz. Herhangi bir üçüncü taraf eklentisi kullanmanın doğal olarak kötü bir şey olduğunu söylemiyorum, bunu projelerimde günlük olarak yapıyorum, sadece her yaklaşımın artılarını ve eksilerini olduğu gibi tartmak genellikle iyi bir fikirdir. kodlamada iyi bir uygulama. Kendi işinizi bu şekilde yapmaya gelince, ne aradığınızı bilmek biraz daha fazla kodlama bilgisi ve deneyimi gerektirir, ancak sonunda, bir şeyi ve bir şeyi yalnızca bir şekilde yapan bir kod parçası almalısınız. olmasını istiyorsun.

Bu makale, özel içerik animasyonu ile tam ekran kaydırma ile tetiklenen bir kaydırıcı düzeni geliştirmede saf bir CSS/JS yaklaşımını göstermeyi amaçlamaktadır. Bu küçültülmüş yaklaşımda, bir CMS arka ucundan teslim edilmesini beklediğiniz temel HTML yapısını, modern CSS (SCSS) yerleşim tekniklerini ve tam etkileşim için vanilya JavaScript kodlamasını ele alacağım. Bu kavram, daha büyük ölçekli bir eklentiye kolayca genişletilebilir ve/veya özünde hiçbir bağımlılığa sahip olmayan çeşitli uygulamalarda kullanılabilir.

Oluşturacağımız tasarım, her projenin öne çıkan görselleri ve başlıkları ile minimalist bir mimar portföy vitrinidir. Animasyonlu tam kaydırıcı şöyle görünecek:

Demoyu buradan kontrol edebilir ve daha fazla ayrıntı için Github depoma erişebilirsiniz.

HTML'ye Genel Bakış

İşte birlikte çalışacağımız temel HTML:

 <div> <div class="mask"> <!-- Textual logo will go here --> </div> <div> <div class="slides"> <!-- Featured image slides will go here --> </div> <div class="slides mask"> <!-- Slide titles will go here --> </div> </div> <div> <!-- Static info on the right --> </div> <nav> <!-- Current slide indicator --> </nav> </div>

hero-slider kimliğine sahip bir div, ana sahibimizdir. İçeride, düzen bölümlere ayrılmıştır:

• Logo (statik bir bölüm)
• Ağırlıklı olarak üzerinde çalışacağımız slayt gösterisi
• Bilgi (statik bir bölüm)
• O anda aktif olan slaydı ve toplam slayt sayısını gösterecek olan kaydırıcı gezinme

Bu makaledeki ilgi noktamız bu olduğu için slayt gösterisi bölümüne odaklanalım. Burada iki parçamız var - ana ve aux . Main, aux görüntü başlıklarını tutarken, öne çıkan görüntüleri içeren div'dir. Bu iki tutucunun içindeki her bir slaytın yapısı oldukça basittir. Burada ana tutucunun içinde bir resim slaytımız var:

 <div class="slide" data-index="0"> <div class="abs-mask"> <div class="slide-image"> </div> </div> </div>

İndeks verileri özniteliği, slayt gösterisinde nerede olduğumuzu takip etmek için kullanacağımız şeydir. İlginç bir geçiş efekti oluşturmak için kullanacağımız abs-mask div'i ve slayt görüntüsü div'i, belirli özellikli görüntüyü içerir. Görüntüler, doğrudan bir CMS'den geliyormuş gibi satır içi olarak oluşturulur ve son kullanıcı tarafından ayarlanır.

Benzer şekilde, başlık yardımcı tutucunun içinde kayar:

 <h2 class="slide-title slide" data-index="0"><a href="#">#64 Paradigm</a></h2>

Her slayt başlığı, ilgili veri özniteliğine ve o projenin tek sayfasına yönlendirebilecek bir bağlantıya sahip bir H2 etiketidir.

HTML'mizin geri kalanı da oldukça basittir. En üstte bir logomuz, kullanıcıya hangi sayfada olduklarını söyleyen statik bilgi, bazı açıklamalar ve kaydırıcı mevcut/toplam göstergesi var.

CSS'ye Genel Bakış

Kaynak CSS kodu, daha sonra tarayıcının yorumlayabileceği normal CSS'ye derlenen bir CSS ön işlemcisi olan SCSS'de yazılır. SCSS size değişkenler, iç içe seçim, karışımlar ve diğer harika öğeleri kullanma avantajı sağlar, ancak tarayıcının kodu gerektiği gibi okuması için CSS'de derlenmesi gerekir. Bu eğitimin amacı doğrultusunda, takımların minimum düzeyde olmasını istediğim için derlemeyi halletmek için Scout-App kullandım.

Temel yan yana düzeni işlemek için flexbox kullandım. Buradaki fikir, slayt gösterisinin bir tarafta ve bilgi bölümünün diğer tarafta olmasıdır.

 #hero-slider { position: relative; height: 100vh; display: flex; background: $dark-color; } #slideshow { position: relative; flex: 1 1 $main-width; display: flex; align-items: flex-end; padding: $offset; } #info { position: relative; flex: 1 1 $side-width; padding: $offset; background-color: #fff; }

Konumlandırmaya geçelim ve tekrar slayt gösterisi bölümüne odaklanalım:

 #slideshow { position: relative; flex: 1 1 $main-width; display: flex; align-items: flex-end; padding: $offset; } #slides-main { @extend %abs; &:after { content: ''; @extend %abs; background-color: rgba(0, 0, 0, .25); z-index: 100; } .slide-image { @extend %abs; background-position: center; background-size: cover; z-index: -1; } } #slides-aux { position: relative; top: 1.25rem; width: 100%; .slide-title { position: absolute; z-index: 300; font-size: 4vw; font-weight: 700; line-height: 1.3; @include outlined(#fff); } }

Ana kaydırıcıyı kesinlikle konumlandırılacak şekilde ayarladım ve arka plan görüntülerinin background-size: cover özelliğini kullanarak tüm alanı genişletmesini sağladım. Slayt başlıklarına karşı daha fazla kontrast sağlamak için, bindirme görevi gören mutlak bir sözde öğe ayarladım. Slayt başlıklarını içeren aux kaydırıcı, ekranın alt kısmında ve görüntülerin üstünde konumlandırılmıştır.

Bir seferde yalnızca bir slayt görüneceğinden, her başlığı da mutlak olacak şekilde ayarladım ve herhangi bir kesinti olmadığından emin olmak için tutucu boyutunu JS aracılığıyla hesaplattım, ancak bunun hakkında daha fazla bilgi gelecek bölümlerimizden birinde. Burada, genişletme adı verilen bir SCSS özelliğinin kullanımını görebilirsiniz:

 %abs { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }

Mutlak konumlandırmayı çok kullandığım için, çeşitli seçicilerde kolayca bulunabilmesi için bu CSS'yi genişletilebilir hale getirdim. Ayrıca, başlıkları ve ana kaydırıcı başlığını şekillendirirken DRY yaklaşımı sağlamak için “anahatları” adlı bir karışım oluşturdum.

 @mixin outlined($color: $dark-color, $size: 1px) { color: transparent; -webkit-text-stroke: $size $color; }

Bu düzenin statik kısmına gelince, bununla ilgili karmaşık bir şey yok ama burada, normal akışı yerine Y ekseninde olması gereken metni konumlandırırken ilginç bir yöntem görebilirsiniz:

 .slider-title-wrapper { position: absolute; top: $offset; left: calc(100% - #{$offset}); transform-origin: 0% 0%; transform: rotate(90deg); @include outlined; }

Bu tür bir düzen için gerçekten yeterince kullanılmadığını bulduğum için transform-origin özelliğine dikkatinizi çekmek istiyorum. Bu öğenin konumlandırılma şekli, bağlantı noktasının öğenin sol üst köşesinde kalması, döndürme noktasını ayarlaması ve farklı ekran boyutları söz konusu olduğunda metnin bu noktadan sürekli olarak aşağı doğru akmasını sağlamasıdır.

Daha ilginç bir CSS bölümüne bakalım - ilk yükleme animasyonu:

Genellikle, bu tür senkronize animasyon davranışı bir kitaplık kullanılarak elde edilir - örneğin GSAP, oradaki en iyilerden biridir, mükemmel oluşturma yetenekleri sağlar, kullanımı kolaydır ve geliştiricinin programlı olarak öğe zincirlemesini sağlayan zaman çizelgesi işlevine sahiptir. birbirine geçişler.

Ancak, bu saf bir CSS/JS örneği olduğu için burada gerçekten basit olmaya karar verdim. Bu nedenle, her öğe varsayılan olarak başlangıç ​​konumuna ayarlanır - ya dönüşüm ya da opaklıkla gizlenir ve JS'miz tarafından tetiklenen kaydırıcı yükü üzerine gösterilir. Tüm geçiş özellikleri, hoş bir görsel deneyim sağlayan her geçişin diğerine devam etmesiyle doğal ve ilginç bir akış sağlamak için manuel olarak ayarlanmıştır.

 #logo:after { transform: scaleY(0); transform-origin: 50% 0; transition: transform .35s $easing; } .logo-text { display: block; transform: translate3d(120%, 0, 0); opacity: 0; transition: transform .8s .2s, opacity .5s .2s; } .current, .sep:before { opacity: 0; transition: opacity .4s 1.3s; } #info { transform: translate3d(100%, 0, 0); transition: transform 1s $easing .6s; } .line { transform-origin: 0% 0; transform: scaleX(0); transition: transform .7s $easing 1s; } .slider-title { overflow: hidden; >span { display: block; transform: translate3d(0, -100%, 0); transition: transform .5s 1.5s; } }

Burada görmenizi istediğim bir şey varsa, o da transform özelliğinin kullanılmasıdır. Bir HTML öğesini taşırken, ister geçiş ister animasyon olsun, transform özelliğinin kullanılması önerilir. İş oluşturmaya geldiğinde yeterli sonuç vermeyen kenar boşluğu veya dolgu, hatta üst, sol vb. ofsetleri kullanma eğiliminde olan birçok insan görüyorum.

Etkileşimli davranış eklerken CSS'nin nasıl kullanılacağını daha derinlemesine anlamak için aşağıdaki makaleyi yeterince tavsiye edemedim.

Bu, bir Chrome mühendisi olan Paul Lewis'e aittir ve ister CSS ister JS olsun, web'de piksel oluşturma hakkında bilinmesi gereken hemen hemen her şeyi kapsar.

JavaScript'e Genel Bakış ve Kaydırıcı Mantığı

JavaScript dosyası iki farklı işleve bölünmüştür.

Burada ihtiyacımız olan tüm işlevselliklerle ilgilenen heroSlider işlevi ve birkaç yeniden kullanılabilir yardımcı işlev eklediğim utils işlevi. Bunları projenizde yeniden kullanmak istiyorsanız, bağlam sağlamak için bu yardımcı işlevlerin her birini yorumladım.

Ana işlev, iki dalı olacak şekilde kodlanmıştır: init ve resize . Bu dallar, ana işlevin geri dönüşü aracılığıyla kullanılabilir ve gerektiğinde çağrılır. init , ana işlevin başlatılmasıdır ve pencere yükleme olayında tetiklenir. Benzer şekilde, yeniden boyutlandırma dalı, pencerenin yeniden boyutlandırılmasında tetiklenir. Yeniden boyutlandırma işlevinin tek amacı, başlık yazı tipi boyutu değişebileceğinden, pencere yeniden boyutlandırmada başlığın kaydırıcı boyutunu yeniden hesaplamaktır.

heroSlider işlevinde, ihtiyaç duyacağımız tüm verileri ve seçicileri içeren bir kaydırıcı nesnesi sağladım:

 const slider = { hero: document.querySelector('#hero-slider'), main: document.querySelector('#slides-main'), aux: document.querySelector('#slides-aux'), current: document.querySelector('#slider-nav .current'), handle: null, idle: true, activeIndex: -1, interval: 3500 };

Bir yan not olarak, örneğin React kullanıyorsanız, verileri durumda saklayabileceğiniz veya yeni eklenen kancaları kullanabileceğiniz için bu yaklaşım kolayca uyarlanabilir. Noktayı korumak için, buradaki anahtar/değer çiftlerinin her birinin neyi temsil ettiğini inceleyelim:

• İlk dört özellik, işleyeceğimiz DOM öğesine bir HTML referansıdır.
• handle özelliği, otomatik oynatma işlevini başlatmak ve durdurmak için kullanılacaktır.
• idle özelliği, slayt geçiş halindeyken kullanıcının kaydırmaya zorlamasını önleyen bir bayraktır.
• activeIndex , o anda aktif olan slaydı takip etmemizi sağlar
• interval , kaydırıcının otomatik oynatma aralığını belirtir

Kaydırıcı başlatıldığında, iki işlevi çağırırız:

 setHeight(slider.aux, slider.aux.querySelectorAll('.slide-title')); loadingAnimation();

setHeight işlevi, aux kaydırıcımızın yüksekliğini maksimum başlık boyutuna göre ayarlamak için bir yardımcı işlev işlevine ulaşır. Bu şekilde, yeterli boyutlandırmanın sağlanmasını ve içeriği iki satıra düştüğünde bile hiçbir slayt başlığının kesilmemesini sağlıyoruz.

loadingAnimation işlevi, giriş CSS geçişlerini sağlayan öğeye bir CSS sınıfı ekler:

 const loadingAnimation = function () { slider.hero.classList.add('ready'); slider.current.addEventListener('transitionend', start, { once: true }); }

Kaydırıcı göstergemiz CSS geçiş zaman çizelgesindeki son öğe olduğundan, geçişinin bitmesini bekler ve başlatma işlevini çağırırız. Ek parametreyi nesne olarak sağlayarak bunun yalnızca bir kez tetiklenmesini sağlıyoruz.

Başlat fonksiyonuna bir göz atalım:

 const start = function () { autoplay(true); wheelControl(); window.innerWidth <= 1024 && touchControl(); slider.aux.addEventListener('transitionend', loaded, { once: true }); }

Böylece düzen bittiğinde, ilk geçişi loadingAnimation işlevi tarafından tetiklenir ve başlatma işlevi devralır. Ardından otomatik oynatma işlevini tetikler, tekerlek kontrolünü etkinleştirir, bir dokunmatik cihazda mı yoksa masaüstü cihazda mı olduğumuzu belirler ve uygun CSS sınıfını eklemek için başlık slaydının ilk geçişini bekler.

Otomatik oynatma

Bu düzendeki temel özelliklerden biri otomatik oynatma özelliğidir. İlgili fonksiyonun üzerinden geçelim:

 const autoplay = function (initial) { slider.autoplay = true; slider.items = slider.hero.querySelectorAll('[data-index]'); slider.total = slider.items.length / 2; const loop = () => changeSlide('next'); initial && requestAnimationFrame(loop); slider.handle = utils().requestInterval(loop, slider.interval); }

İlk olarak, kaydırıcının otomatik oynatma modunda olduğunu belirten otomatik oynatma bayrağını true olarak ayarladık. Bu bayrak, kullanıcı kaydırıcıyla etkileşime girdikten sonra otomatik oynatmanın yeniden tetiklenip tetiklenmeyeceği belirlenirken kullanışlıdır. Daha sonra, aktif sınıflarını değiştireceğimiz ve kaydırıcının sahip olacağı toplam yinelemeleri hesaplayacağımız için tüm kaydırıcı öğelerine (slaytlara) atıfta bulunuruz. ancak her ikisini de aynı anda değiştiren yalnızca bir "kaydırıcı".

Buradaki kodun en ilginç kısmı döngü işlevidir. Bir dakika içinde geçeceğimiz kaydırma yönünü sağlayan slideChange çağırır, ancak döngü işlevi birkaç kez çağrılır. Neden görelim.

İlk bağımsız değişken doğru olarak değerlendirilirse, döngü işlevini requestAnimationFrame geri çağrısı olarak çağırırız. Bu, yalnızca sürgü değişimini anında tetikleyen ilk sürgü yükü üzerine gerçekleşir. requestAnimationFrame kullanarak, bir sonraki çerçeveyi yeniden boyamadan hemen önce sağlanan geri aramayı yürütürüz.

Ancak, otomatik oynatma modunda slaytlar arasında ilerlemeye devam etmek istediğimizden, aynı işlevin tekrarlanan bir çağrısını kullanacağız. Bu genellikle setInterval ile sağlanır. Ancak bu durumda, yardımcı işlevlerden birini kullanacağız – requestInterval . setInterval gayet iyi çalışsa da requestAnimationFrame , requestInterval dayanan ve daha performanslı bir yaklaşım sağlayan gelişmiş bir kavramdır. Yalnızca tarayıcı sekmesi etkin olduğunda işlevin yeniden tetiklenmesini sağlar.

Bu harika makaledeki bu konsept hakkında daha fazla bilgiyi CSS hilelerinde bulabilirsiniz. Lütfen bu fonksiyondan dönüş değerini slider.handle özelliğimize atadığımızı unutmayın. İşlevin döndürdüğü bu benzersiz kimlik bizim için kullanılabilir ve bunu daha sonra cancelAnimationFrame kullanarak otomatik oynatmayı iptal etmek için kullanacağız.

Slayt Değişikliği

slideChange işlevi, tüm konseptteki ana işlevdir. Otomatik oynatma veya kullanıcı tetiklemesi ile slaytları değiştirir. Kaydırıcı yönünün farkındadır, döngü sağlar, böylece son slayta geldiğinizde ilk slayta devam edebilirsiniz. İşte nasıl kodladım:

 const changeSlide = function (direction) { slider.idle = false; slider.hero.classList.remove('prev', 'next'); if (direction == 'next') { slider.activeIndex = (slider.activeIndex + 1) % slider.total; slider.hero.classList.add('next'); } else { slider.activeIndex = (slider.activeIndex - 1 + slider.total) % slider.total; slider.hero.classList.add('prev'); } //reset classes utils().removeClasses(slider.items, ['prev', 'active']); //set prev const prevItems = [...slider.items] .filter(item => { let prevIndex; if (slider.hero.classList.contains('prev')) { prevIndex = slider.activeIndex == slider.total - 1 ? 0 : slider.activeIndex + 1; } else { prevIndex = slider.activeIndex == 0 ? slider.total - 1 : slider.activeIndex - 1; } return item.dataset.index == prevIndex; }); //set active const activeItems = [...slider.items] .filter(item => { return item.dataset.index == slider.activeIndex; }); utils().addClasses(prevItems, ['prev']); utils().addClasses(activeItems, ['active']); setCurrent(); const activeImageItem = slider.main.querySelector('.active'); activeImageItem.addEventListener('transitionend', waitForIdle, { once: true }); }

Buradaki fikir, HTML'den aldığımız veri dizinine göre aktif slaydı belirlemektir. Her adımı ele alalım:

1. Kaydırıcı boşta bayrağını false olarak ayarlayın. Bu, slayt değişikliğinin devam ettiğini ve tekerlek ve dokunma hareketlerinin devre dışı bırakıldığını gösterir.
2. Önceki kaydırıcı yönü CSS sınıfı sıfırlanır ve yenisini kontrol ederiz. Yön parametresi, otomatik oynatma işlevinden geliyorsak varsayılan olarak 'sonraki' olarak veya kullanıcı tarafından çağrılan bir işlev tarafından wheelControl veya touchControl .
3. Yöne bağlı olarak, aktif slayt indeksini hesaplıyoruz ve kaydırıcıya mevcut yön CSS sınıfını sağlıyoruz. Bu CSS sınıfı, hangi geçiş efektinin kullanılacağını belirlemek için kullanılır (örneğin sağdan sola veya soldan sağa)
4. Slaytlar, CSS sınıflarını kaldıran ancak tek bir DOM öğesi yerine bir NodeList'te çağrılabilen başka bir yardımcı işlev kullanarak "durum" CSS sınıflarını (önceki, etkin) sıfırlar. Daha sonra, yalnızca önceki ve şu anda etkin olan slaytlar, kendilerine eklenen bu CSS sınıflarını alır. Bu, CSS'nin yalnızca bu slaytları hedeflemesine ve yeterli geçişi sağlamasına olanak tanır.
5. setCurrent , activeIndex'e dayalı olarak kaydırıcı göstergesini güncelleyen bir geri aramadır.
6. Son olarak, daha önce kullanıcı tarafından kesintiye uğramışsa otomatik oynatmayı yeniden başlatan waitForIdle geri çağrısını tetiklemek için aktif görüntü slaytının geçişinin bitmesini bekleriz.

Kullanıcı Kontrolleri

Ekran boyutuna bağlı olarak, tekerlek ve dokunma olmak üzere iki tür kullanıcı denetimi ekledim. Tekerlek kontrolü:

 const wheelControl = function () { slider.hero.addEventListener('wheel', e => { if (slider.idle) { const direction = e.deltaY > 0 ? 'next' : 'prev'; stopAutoplay(); changeSlide(direction); } }); }

Burada çarkı bile dinliyoruz ve kaydırıcı o anda boş moddaysa (şu anda bir slayt değişikliğini canlandırmıyor) çark yönünü belirliyoruz, devam ediyorsa otomatik oynatma işlevini durdurmak için stopAutoplay çağırıyor ve slaytı yöne göre değiştiriyoruz. stopAutoplay işlevi, otomatik oynatma bayrağımızı yanlış değere ayarlayan ve uygun tanıtıcıyı geçirerek cancelRequestInterval yardımcı program işlevini çağırarak aralığımızı iptal eden basit bir işlevden başka bir şey değildir:

 const stopAutoplay = function () { slider.autoplay = false; utils().clearRequestInterval(slider.handle); }

wheelControl benzer şekilde, dokunma hareketleriyle ilgilenen touchControl :

 const touchControl = function () { const touchStart = function (e) { slider.ts = parseInt(e.changedTouches[0].clientX); window.scrollTop = 0; } const touchMove = function (e) { slider.tm = parseInt(e.changedTouches[0].clientX); const delta = slider.tm - slider.ts; window.scrollTop = 0; if (slider.idle) { const direction = delta < 0 ? 'next' : 'prev'; stopAutoplay(); changeSlide(direction); } } slider.hero.addEventListener('touchstart', touchStart); slider.hero.addEventListener('touchmove', touchMove); }

İki olayı dinliyoruz: touchstart ve touchmove . Ardından aradaki farkı hesaplıyoruz. Negatif bir değer döndürürse, kullanıcı sağdan sola kaydırdıkça bir sonraki slayda geçeriz. Öte yandan, değer pozitifse, yani kullanıcının soldan sağa kaydırdığı anlamına gelirse, yön "önceki" olarak geçirilerek slideChange tetikleriz. Her iki durumda da otomatik oynatma işlevi durdurulur.

Bu oldukça basit bir kullanıcı hareketi uygulamasıdır. Bunun üzerine inşa etmek için, slideChange tetiklemek için önceki/sonraki düğmeleri ekleyebilir veya dizinine dayalı olarak doğrudan bir slayta gitmek için madde işaretli bir liste ekleyebiliriz.

CSS Üzerine Özet ve Son Düşünceler

İşte, modern geçiş efektleriyle standart olmayan bir kaydırıcı düzenini kodlamanın saf bir CSS/JS yolu.

Umarım bu yaklaşımı bir düşünce yolu olarak faydalı bulursunuz ve geleneksel olarak tasarlanmamış bir projeyi kodlarken ön uç projelerinizde benzer bir şey kullanabilirsiniz.

Görüntü geçiş efektiyle ilgilenenler için, bunu önümüzdeki birkaç satırda ele alacağım.

Giriş bölümünde sağladığım slaytların HTML yapısını tekrar ziyaret edersek, her resim slaytının etrafında CSS sınıfı abs-mask ile birlikte bir div olduğunu görürüz. Bu div yaptığı şey, görünür görüntünün bir kısmını overflow:hidden kullanarak ve görüntüden farklı bir yönde kaydırarak belirli bir miktarda gizlemesidir. Örneğin, bir önceki slaydın kodlanma şekline bakarsak:

 &.prev { z-index: 5; transform: translate3d(-100%, 0, 0); transition: 1s $easing; .abs-mask { transform: translateX(80%); transition: 1s $easing; } }

Önceki slaytın X ekseninde -%100'lük bir kayması vardır, bu onu geçerli slaytın soluna taşır, ancak iç abs-mask div %80 sağa çevrilir ve daha dar bir görünüm sağlar. Bu, aktif slayt için daha büyük bir z-endeksine sahip olmakla birlikte, bir tür örtü efektiyle sonuçlanır - aktif görüntü bir öncekini kaplarken aynı zamanda tam görünümü sağlayan maskeyi hareket ettirerek görünür alanını genişletir.