e
sv

CSS geçişleriyle tek sayfalık uygulamalar oluşturma

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Web sürekli değişiyor. Hızdan yapıya ve kaliteye kadar hiçbir şey çok uzun süre aynı kalmaz. Yapıdan bahsetmişken, eskiden birden çok sayfaya yayılmış olan içerik artık tek bir sayfada toplanabilir.

Bu makalede, en yaygın olarak SPA'lar olarak bilinen tek sayfalık uygulamalara ve bunların web geliştirme dünyasına ne gibi önemli değişiklikler getirdiğine bakacağız.

Bu yazıda şunları keşfedeceğiz:

SPA'lar nelerdir?

Herhangi bir şeye dalmadan önce, SPA'ların ne olduğuna ve geliştiricilerin onlardan önce ne kullandıklarına bakalım.

Yeni bir sayfayı ziyaret etmek istediğinizde tarayıcının varsayılan olarak nasıl yenilendiğini biliyor musunuz? SPA'larda durum farklıdır – sayfadaki içerikler sunucudan yeniden yazılır ve içerik tarayıcı yenilemesi olmadan değişir.

GitHub, Twitter ve hatta Gmail gibi siteler kullandıysanız, SPA'larla zaten iletişime geçmişsiniz demektir. Bu sitelerdeki sekmeler arasında gezinirken tarayıcı yeniden yüklenmez. Sayfalar, hepsi tek bir HTML dosyasına yazılmış gibi (ve öyleydiler) birleştirilir.

SPA'lardan önce, çok sayfalı uygulamalar (MPA'lar) kullanılıyordu ve bazen bugün hala kullanılıyor. Çoğu web tarayıcısı MPA'larla uyumludur ve geliştiricilerin SPA'larda olduğu gibi onlar için ekstra işlevler yazmalarına gerek yoktur. MPA'larda, yeni bir sayfa gibi yeni içeriğin görüntülenmesi gerektiğinde, sunucudan yeni sayfa istenir. Tarayıcı daha sonra yeniden yüklemeye neden olan yeni sayfayı görüntüler.

Bu yazımızda, bir JavaScript animasyon kitaplığı olan GreenSock Animation Platform (GSAP) kullanarak kedi temalı bir SPA oluşturacağız ve buna animasyonlar ekleyeceğiz. Aşağıdaki küçük GIF, son sitemizin nasıl görüneceğinin bir önizlemesidir.

Nihai Sitenin Önizlemesi

SPA'lar nerede kullanılır?

Kulağa ne kadar şaşırtıcı gelse de, SPA'lar belirli yönlerden DKA'ların yerini almaz.

ASP.NET Core ve Azure ile eBook Architect Modern Web Applications'tan bir alıntı, SPA'ları şu durumlarda kullanabileceğinizi söylüyor:

  1. Uygulamanız, birden çok özelliğe sahip zengin bir arayüz göstermeyi amaçlıyor
  2. Küçük veri hacimlerine sahip bir web sitesidir.
  3. Siteniz SEO'ya pek güvenmiyor. SPA'lar tek bir URL içerdiğinden, SEO optimizasyonu gerçekten yanıltıcıdır, çünkü indeksleme ve iyi analitikten yoksundur.
  4. Web sitesi, sosyal medya platformlarına benzer gerçek zamanlı uyarılar veya bildirimler gibi özelliklerden yararlanır.

MPA'ları şu durumlarda kullanma zamanının geldiğini bilirsiniz:

  1. Sitenizin müşteri tarafı gereksinimlerinin karşılanması kolaydır
  2. Uygulamanızın tarayıcıda çalışması için JavaScript'e ihtiyacı yok

SPA'ları mobil cihazlarda kullanma

SPA'lar ayrıca kullanıcıların mobil cihaz uygulamaları arasında sorunsuz bir şekilde gezinmesine olanak tanır. Bir tarayıcıdan cep telefonunuzdan Twitter hesabınıza giriş yaparsanız, SPA etkisine sahip olursunuz. Gezinme her zamanki gibi sorunsuz ve tarayıcı sekmesinde kesinlikle yeniden yükleme yok.

SPA'lar inşa etmek için öğretici

