Sayfalardan sayfalara geçişlerde meydana gelen içerik boşluğu sorunları, uzun süreli yüklenme veya kullanıcıyı içerikten uzaklaştıran herhangi bir durum olduğunda kullanıcıların deneyimleri bölünecek ve bu da onların sayfayı terk etme ihtimalini arttıracaktır. Kullanıcıların memnuniyeti azaldıkça sayfadan ayrılma ihtimalleri oldukça yüksek olacaktır. Kullanıcıların odağını sayfada tutmak, dikkat çekmek ve gerekli görsel canlılığı ortaya koymak size olumlu geri dönüşler kazandıracaktır.

Sayfa geçişleri görsel olarak zarif ve eğlenceli olabilir. Bunu başardığınızda bir marka yaratmak sizin için daha kolay olmaya başlayacaktır. Sayfa geçişlerinizi tasarlamanız ve istediğiniz etkiyi elde etmeniz için bu konuda atılması gereken adımları bir bir ele alacağız. Bu konuda nelerin yapılıp, nelerin yapılmaması gerektiği bu yazımızda inceleyeceğimiz önemli noktalardan biri olacak.

Yukarıdaki örnekte, Google Material Design ışığında, animasyonların sayfalar arasında konumsal ve aşamalı olarak  ne şekilde kullanıldığını rahatlıkla görebilirsiniz. Pek çok mobil uygulamasında görüntüler arası geçişlerin oldukça başarılı olduğunu fark edebilirsiniz. Bizler de bu gibi örnekleri kendi web sitelerimize uygulamanın keyfini yaşayabiliriz. Web sitesi kullanıcılarımıza harika geçişler sunarak her geçiş noktasında ayrı bir keyif yaşamalarına imkan verebiliriz.

Tekli Sayfa Çerçeveleri: Tekli sayfa çerçeveleri – SPA Frameworks bir uygulamadır. Bu tür uygulamalardan kullanıyorsanız sayfa geçiş çalışmalarınız kolayca ilerleyebilir çünkü bu süreç JavaScript tarafından kullanışlı halegetirilmiş olmaktadır.

Ne yapmamalı:

Sayfa arası geçiş oluşturma işlemi aşağı yukarı şu şekilde olacaktır:

document.addEventListener(‘DOMContentLoaded’, function() {  // Animate in});

document.addEventListener(‘DOMContentLoaded’, function() {  // Animate in});

Vimeo.

Buradaki temel amaç oldukça basittir. Sayfa açılırken bir animasyon oluşacak, sayfadan ayrılırken bir animasyon daha oluşacaktır. Burada yer alan animasyonun ne kadar süre ile yüklendiğini bilmediğimiz için akıcılık açısından belirli bir fikrimiz oluşmayabilir. Bir başka sorun ise sayfaların içeriklerini birbirlerine kombine edecek geçişler oluşturamamamızdır. Elde etmemiz gereken asıl sonucun sayfanın tamamında değil belirli bir bölümünde akıcı bir animasyon oluşturmak olduğunu anlayabiliyoruz. Öyleyse burada meydana gelen iki soruna karşı elde etmek istediğimiz sonuca yönelik bir tutum içinde olmamız gerekir.

Ne Yapmalı:

Sayfa geçişlerinde azalarak yok olan animasyon oluşturma seçeneklerini ele almak daha doğru bir yaklaşım olacaktır. Burada atılacak adımlar doğru şekilde yerine getirilmelidir. Bunu sağlayacak navigasyon sistemlerine pushstate AJAX veya PJAX adı verilir. Böylece sizin internet siteniz tek sayfalı bir web sitesi haline gelir. Bu yöntemle sayfa geçişleriniz daha akıcı ve düzgün hale gelecektir. Bu yöntemin bu kolaylıklar dışında pek çok yararını göreceğiz.

Standart Link Hareketini Önlemek:

Standart bir “click” hareketinin önüne geçerek standart bir tarayıcı hareketinin önüne geçmiş oluruz. Böylece sayfa değişikliklerini kendimiz için özelleştirebiliriz.

Sayfayı Çağırmak:

Artık tarayıcımız sayfamızı değiştirmek istediğinde bunun önüne geçebiliriz. Fetch API kullanarak sayfayı çağırabiliriz. URL adresi verildiğinde HTML içeriğini nasıl çağıracağımızı aşağıdaki örnek fonksiyonda görebilirsiniz:

function loadPage(url) {  return fetch(url, {    method: ‘GET’  }).then(function(response) {    return response.text();  });}

 Fletch API fonksiyonunu desteklemeyen tarayıcılarda XMLHttpRequest veya The Polyfill fonksiyonlarını değerlendirebilirsiniz.

Geçerli URL adresini değiştirmek:

Herhangi bir sayfanın tarihini ve o sayfaya olan erişimi modifiye edecek bir özellik olan pushstate, HTML 5 içerisinde yer alan değerli bir API fonksiyonudur. Bu özelliğin amacı bir sonraki URL adresini bir önceki URL adresinde modifiye hale getirmektir.

Böylelikle aktif ve pasif mod halinde temelimizi oluşturmuş oluyoruz. Aktif moddayken kullanıcı bağlantıyı tıklar ve biz de pushstate kullanarak URL adresini değiştiririz. Pasif moddayken URL adresi değişir ve bize uyarı gerçekleştirir. Her iki durumda da biz changepage fonksiyonunu çağırmış oluruz. Bu fonksiyon yeni URL adresini okur ve ilgili sayfayı yükler.

Ayrıştırma işlemi ve yeni içerik eklemek:

Sayda navigasyonlarında footer ve header gibi temel öğeler yer almaktadır. Örneğin bir DOM yapısını tüm sayfalara uygulamayı düşünecek olursak:

 <header>

</header>

<main>  

<div class=”aa“> test </div>

</main>

<footer>

</footer> 

Animasyon:

Kullanıcı changepage bağlantıya tıkladığında changepage fonksiyonu HTML kodunu sayfaya çağırır ve sonra cc taşıyıcısı ortaya çıkarır ve buna ana öğeyi ekler. Bu aşamada sayfada iki adet cc taşıyıcımız olur; bunlardan biri geçerli sayfada, diğeri de sonraki sayfada yer alır.

Sonraki animasyon fonksiyonu bu iki taşıyıcıyı birbirine işler, eski olanı azalarak yok eder ve yenisini oluşturur. Web Animation API kullandığımızı varsayarsak şöyle bir animasyon meydana getirebiliriz:

function animate(oldContent, newContent) {  oldContent.style.position = ‘absolute’;  var fadeOut = oldContent.animate({    opacity: [1, 0]  }, 1000);  var fadeIn = newContent.animate({    opacity: [0, 1]  }, 1000);  fadeIn.onfinish = function() {    oldContent.parentNode.removeChild(oldContent);  };}

Tüm bunlar sayfalardaki geçişlerin temelleri sayılabilir.

Bunlara dikkat:

Yukarıda size keyifli bir çalışma gösterdik. Ancak bu noktada dikkat etmemiz gereken bazı şeyler olduğunu bilmemiz gerekir.

• Doğru kodlarla etkileşim oluşturduğumuzdan emin olmalıyız.

• Ana içerik taşıyıcısı dışındaki öğeleri güncelleştirmeliyiz.

• Javascript Lyfcyle yönetimi yapmalıyız.

Tarayıcı Desteği:

Bu navigasyon türünde uyguladığımız araç pushstate fonksiyonudur; bu API tüm güncel tarayıcılarda yer alır. Eğer SPA çerçeveleri kullanıyorsanız bunun yerine PJAX navigasyonu kullanmayı düşünebilirsiniz. Böylece navigasyon daha hızlı hale gelecektir.

 Loadpage fonksiyonu üzerinde ufak değişiklikler yaparak bir ön bellek meydana getirebiliriz. Böylece sayfa yeniden ziyaret edildiğinde tekrar yükleme yapmak zorunda kalmayacaktır.

var cache = {};function loadPage(url) {  if (cache[url]) {    return new Promise(function(resolve) {      resolve(cache[url]);    });  }  return fetch(url, {    method: ‘GET’  }).then(function(response) {    cache[url] = response.text();    return cache[url];  });}

Cache API kullanarak daha kalıcı bir ön bellek oluşturmak mümkündür.

Güncel sayfada animasyon oluşturmak:

Geçiş tamamlandığında sayfanın yüklenmiş olması bizim için oldukça önemlidir.

// As soon as animateOut() and loadPage() are resolved…Promise.all[animateOut(), loadPage(url)]  .then(function(values) {    …

PJAX navigasyonuyla sayfalarınız neredeyse iki kat hızlı çalışacaktır. Çünkü tarayıcınız yeni sayfada script benzeri işlemleri devreye sokmayacaktır.

 Loadpage fonksiyonunda tüm HTML içeriğini çağırırız ancak bunun için cc taşıyıcısına ihtiyacımız vardır. Headers API kullanarak HTTP header gönderir, çağırma işlemi için gerekeni yerine getirmiş oluruz.

 function loadPage(url) {  var myHeaders = new Headers();  myHeaders.append(‘x-pjax’, ‘yes’);  return fetch(url, {    method: ‘GET’,    headers: myHeaders,  }).then(function(response) {    return response.text();  });}

 Daha sonra, örneğin PHP kullanarak:

if (isset($_SERVER[‘HTTP_X_PJAX’])) {  // Output just the container} 

Böylece HTTP mesaj büyüklüğümüz ve server yüklememiz azaltılmış olur.