Şimdi tek sayfalık uygulamalar oluşturmaya ilişkin adımları inceleyeceğiz. Aşağıdaki adımlar, çerçeveler hakkında hiçbir bilgi olmadığını varsayar ve HTML, CSS ve Vanilla JavaScript ile SPA'lar oluşturmayı kapsayacaktır. Ara sıra işleri güzelleştirmeyi sevdiğimiz için, CSS sayfa geçişleri de ekleyeceğiz.

Eğitim şunları içerir:

  • Proje dizinleri oluşturma
  • Gerekli bağımlılıkları yükleme. Öncelikle, terminalinize veya komut satırınıza node -v yazarak bilgisayarınızda Node'un kurulu olduğundan emin olun. Düğümün bir sürümü görüntülenirse, gitmeye hazırsınız. Linux kullanıcıları için npm install node yazın veya kullandığınız işletim sistemi ne olursa olsun paket yöneticisini almak için bu bağlantıyı ziyaret edin .
  • Ekspres sunucu kurma
  • İhtiyaçlarınıza göre HTML ve CSS dosyaları oluşturma. Bu, anlayışınızı ilerletmek için sadece birkaç etiket veya küçük bir proje olabilir. Tamamen size ve ne yapmak istediğinize bağlı
  • İşaretlemenizi yeni oluşturulan sunucuda test etme
  • Şeylerin JavaScript tarafına dalmak

Bu eğitim için bu kadar. Bunlar internette göreceğiniz en basit adımlar.

Şaka yapıyorum! Tabii ki, her aşamadan geçeceğiz.

Tüm eller güvertede… Klavye demek istiyorum

Bu bölüm iki kısım olacak. Öncelikle sadece Vanilla JavaScript ile SPA'mızı oluşturacağız. Her şeyi sıfırdan oluşturacağımız için önceden herhangi bir çerçeve bilgisine ihtiyacınız yok.

İkinci bölüm, gezinmeyi daha pürüzsüz ve süslü hale getirmek için CSS sayfa geçişleri ekleyeceğimiz yerdir.

Bölüm I: Bir SPA oluşturmak için HTML, CSS ve JavaScript'i birleştirme

Her şey dizinlerle başlar. Dosyalarımızı depolayacağımız kaplar istiyoruz. Gösteriler için CodeSandbox'ı kullanacağım, ancak kod düzenleyicinizi ve kodunuzu açmaktan çekinmeyin.

Terminalinizde SPA-tut adında bir dizin ve içinde src adında bir dizin oluşturmak istiyoruz.

 terminal komutları
mkdir SPA-tut
cd SPA-tut
mkdir kaynağı
cd kaynağı

İstediğiniz herhangi bir IDE ile SPA-tut açın. Ve index.html dosyası olmadan hiçbir proje tamamlanmadığından, src klasörümüzde bir tane oluşturacağız.

Tüm bir site oluşturmayacağız, yalnızca küçük bir gezinme çubuğu ve gösterilecek birkaç bağlantı içeren bir site oluşturmayacağız. index.html dosyamızda aşağıdaki Markdown'a sahibiz:

 <nav class="navbar">
       <div class="logo">
           <p>Miyav</p>
 
       </div>
 
       <ul class="nav öğeleri">
           <li><a href="/" data-link>Ana Sayfa</a></li>
           <li><a href="/about" data-link>Hakkında</a></li>
           <li><a href="/contact" data-link>Bize ulaşın</a></li>
       </ul>
   </nav>
 
   <div id="home"></div>

data-link data özniteliğini nasıl eklediğimize dikkat edin. Bu, yenileme olmadan bir kaynağa gitmek için Geçmiş API'si pushState() yöntemini kullanır. Bunu şimdi anlamana gerek yok, ama sonunda oraya varacağız.

Stil sayfamız da bir o kadar küçük.

 *{
   dolgu: 0;
   kenar boşluğu: 0;
   kutu boyutlandırma: kenarlık kutusu;
}

.navbar{
   arka plan rengi: pembe;
   dolgu: 20 piksel;
   ekran: esnek;
   justify-content: boşluk-arasında;
   hizalama öğeleri: merkez;
}
.nav-öğeleri{
   ekran: esnek;
}

a{
   metin-dekorasyon: yok;
   Beyaz renk;
   yazı tipi ağırlığı: kalın;
   yazı tipi boyutu: x-büyük;
}
.bağlantı{
   pembe renk;
   yazı tipi boyutu: orta;
}
.logo{
   Beyaz renk;
   yazı tipi ağırlığı: kalın;
   yazı tipi boyutu: xx-büyük;
   yazı tipi stili: eğik;
}
ul{
   liste stili: yok;
}
.navbar ul li{
   sol kenar boşluğu: 15 piksel;
}

#ev{
   ekran: esnek;
   hizalama öğeleri: merkez;
   kenar boşluğu: 20 piksel;

}
.img{
   genişlik: %80;
   yükseklik: %80;
}

Web sitemiz şöyle görünmelidir:

Temel Site

Düz HTML ve CSS bize bir fayda sağlamayacaktır, bu yüzden JavaScript'imize geçelim. İki klasör daha oluşturacağız: tümü src klasöründe bulunan static bir klasörün içinde bir js klasörü ve bir index.js dosyası. Şimdi, kapanış body etiketinin hemen üzerinde bir script etiketi kullanarak bu JS dosyasını index.html bağlamak istiyoruz.

 <script type="module" src="/static/js/index.js"></script>

Projemiz boyunca ES6 içe aktarma ve dışa aktarma işlevlerini kullanacağımız için module türünü buraya ekledik.

Bu öğretici uğruna, sitemiz yanıt vermiyor, ancak daha iyi bir geliştirici olmaktan ve sitenizi diğer cihazlarla uyumlu hale getirmekten çekinmeyin.

Express ile bir SPA sunucusu oluşturma

Bu SPA için sunucumuzu oluşturmak için Express kütüphanesinden faydalanacağız. Endişelenmeyin, takip etmek için kapsamlı Express bilgisine ihtiyacınız yok.

Kaynak dizinden bir server.js dosyası oluşturun. Daha önce de belirttiğim gibi, diğer gerekli paketleri veya kitaplıkları alabilmemiz için önce Node'un kurulu olmasına ihtiyacımız olacak. Terminalinizde:

  1. Bir package.json oluşturmak için npm init -y yazın
  2. Express'i yüklemek için npm i express yazın

Node'u daha önce kurduysanız, bunlar fazla sorun yaşamadan sorunsuz bir şekilde kurulmalıdır.

Sunucu için, az önce yaptığımız server.js dosyasında bir Express uygulaması oluşturmamız gerekecek.

 const ifade = zorunlu('ifade');
const yol = gerektirir('yol');
const ana bilgisayar adı = '127.0.0.1';
sabit bağlantı noktası = 3000;

const uygulama = ekspres();

app.get("/*", (gerekli, res) => {
   res.sendFile(path.resolve(__dirname, 'src', 'index.html'));
});

// 3000 numaralı bağlantı noktasındaki isteği dinle
app.listen(bağlantı noktası, ana bilgisayar adı, () => {
   konsol.log(`Sunucu http://${hostname}:${port}/` konumunda çalışıyor);
 });

Express'i içe aktarmak için require() çağırırız. Uygulamamız yukarıda belirttiğimiz gibi port 3000 üzerinden gönderilen herhangi bir talebi dinler. app.get , belirtilen URL'den istekleri alır. Bu durumda, mutlak yol oluşturulana kadar soldan sağa yol dizisini işlemek için path.resolve() kullanan path.resolve() sendFile() işlevini çağırarak yapar. Yolumuzun /* olmasının nedeni, tarayıcıda URL'ye hangi uç noktayı eklersek ekleyelim sayfanın index.html yönlendirilmesini istememizdir.

app.listen daha sonra 3000 numaralı bağlantı noktasındaki herhangi bir isteği dinler ve ana bilgisayar adı ve bağlantı noktası numarasından geçen bir mesajı günlüğe kaydeder.

Yolu terminalinizden kopyalayıp tarayıcıya yapıştırırsanız, index.html dosyasından aldığımız çıktı görüntülenmelidir. Herhangi bir stili yok ama sonunda bunu kolayca düzeltebiliriz. Bağlantılardan herhangi birine tıklamak yalnızca sayfayı yenileyecektir.

Stilsiz Linkler

Konsolu Failed to load module script... şeklinde bir hata görüyoruz.

Bu sorunu, app.get işlevinden hemen önce server.js dosyamıza aşağıdaki satırı ekleyerek çözebiliriz:

 app.use("/static", express.static(path.resolve(__dirname,'src', 'static')));

İstemci tarafı SPA'yı JavaScript ile düzenleme

Yeter artık sunucu. Gelelim bir şeyler yapan işe.

İlk adım bir yönlendirici oluşturmaktır. Her görünüm (veya sayfa) için içeriği asenkron bir işlev içine yükleyeceğiz. Zaman uyumsuzdur çünkü belirli içerikleri sunucu tarafından yüklemek isteyebiliriz.

Çeşitli rotaları tanımlamak için, her biri kendi rotası olan bir dizi nesne oluşturalım.

 const yönlendirici = zaman uyumsuz () => {
   const yollar = [
       {
           yol: "/",
           görünüm: görünüm: () => console.log("Ana Sayfa")
       },
       {
           yol: "/hakkında",
           görünüm: () => console.log("Hakkımızda")
       },
       {
           yol: "/contact",
           görünüm: () => console.log("İletişim")
       }


   ];

};

bu noktada view sadece görünümleri gösteren bir fonksiyondur. Devam ettikçe bize daha iyi hizmet etmesi için ayarlayacağız.

Ancak, rotamızı tamamen bağlam dışı bir şeye değiştirdiğimizi varsayalım (bununla, URL'mize “anlamsız” uç noktalar eklemekten bahsediyorum). Girilen bir rotanın dizimizin bir elemanı olup olmadığını kontrol etmek istiyoruz. Bunu yapmak için, her bir dizi öğesini gözden geçirmek ve yeni bir nesne döndürmek için map dizisi yöntemini kullanacağız.

 // her rotayı eşleşme için test et
const checkMatchler = route.map(route => {
       dönüş{
           rota: rota,
           isMatch: location.pathname === route.path // bir boole değeri döndürür
       };
   });

konsol.log(checkMatchler);

Rota gerçekten dizideyse, checkMatches rota adını ve true Boole değerini döndürür. Tarayıcıyı yenilersek konsolda hiçbir şey görmeyiz. Bunun nedeni, yönlendirici işlevinin kendisini çağırmamış olmamızdır.

Öyleyse, yönlendirici işlevinin dışında şunu yapalım:

 document.addEventListener('DOMContentLoaded', () => {

   yönlendirici();
})

Sayfamız yüklendiğinde router fonksiyonu çalışacaktır.

Şimdi kendimiz deneyelim.

Bağlantı Rotalarını Kontrol Etme

URL'ye /about eklersek, dizimizin ikinci öğesinin true olduğunu ve diğerlerinin false olarak ayarlandığını görürsünüz. URL'yi dizide olmayan bir rotaya ayarlarsak, isMatch için tüm değerler false olur.

Ama diyelim ki sadece rota adını almak ve bir kontrol yapmak istedik.

 let match = checkMatches.find(checkMatch => checkMatch.isMatch);

   konsol.log(eşleşme);

Şimdi yolu koyduğumuzda, find işlevi diziden eşleşen rotayı seçer ve bize o belirli rotanın dizide olup olmadığını söyleyen bir Boolean döndürür.

Ancak dizide olmayan bir rota eklersek konsolda undefined alırız. not found veya 404 kök tanımlamamız gerekiyor.

 if(!eşleşme){
       maç = {
           rota: rotalar[0]
       }
   }

   konsol.log(match.route.view);

Eğer eşleşme olmazsa 404 sayfamız ana sayfa olan dizi indeksi sıfırdaki görünüm olur. Bu durum için özel bir 404 sayfası oluşturmaya karar verebilirsiniz.

Tarayıcıyı yenilersek ve linklerden herhangi birine tıklarsak yukarıda belirttiğimiz view fonksiyonu çalışacak ve konsolda o view’in adı görünecektir.

Tarayıcı yeniden yüklenmeden görünümler arasında gezinmek ve URL'yi değiştirmek istiyoruz. Bunu yapmak için Geçmiş API'sini uygulamamız gerekecek. Yönlendirici fonksiyonunun tanımından önce, navigateTo adında yeni bir fonksiyon tanımlayalım.

 const navigasyonTo = url => {
   history.pushState(null, null, url);
   yönlendirici();
};

Bu işlevi çağırmak için bir olay dinleyicisi oluşturacağız.

 document.addEventListener('DOMContentLoaded', () => {
   document.body.addEventListener('tık', e => {
       if(e.target.matches('[veri bağlantısı]')){
           e.preventDefault();
           navigasyonTo(e.target.href);
       }
   })

   yönlendirici();
})

Bu nedenle, click etkinliğimiz, bağlantının data-link özniteliğine sahip olup olmadığını kontrol eder. Varsa, tarayıcının yeniden yüklenmesi olan varsayılan eylemi durdurmak ve bu bağlantının href hedeflemek istiyoruz. Bu, yetkilendirilmiş bir olay dinleyicisidir, bu nedenle, görüşlerimize bu bağlantıları içeren içerik eklersek, bağlantılar, tüm bu zaman boyunca açıkladığımız gibi hemen hemen çalışmalıdır.

Sayfanızdaki bağlantılar arasında gezinmeyi deneyin ve gözünüz tarayıcı sekmesinde olsun. Tıkladığınızda sayfa yeniden yükleniyor mu? data-link HTML'den kaldırın ve tekrar tıklamayı deneyin.

popstate farklı sayfaları görüntülemek için popstate'i kullanma

Bağlantılar arasında tıkladıkça, konsoldaki değişiklikleri de görebilirsiniz. Görünümlerin adları görüntülenir. Bir önceki görünüme gitmek için geri düğmesine basmayı denersek, router işlevi çalışmaz, dolayısıyla geri tıkladığımız yeni görünüm görüntülenmez.

O halde DOMContentLoaded olay dinleyicimizden önce popstate olayını dinleyelim.

 window.addEventListener('popstate', yönlendirici);

Tarayıcınızı yenileyin ve sayfalar arasında gidip gelmeyi deneyin. Her sayfa için view işlevinin çalıştığını ve konsolda görüntülendiğini görüyorsunuz.

SPA'nızın görünümlerini görüntüleme

Basit bir console.log gerçekten görünümleri gösteren sınıflara geçelim. js dizininin içinde pages adında yeni bir dizin oluşturacağız.

Her görünüm için sınıflar oluşturacağız, ancak önce diğerlerinin miras alacağı bir sınıf oluşturalım. pages klasöründe bir view.js dosyası oluşturun.

 varsayılan sınıfı dışa aktar{
   yapıcı(){

   }

   setTitle(başlık){
       belge.başlık = başlık;
   }

   zaman uyumsuz getHtml(){
       dönüş '';
   }
}

setTitle yöntemi, görünümler arasında gezinirken görünümün sayfa başlığını güncelleyecektir. getHTML yöntemi, belirli bir görünüm için HTML içeriğini koyacağımız yerdir.

Şimdi yukarıdaki view sınıfını genişleten bir sınıf oluşturacağımız bir Home.js dosyası oluşturalım.

 görünümü './view.js' dosyasından içe aktar

varsayılan sınıfı dışa aktar görünümü genişletir{
   yapıcı(){
       Süper();
       this.setTitle("Ev");
   }

   zaman uyumsuz getHtml(){
       dönüş `

       <div class="metin">
           <h1>Tatlılarınız için bir albüm</h1>
           <p>Meowies, kedilerinizin resimlerini yüklemenize olanak tanır, böylece onları asla kaybetmezsiniz. Lorem ipsum dolor sit amet conectetur adipisicing elit. Consequatur commodi gece yarısı kaçak veritatis. Id temporibus explicabo enim sunt, officiis sapiente.
           Burada <a href="/about" data-link class="link">hakkında</a> okuyun </p>
       </div>

       <div>
           <img src="/static/cats.jpg" alt="şeritlerdeki kedi" class="img">
       </div>


       `;
   }
}

Yapıcımızda, görünümü yansıtmak için başlığı Home olarak ayarladık. getHTML yöntemimizde bir parça HTML döndürdük.

HTML'yi şimdi yönlendiricimize enjekte etmek istiyoruz. index.html dosyasının en üstünde Home sınıfını içe aktarıyoruz.

 Ana Sayfayı './pages/Home.js' dosyasından içe aktar

Rotalar dizimizde, görünüm işlevini de Home sınıfına değiştiriyoruz.

 {
           yol: "/",
           görünüm: Ana sayfa
       },

Ve son adım olarak:

 const görünüm = yeni match.route.view();

   Document.querySelector("#home".innerHTML = wait view.getHtml();

Tarayıcıyı yenilersek, Ana Sayfa görünümümüz biraz şöyle görünür:

Düzenlenen Ana Sayfa

Sonunda bir about bağlantısını nasıl eklediğime dikkat edin? Tıklarsanız, tarayıcı yenilemesi olmadığını fark edeceksiniz. Bunun nedeni daha önce bahsettiğim delege edilmiş etkinlik.

Diğer görünümler için sınıflar oluşturmak, buradan hemen hemen aynı işlem olacaktır. Oluşturduğumuz her yeni görünüm için view sınıfını genişleteceğiz ve yeni görünümün sınıfını index.html dosyamıza aktaracağız.

Tarayıcı görüntüsünü CSS ile düzenleme

CSS dosyamızı biraz hareket ettirelim ki index.html dosyamıza etki etsin. Statik klasörün içinde bir css klasörü oluşturalım ve bunun üzerine style.css dosyamızı styles.css . HTML dosyamızı stil sayfasına bağlarsak, web sitemiz böyle bir şeye dönüşür.

Stilize Ana Sayfa

Fantezi bir şey değil, ancak size nasıl çalıştığını göstermeye yetecek kadar.

Diğer görünümleri oluşturmak için Home.js için yaptığımız gibi yapardık. Bu makalenin basit görevinin bu olduğunu söyleyin. Seninki benimkinden daha iyi görünmeli.

Tüm görünümleri oluşturduktan sonra, Hakkında ve İletişim bölümlerim biraz şöyle görünür:

Hakkında Bölümü Düzenlendi

Düzenlenen İletişim Bölümü

Dediğim gibi, zevkli hiçbir şey yok. Bağlantının değiştiğini ve sayfa başlığının güncellendiğini göreceksiniz (ekran görüntülerime dahil değil).

İşte aldın. Tamamen işlevsel tek sayfalık bir uygulama. Şimdi bazı sayfa geçişleri eklemek için.

Bölüm II: CSS sayfa geçişleri

Bu bölüm benim tüm zamanların favorim. Düzgün sayfa geçişleri oluşturmak için bir JavaScript animasyon kitaplığı ve yol boyunca bize yardımcı olması için biraz CSS kullanacağız.

Kullanacağım animasyon kitaplığı GSAP. Animasyonları sitenize ve yalnızca birkaç JavaScript satırına uygulamayı nispeten kolaylaştırır. GSAP hakkında daha fazla bilgi edinmek ve süper hile sayfalarını ücretsiz almak için buradan bakın .

GreenSock Animasyon Platformunu (GSAP) Yükleme

Bu öğretici uğruna, CDN kullanarak projemize GSAP'yi tanıtacağız.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

Bunu, kapanış <body> etiketinizden önce ekleyebilirsiniz.

Eğlenceli kısım: CSS ile kaydırma efekti

Uygulamamızda bir çeşit kayma efekti yaratmak istiyoruz. Bunu yapmak için içeriğini açıklamadan önce sayfamızda kayan bir şeye ihtiyacımız olacak.

HTML'mizin altına fazladan bir div etiketi ekleyelim ve ona bir slider sınıfı verelim.

 <div class="slider"></div>

styles.css aşağıdakileri ekleyerek kaydırıcıyı şekillendireceğiz:

 .kaydırıcı{
  konum:sabit;
  üst:0;
  sol: 0;
  arka plan rengi: soluk kırmızı;
  genişlik: %100;
  yükseklik: %100;
  dönüştürmek: çevirY(100%);
}

Sayfayı yenilerseniz, gerçekten hiçbir şey değişmez. Kaydırıcı oradadır, ancak transform özelliği onu sayfa içeriğinin altında tutar, bu nedenle onu gerçekten görmeyiz.

Sayfamızı ilk açtığımızda kaydırıcının sayfamız üzerinde yukarı doğru kaymasını istiyoruz. Bu, GSAP'nin devreye girdiği zamandır. index.js dosyamızda, kullanmaya başlamadan önce GSAP'yi başlatmalıyız. Sayfa yüklemesinde animasyon istediğimiz için, GSAP'ımızı sınıf içe aktarmalarımızın hemen altında başlatacağız.

 const tl = gsap.timeline({ varsayılanlar: {ease:'power2.out'} });

Yukarıdaki satır, zaman çizelgemizi tanımlar ve her şeyi varsayılanlara ayarlar.

İlk animasyonumuz, sayfamızdaki konumundan yukarı doğru kayan kaydırıcı olacaktır.

 tl.to('.slider', {y: "-100%", süre:1.2});

Yaptığımız şey, kaydırıcı sınıfını hedeflemek için beyan ettiğimiz zaman çizelgesini kullanmak. y: “-100%” , başlangıçta CSS'mize ayarladığımız çeviriY translateY(100%) öğesinin yerini alır. duration:1.2 sadece zamanlama için ayarlanır. Yani sayfamız ilk yüklendiğinde kaydırıcımız sayfa içeriğimiz üzerinde yukarı doğru kayar.

Ama animasyon hala bana pek doğru görünmüyor. Daha iyi hale getirmek için, kaydırıcı yukarı çıktıktan hemen sonra sayfa içeriğimizin de yukarı kaymasını istiyoruz. Bunu yapmak için, sayfa içeriğimizi içerdiğinden, HTML'mizdeki home kimliğini hedeflememiz gerekecek.

Kaydırıcı animasyonundan hemen sonra şunu ekleyeceğiz:

 tl.to('#ev', {y: "0%", süre:1.2}, "-=1");

Daha önce olduğu gibi, home kimliğini hedefledik ve bir süre belirledik. Ek -=1 , sayfa içeriğinin kaydırıcıdan hemen sonra yukarı kaymasını sağlar. Çıkarırsak, biraz gecikme fark edeceksiniz.

Ama bu mu?

Hayır. Bahsettiğimiz görüşler arasına o yumuşak geçişi eklemedik. Artık sürecin nasıl çalıştığını gördüğünüze göre, görünümler için geçişler eklemek o kadar zor olmayacak.

Kullanıcı bağlantıları her tıkladığında yumuşak bir geçiş oluşturmak istiyoruz, bu nedenle tıklama etkinliğimize animasyonlar ekleyeceğiz.

Düzeltilmiş JavaScript'imiz daha sonra şöyle görünecektir:

 document.addEventListener('DOMContentLoaded', () => {
   document.body.addEventListener('tık', e => {
       e.preventDefault();
       tl.to('.slider', {y: "%100", süre:0});

       if(e.target.matches('[veri bağlantısı]')){
           tl.to('.slider', {y: "-100%", süre:1.2});
           tl.fromTo('#home', {opacity: 0}, {opacity:1, süre:0.5});

           navigasyonTo(e.target.href);
       }

   })

   yönlendirici();
})

Kaydırıcımız yükseldikten sonra yerinde kaldığını unutmayın. Yani kullanıcı tıkladığında kaydırıcı aşağı iniyor ve tekrar yukarı çıkıyor. İlk animasyonun süresi sıfıra ayarlanmıştır, bu nedenle aşağı kaydığını fark etmeyeceksiniz. Animasyon burada ayarlanır, böylece kullanıcı bir bağlantıyı her tıkladığında devam eder.

İşleri daha da pürüzsüz hale getirmek için, bir tıklamada kaydırıcı yukarı çıktığında, sayfa içeriğinin opaklığının hızla değişmesini ve hoş bir karartma oluşturmasını istiyoruz.

 tl.fromTo('#home', {opacity: 0}, {opacity:1, süre:0.5});

fromTo , animasyonun bir başlangıç ve bitiş noktası olduğunu belirtir. Sıfır opaklıkla başlar ve 0,5 saniyede bir opaklığa gider.

Animasyonu ayarladıktan sonra SPA'mız şu şekilde görünüyor:

Nihai Site Önizlemesi

Her sayfada güzel bir kaydırıcımız ve güzel bir solmamız var.

Çözüm

Bu, bu makalenin sonunu işaret ediyor. SPA'ların ne olduğunu, sıfırdan nasıl oluşturulacağını ve görünümler arasında nasıl düzgün sayfa geçişleri ekleneceğini inceledik.

Bu projenin tam kodunu kontrol etmek için buradaki Github repo bağlantısını kullanın .

Umarım bu makale size iyi hizmet eder. Gerektiğinde değişiklik yapmaktan çekinmeyin ve GSAP belgelerine buradan göz atın. Animasyonlarınızı daha pürüzsüz ve daha iyi hale getirmenize yardımcı olabilecek ücretsiz bir hile sayfası var.

CSS geçişleriyle tek sayfalık uygulamalar oluşturma yazısı ilk olarak LogRocket Blog'da göründü.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

CSS geçişleriyle tek sayfalık uygulamalar oluşturma