Arka Plan ve Giriş
Bilgisayarlarda veya cep telefonlarında herhangi bir modern web sitesine göz atıyorsanız, web sitesini aşağı / yukarı kaydırdığınızda, tüm ekranın kaydırma yönünde hareket ediyormuş gibi göründüğünü deneyimlemiş olabilirsiniz. Arka plandaki efekt bu ise, siz kaydırdıkça ön plandaki bilgiler de değişir. Bu efekt kısaca Paralaks Kaydırma olarak tanımlanabilir.
Kaydırma
Kaydırarak bunun ne anlama geldiğini anlayalım. Bir web sayfasını görüntülerken, web sayfasına herhangi bir yönde (yukarı, aşağı, sola ve sağa) göz atma eylemi Kaydırma olarak bilinir.
Genellikle, masaüstü bilgisayar kullanıcısıysanız, bu işlem faredeki kaydırma tekerleği kullanılarak yapılır.
Tarih
Kelimeye bakalım - Kaydırma. Eski günlerde, uzaktaki diğer insanlara mesaj göndermek için el yazısı parşömenler kullanılırdı. Bu parşömenler aşağıda gösterildiği gibi görünüyordu -
Parşömeni tutan kişinin eylemini hayal edin. İçeriğin tamamını okumak için, kişinin "kaydırması" ve daha fazla yuvarlaması gerekir. Bu parşömenlerin kullanımı aynı zamanda bir kayıt metni veya kararları korumak içindi. Zaman geçtikçe papirüs, parşömen ve kağıt gibi farklı yazı malzemelerinden hazırlanan parşömen kullanımı arttı.
Bilgisayarlar geliştikçe, çok büyük belgeleri, tabloları ve resimleri işlemek ve depolamak mümkün hale geldi. Bazen veriler o kadar fazlaydı ki, ekran boyutu verileri kullanıcıya sunmak için yeterli olmuyordu. Görüntülenecek veriler pencere veya görüntüleme alanının boyutundan daha büyük olduğunda, veriler gizli kalacaktır. Bu, ekran alanını genişletme yaklaşımını gerekli kıldı.
Ekranı genişletmek için bazı seçenekler aşağıda listelenmiştir -
- Ekran boyutunu artırmak için
- Veri boyutunu küçültmek için
- Kaydırmayı kullanmak için
Bu kaydırma mekanizması, grafik tasarım ve fotoğraf düzenleme ile çalışan kişiler için daha önemlidir.
Paralaks Kaydırma Menşei
Paralaks kaydırmanın geçmişine bakalım. İlk olarak, paralaks kelimesinin ne anlama geldiğini anlayacağız. Paralaks kelimesi Yunanca kelimeden gelirπαράλλαξις (paralaksis), bu değişim anlamına gelir.
Bir nesneye belirli bir açıdan bakıyorsak, nesne belirli bir şekilde görünecektir. Ancak aynı nesneyi farklı konumlardan hareket ettiriyorsanız, nesnelerin belirgin bir hareketi olacaktır. Bu fenomen, Paralaks olarak adlandırılır.
Artık Paralaks'ın kökenini ve arka planını anladığımıza göre, web tasarımında Paralaks kaydırmanın tarihini ve kavramını anlayalım.
Tanım
Wikipedia'ya göre - Parallax scrolling arka plan görüntülerinin ön plandaki görüntülere göre kamerayı daha yavaş geçtiği, 2B bir sahnede derinlik yanılsaması yaratan ve sanal deneyime daldırma hissini artıran bilgisayar grafikleri tekniğidir.
Paralaks kaydırma, animasyonun ilk günlerinde kullanıldı. Animasyon stüdyolarının çoğu (Disney gibi), paralaks efekti elde etmek için çok düzlemli kameralar kullandı.
Bilgisayar grafik teknolojileri, JavaScript gibi en yeni çerçevelerle birlikte geliştikçe, web tasarımcıları ve geliştiricileri artık zengin bir deneyime sahip siteler oluşturabilirler. Paralaks kaydırma, birkaç katmanla başlamasına rağmen, bilgisayarlardaki kaydırma çubuklarıyla bir sonraki seviyeye taşındı. Teknik aynı kaldı, ancak Kaydırma uygulaması nedeniyle benzersiz bir deneyim yaratıldı.
Örnekler
Paralaks kaydırma, modern web sitelerinde yaygın olarak kullanılmaktadır. Paralaks kaydırma tek seferde hem mobil hem de masaüstü siteleri için uygulanabildiğinden, bu tür sitelerin popülaritesi son yıllarda tavan yaptı.
Paralaks kaydırma kullanan bazı web sitesi örnekleri aşağıda verilmiştir -
Ayı Grylls
Animasyon ilerledikçe, web sitesi içeriğinin nasıl etkileşimli hale geldiğini görebileceksiniz. İlerledikçe, daha fazla bilgi ortaya çıkacaktır.
Paranızı Önemli Hale Getirin
Okuyucuya bir kredi birliğinin faydalarını tanıtmak için, bu site sizi bir hikayeye götürür. İlerledikçe, bilgiler benzersiz bir şekilde ortaya çıkar.
InfoQuest İnfografik
Bir çalışanın işyerinde kritik bilgileri bulma yolculuğu, kaydırma deneyimi kullanılarak tasvir edilmiştir.
GitHub 404
Bu, normal paralaks deneyiminden biraz farklıdır, ekranın üst kısmındaki nesne, fare işaretçisini üzerine getirdiğinizde hareket eder.
Paralaks Kaydırma Uygulamaları
Şimdiye kadar, paralaks kaydırmanın çok çeşitli dijital ortamlarda yararlı olduğu tanımı ve arka planı net olarak anlaşılmalıdır. Uygulamalardan bazıları paralaks kaydırma olup aşağıdadır -
Oyun Tasarımı
Paralaks kaydırma, oyun tasarımında yaygın olarak kullanılmaktadır. Karakterin arka plana göre hareket etmesi gerekiyor ve oyuncunun fare ve klavyeyi kullanarak kontrolü ile tüm deneyimin değişmesi gerekiyor. Oyun tasarımı, paralaks kaydırmayı kullanmanın çok ilkel ancak modaya uygun bir yoludur.
Web siteleri
Kullanıcıyı web sitesine çekebilmek için bazı dinamik ve farklı deneyimler önemlidir. Yukarıda tartışılan web sitesi örneklerinden fark etmiş olabileceğiniz gibi, paralaks kaydırma, etkileşimli bir şekilde gösterilmesi nedeniyle içeriğe katkıda bulunur.
Bu bölümde, web tasarımı kavramları ve web tasarımında paralaks kaydırma kullanmanın avantajları anlatılmaktadır.
Web Tasarım Arka Planı
20 yılı başından bu yana inci yüzyılda, kağıt ortamı nedeniyle dijital ortama bir boğaz boğaza rekabet içine var. Dijital medya, internette gördüklerimizi ve dolayısıyla birlikte gelen müttefik dergileri içerir.
Haftalık / aylık abonelikler kapsamında aldığınız haber bültenleri de dijital ortamda yer almaktadır. Öncelikle, dijital medya büyük ölçüde mobil ve masaüstü cihazlara bağlıdır. Mobil cihazınızda (avuçiçi) ve masaüstü cihazlarınızda içerik görebildiğinizde fark yaratır. İçeriğin cihazlardan herhangi birinde görüntülenme şekli, içeriği tasarlamanın belirli bir tarzı oynanır.
Bu tasarım tarzı olarak adlandırılır Web Designing. Tasarım veya kodlama açısından bakıldığında, bir web sayfası tasarımcısı bir web sayfası oluşturmaya başladığında, mobil cihazları da dikkate alır.
Wikipedia'ya göre, Web design web sitelerinin üretimi ve bakımında birçok farklı beceri ve disiplini kapsar. Bu becerilerden biri, kullanıcılar için etkili bir deneyim tasarlamaktır. Web tasarımı bu deneyime hitap eder ve sayfa içeriklerini düzenlemek için organize bir yol sağlar ve onlara farklı bir stil sağlar.
Web tasarımı şunları içerir - arayüz tasarımı, grafik tasarım ve kodu yazmak için belirli standartların kullanılması. Bu çalışma tek bir kişi veya bir ekip tarafından yapılabilir.
Piyasada bu işi kolaylaştırmak için pek çok araç mevcuttur, ancak web sayfasının görünümünü oluşturmak kişinin yaratıcı becerilerine bağlıdır.
Modern Gün Web Tasarımı
Teknoloji evrimi ile birlikte bir bilgi patlaması yaşanıyor. İnternet bir şey haline geldi ve yaşam kalitemizi tavan yaptı. Herhangi bir noktada, ortalama bir internet kullanıcısı tarafından giderek daha fazla bilgi işlenmektedir. Bu bilgiler, bir masaüstü bilgisayardaki bir web sitesi biçiminde veya elde taşınır bir cihazdan olabilir; tablet veya cep telefonu.
Bu kadar çok bilgi kullanıcının dikkatini çekmeye çalışsa da, bir web deneyimi tasarlayan bir kişi olarak, there are only 3 seconds allocated to pass the message across.
Bununla nasıl başa çıkılır? Herhangi bir web tasarımının kaynağında olduğu için mesajı iletmek çok daha önemlidir. İletişim kuran bir web sitesi oluşturmak istiyorsunuz, aynı zamanda kullanıcıyı içeriğe çekmeli ve buna bağlı kılmalıdır. Gerçekten zor bir görev.
Herhangi bir web içeriği için geniş çalışma kapsamı düşünüldüğünde, Web Tasarımı dünyasına giderek daha fazla insan giriyor. Yaratıcı bir web tasarımcısı, iyi bir kullanıcı deneyimi yaratma konusundaki inanılmaz yeteneği sayesinde şehrin konuşmasıdır. Web tasarımcısı şu anda bir pazarlama / reklamcılık şirketinde bir işe girebilir veya web tasarımına dalmak için kendi başına başlayabilir.
Aesthetic appeal is the key for a given content on web. Bu, bir web tasarımcısının tasarım, renk, boşluk vb. İlkeleri ve temellerinden haberdar olması gerektiği anlamına gelir. Giderek daha fazla kullanıcı her gün yüksek kaliteli web içeriği görmeye başlıyor. Açıktır ki, mevcut web sayfası veya web sitesi ile birkaç saat veya birkaç dakika önce ziyaret edilen web sitesi karşılaştırılacaktır. İçeriğin sıralaması, iyi grafikler ve renklerle birleştiğinde birçok bağımsız afişi / sayfayı internette popüler bir şey haline getirdi.
Misal
Basit bir grafiği ele alalım. İnternette mem adı verilen birçok grafik var. Onlar basitGraphics Interchange Format (GIF)grafiklerin içine gömülü bazı metinler içeren görüntüler. Bu memler, dünyanın bir yerinde yakın zamanda meydana gelen bir olaya dayanarak internette dolaşıyor. Bu örneğe bakarsak, sahip oldukları tek itiraz grafik ve bazı alakalı veya alakasız metinlerdir.
Yine de, o kadar çok popülerlik kazandı ki, internetteki inanılmaz olasılıklar hakkında düşündürüyor.
Dolayısıyla bir web tasarımının etkili olabilmesi için hem yaratıcılık hem de mesajı iletme yöntemi önemli rol oynar.
It is important point to note that a successful web page is combination of Web Design and Web Development. Mevcut pazar eğilimine göre, web tasarımcısı ile birlikte, bir web geliştiricisinin ekipte olması gerekir. Bir web tasarımcısı her zaman ilham arayacak ve yaratıcılığını grafikler ve ilgili renk şemaları oluşturmak için kullanacaktır. Oysa bir web geliştiricisi, kodlama becerilerini grafikleri ve renk şemalarını web sitesinde canlı hale getirmek için kullanacaktır.
Bir web tasarımcısı, amaçlanan grafiği veya renk şemasını bir web geliştiricisi için kullanılabilir hale getirmek için kodu yazma bilgisine sahip olmalıdır. Not Defteri gibi basit bir uygulamadaki basit bir kod, bir web tasarımcısının web geliştirmede sürücü koltuğuna oturmasına yardımcı olabilir.
Paralaks Kaydırmayı Kullanma
Paralaks Kaydırma, hem web tasarımcısı hem de web geliştiricisinin çalışma sınırına girer. Bir web tasarımcısı, web geliştiricisine kaydırmada amaçlanan davranışı iletmek için InVision, UXPin gibi araçları kullanarak Paralaks Kaydırma etkisini yaratabilir. Ayrıca, bir web geliştiricisi paralaks kaydırma efekti oluşturmak için becerilerini kullanacaktır. Bu, farklı JavaScript, CSS ve jQuery teknikleriyle yapılabilir. Bu yöntemlerin her birinin ayrıntılı bir açıklaması sonraki bölümlerde verilmektedir.
Önceki bölümde belirtilen tanıma göre, parallax scrolling is a technique when the background content is moved at a different speed than the foreground content when scrolling.
Paralaks kaydırma efekti oluşturmak için basit bir CSS tekniği bu web sitesinde gösterilmektedir - The Urban Walks .
Yukarıdaki ekran görüntüsünde de görebileceğiniz gibi, ekranın ortasındaki cep telefonu, siz iki kez kaydırdıktan sonra içeriği değiştirecek. Ayrıca, ilk kaydırmada cep telefonunun arka planının değişeceğini gözlemleyin.
Bu geçiş, size telefonun yerinde sabit olduğu ve aşağı kaydırdıkça arka planın değiştiği hissini veriyor. Bu etkiye paralaks kaydırma efekti denir. Ekranın en sağında bazı noktalar şeklinde bir gösterge olduğu için aşağı kaydırdığınızı biliyorsunuz.
Paralaks kaydırmanın ilk kullanımı eski bilgisayar oyunlarında oldu. Sabit bir arka plan görüntüsünün, karakter arka plandan daha hızlı hareket ettikçe daha yavaş bir hızda hareket edeceği yer. Bu oyunların bazı örnekleri - Disney's Aladdin ve Disney's Lion King. Bu oyunlar sırasıyla 1993 ve 1994'te piyasaya sürüldü.
Oyunlarla başladığı doğru olsa da, şu anda birçok web tasarımcısı, izleyicilerin sitelerini sevmesini sağlamak için etkiyi vurguluyor. Paralaks kaydırmanın avantajları web sitesinden mobil sitelere kadar genişletilmiştir.
Bir zamanlar masaüstü sürümleri için paralaks kaydırmalı olarak tasarlanan bu web sitelerine, mobil ekranları da destekleyen kodlar eklenir.
Web ve Mobil Ortamda Paralaks Kaydırmanın Avantajları
Bu bölümde, aşağıda tartışıldığı gibi çeşitli perspektiflerden paralaks kaydırmayı kullanmanın avantajlarını tartışacağız -
Hedef Kitle Bakış Açısından
Paralaks kaydırmayla ilgili eğlenceli bir unsur var. Yukarıdaki örnekte gördüğünüz gibi, kullanıcı farklı ekranlardan kaydırdıkça bin kelimelik bilginin aktarılması daha kolay hale geldi.
İlk kez bir kullanıcıyı düşünürsek, her kaydırma ile ilişkili bir merak vardır. Böylelikle sadece web sitesinin deneyimini zenginleştirmekle kalmaz, aynı zamanda kullanıcının web sitesini ilk ziyaretinde daha fazla zaman geçirme olasılığını da artırır.
Kullanıcı kaydırma sırasında ilgisini çektiğinden, kullanıcı etkileşimi oranı önemli ölçüde artar.
Daha açık bir şekilde mevcut olduğu için, kullanıcının bilgiyi çözme sürecine girmesi gerekmez.
Bazı durumlarda, logo veya menü simgesi gibi ekrandaki diğer öğeleri canlandırarak sunduğunuz ürün / hizmet hakkında bir hikaye koyabilirsiniz.
Teknik Perspektiften
Bir masaüstü sürümü için paralaks kaydırmayı uyguladığınızda, aynı çerçeve mobil web sitesi veya ekranlar için çok kolay bir şekilde kullanılabilir.
Kod parçacığı basit ve yeniden kullanılabilir olduğundan, bir pazarlama ajansı veya web sitesi servis sağlayıcı şirketseniz, yeni müşteriler toplarken bu zahmetsiz hale gelir.
Paralaks kaydırma bilgisi, CSS, JavaScript, vb. Gibi ön uç çerçevelerde daha fazla uzmanlıkla birlikte gelir.
Bir web geliştiricisi için, konu paralaks kaydırma efekti oluşturmaya geldiğinde, çeşitli teknikler mevcuttur. Bu tür tekniklerden biri kullanıyorCascaded Styling Sheets(CSS).
CSS, HTML öğelerinin ekranda nasıl görüntülendiğini açıklar. Bir CSS dosyası oluşturabilir ve web sitesinin tamamı için kullanılabilir. CSS dosyası eklemek, her HTML öğesine stil eklemek ve bunları web sayfasının farklı bölümlerinde yönetmek yerine daha kolaydır.
Note- Bu bölümde aşağıda tartışılan yöntemlerden bazıları mobil cihazlara değil, masaüstü bilgisayarlara özeldir. Belirli bir tekniğin mobil cihazlar için uygun olmadığı adımlarda bahsedilecektir.
Belge nesne modelindeki (DOM) tüm ekstra çizime CSS aktarımları düşünüldüğünde, daha fazla donanım hızlandırma kullanımı ve CPU'yu zorlamadan yumuşak bir etki vardır.
Mutlak Konum Yöntemi
Bu yöntem, mevcut diğer seçeneklere kıyasla nispeten hafif olduğundan, paralaks efekti oluşturmak için sıklıkla kullanılır. Arka plan görüntüsünün konumu, ekrandaki diğer içeriğe göre sabit tutulur. Aşağıda tartışılan örnekte, CSS'nin büyüsünü kullanarak bunu nasıl yapacağınızı göreceksiniz.
Bu bölümde, Mutlak Konum Yöntemi için iki yöntemden geçeceğiz -
- Tek Arka Plan
- Çoklu Arka Plan
Tek Arka Plan Yöntemi
Bu yöntemde aynı klasörde iki dosya oluşturacağız. Aynı amaç için aşağıda verilen adımları izleyin -
Step 1
Aynı klasörde iki dosya oluşturmalıyız: ilk dosya HTML biçimlendirmeli ve ikincisi CSS kodlu.
Step 2
Şimdi HTML biçimlendirmemizi tanımlayalım. Aşağıda verilen koda uyun -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>Step 3
Not defterini açın. Yukarıdaki kod parçacığını kopyalayıp yapıştırın.
Dosyayı kaydederken, altında Save as type, seçin All Files. Dosyanıza gerektiği gibi bir ad girin, ancak ardından bir uzantı gelmelidir -.html aşağıdaki ekran görüntüsünde gösterildiği gibi.
Step 4
Dosya kaydedildikten sonra, not defterinde başka bir dosya oluşturun ve aşağıda verilen kodu yapıştırın -
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}Son adımda gördüğünüz gibi, dosyayı kaydederken, altında Save as yazın, seçin All Files. Dosyanıza gerektiği gibi bir ad girin ve bir uzantı ekleyin.css ona.
Kod Analizi
Paralaks etkisinden kodun hangi kısmının sorumlu olduğunu anlayalım. Paralaks için en önemli çalışma, perspektif ve dönüşüm kuralları kullanılarak yapılır. Bakınline 15yukarıdaki kod parçacığında. Perspektif bizim için yaratıldıBgContainerilk. Bu, dönüştürme kuralı için bir platform başlatır.
İçinde Parallax 40. satırdan başlayan konteyner, transform 48. satırdaki kural, translate (-1px) kullanarak BgContainer div öğesini arka plana iter.
Paralaksın derinliğini değiştirmek için çevirme ve ölçekleme parametrelerinin değerlerini değiştirebilirsiniz.
Html dosyasını açtığınızda, paralaks etkisi aşağıda gösterildiği gibi görünecektir -
Note - Öğreticinin geri kalanı için, okuyucunun yukarıdaki yöntemde sağlanan klasör yapısına göre HTML ve CSS dosyalarını oluşturabileceği varsayılacaktır.
Çoklu Arka Plan Yöntemi
Bu yöntemde, kullanıcı sayfayı aşağı kaydırdıkça karşımıza çıkan farklı görüntülere sahip olacağız. Bu etkiyi göstermek için farklı renk kombinasyonlarında kullanılan kalemli bir resim var.
Aşağıda gösterildiği gibi HTML sayfası için aşağıdaki kodu inceleyin -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>Önceki örneğe benzer şekilde kullanacağız styles.cssbu HTML dosyasıyla aynı konumda depolanır. Birinci, İkinci, Üçüncü ve Dördüncü olarak adlandırılan üç farklı bölümümüz var.
Paralaks kaydırma için CSS kodu aşağıda verilmiştir -
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}Burada, 7. satırdan paralaks etkisini yaratıyoruz, buradaki önemli özellik background-attachment:fixed.
Bu özelliği kullanarak, renkli kalemlerle ilk görüntü her zaman en üstte kalacaktır. Siz aşağı kaydırdıkça, 28. satırda anlatıldığı gibi farklı görüntüler görünmeye başlayacaktır.
Sonuç olarak, aşağıdaki gif'de gösterildiği gibi paralaks etkisini görebileceksiniz. Aşağıdaki görüntü, çoklu arka plan için düşündüğümüz örneğin ekran görüntüsüdür.
Saf CSS Paralaks
Önceki iki yöntemden elde ettiğimiz bilgileri birleştirelim ve gelişmiş bir Saf CSS Paralaks efekti oluşturalım.
Fark, düzenleme şeklimiz olacaktır. image element ve z-transformEmlak. Özelliğin açıklaması CSS kodundan sonra verilecektir.
Not Defteri'ndeki normal yöntemi kullanarak aşağıdaki kodla HTML dosyasını oluşturun.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>CSS dosyası için kod aşağıda verilmiştir -
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}Kod Analizi
İlk katmanın konumunu line 26 kullanarak position:absoluteEmlak. Pozisyonlar da 0'a sabit kodlanmıştır.
İçinde parallax_two, başlıklı katman olan, uyguladık z-index: 10başlığa yüzer bir etki sağlamak için. Katmanparallax_three bir kenar boşluğu özelliği sağlayarak en alta taşınır.
Böylece, Paralaks etkimizdeki karmaşıklık düzeyini yükseltebiliriz.
Aşağıdaki şekilde gösterilen etkiyi gözlemleyin.
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 kullanabilsek de, 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, başlığı gösteren 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.
Önceki bölümlerde, JavaScript kitaplıklarını kullanmanın web sitesine ne kadar iyi efektler kattığını anladık. JavaScript, Photoshop ile birleştirildiğinde, web sitenize paralaks kaydırma eklemek için olağanüstü esneklik ve kolaylık sağlar.
Bu bölümde, paralaks kaydırma efekti eklemek için üç Photoshop eklentisine bakacağız. JavaScript için önceki bölümde bahsettiğimiz gibi, güçlü Photoshop paralaks kaydırması oluşturmak için HTML kodumuzda Photoshop referanslarını kullanacağız.
Photoshop eklentileri hakkında dikkat edilmesi gereken önemli bir nokta, genellikle eklentilerin güncellenmediği, bu nedenle paralaks kaydırma için herhangi bir eklenti kullanmaya başlamadan önce biraz araştırma yapmak isteyeceğinizdir.
Basit Parallax.js kullanarak Paralaks Kaydırma
Photoshop eklentisini kullanarak Parallax.js, çok fazla güçlük çekmeden paralaks kaydırma efekti oluşturabiliriz. JQuery eklentisini göz önünde bulundurmak, önyükleme gibi üst düzey kitaplıkların dahil edilmesini gerektirir. Bu bölümdeki kodda HTML5 etiketlerinin olacağını unutmayın.
Aşağıda gösterilen HTML dosyasına bakalım -
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>Analiz Kodu
Yukarıdaki kod parçacıkları, iki resim ve aralarında örnek bir metin bulunan bir sayfanın kodunu gösterir.
Gördüğünüz gibi kod şununla başlıyor: <!DOCTYPE html>Bu, tarayıcılara kodun HTML5 tabanlı olduğunu bildirmenin tipik yoludur.
<meta> etiketleri line 4 to 6yorumlama için makine olan kodu gösterir. Bu kodun etkisini göremeyeceksiniz. Burada dikkat edilmesi gereken önemli şey -meta etiketi, web geliştiricileri görüntülenen veriler üzerinde gelişmiş bir kontrole sahip olur.
Ayrıca line 8 and 9, CSS stil sayfalarını Bootstrap ile birlikte ekledik. Belirli bir yazı tipi yüzü ve tipografi için Bootstrap yaygın olarak kullanılan kitaplıktır.
Lines 10 and 11Photoshop ve Parallax.js kitaplıklarıyla ilgilenin. Paralaks görüntülerinin etkisine sahip olmak için Parallax.js üzerinde kontrol eklemek önemlidir. Bulabileceksindata-parallax mülk ile div açık line 21, Gerekli paralaks etkisi için parallax.js kitaplığını çağırmak yeterlidir.
Paralaks etkisi, kodda görülebilir lines 21 ve line 40. Bu etkiyi parallax.js ile sağlayan önemli özellikler şunlardır:data-parallax, data-image-src, data-natural-width, data-natural-height.
CSS dosyasıyla sadece bir özellik sağlamamız gerekiyor. Aşağıda gösterildiği gibidir -
.parallax-container {
height: 500px;
width: 100%;
}Yukarıdaki HTML kodunda, CSS dosyaları için belirli bir yapı oluşturduk. Adlı bir klasörümüz olacakcss, CSS dosyalarına sahip olacak - bootstrap.min.css ve style.css.
Belgelerde her şey bittiğinde, aşağıda gösterildiği gibi paralaks etkisini görebileceksiniz -
Photoshop Eklentisini kullanan Paralaksatör
Photoshop eklentisinin en iyisi Parallaxator, paralaks kaydırma efektleri sağlar ve kullanımı kolaydır. Parallaxator eklentisini, CSS ve JS dosyalarını bu bağlantıdan indirebilirsiniz - Parallaxator GitHub .
CSS ve JS dosyaları indirildikten sonra, HTML kodunu oluşturmak için aşağıda gösterilen kodu kullanabilirsiniz.
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>Analiz Kodu
Paralaks etkisi, her img etiketiyle sağlanan parallax_child sınıfı tarafından sağlanır. Parallax_child, aşağıda sağlanan CSS ve JS dosyalarıyla bağlantılıdır.
Parallaxator eklentisinin çalışması için fm.parallaxator.jquery.css ve fm.parallaxator.jquery.js'yi ekledik. Bu dosyaların HTML dosyasıyla aynı dizinde bulunması gerekir.
CSS kodu aşağıda gösterildiği gibidir -
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}Yukarıdaki kodun bir sonucu olarak, paralaks etkisini görebileceksiniz.
Paralaks Kaydırma için Stellar.js jQuery eklentisi
Stellar.js, paralaks Photoshop eklentileri listesine yapılan başka bir eklemedir. Artık korunmasa da, kararlı yapısını kullanan geliştirici, paralaks kaydırma efektini kolaylıkla kullanabilir. Photoshop'un en son sürümleriyle uyumludur ve uygulaması kolaydır.
Stellar.js eklentisi için resmi web sitesinden en son jquery.stellar.js dosyasını indirmeniz gerekecek . İndirdikten sonra, bu eklenti dosyasını HTML ve CSS dosyalarınızla aynı klasörde oluşturun.
HTML koduna bir göz atalım.
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>Analiz Kodu
Stellar.js'nin çalışması için, jquery.stellar.js'de Photoshop eklentisine başvurulduktan hemen sonra kitaplığı dahil ettik. line 6.
Stellar paralaks için işlevler komut dosyası etiketinde çağrılır. line 8 to line 15. Mülkiyet iledata-stellar-background-ratio, Görüntülenmekte olan görüntüler için bir ofset ayarlıyoruz. Bu,lines 19,20,21 and 22.
CSS kodu aşağıda verilmiştir -
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}Hem dosyalar hem de stellar.js oluşturulduktan sonra, eklenti dosyası aynı klasöre eklenir, efekti aşağıda verilen ekran görüntüsünde gösterildiği gibi görebilmelisiniz -
Bootstrap, aralarından seçim yapabileceğiniz birçok kullanıma hazır bileşen içeren popüler bir çerçevedir. Bootstrap, paralaks kaydırmayı uygulamak için kodu optimize edebilir.
Bu bölümde, bir örnekle Paralaks kaydırmayı uygulamak için Jumbotron bileşenini nasıl kullanacağımızı tartışalım.
Parallax Bootstrap4 Jumbotron ile Tam Sayfa
Kullanıcıya, bir indirim veya satışla ilgili bazı içeriğin bulunduğu büyük bir "harekete geçirici mesaj" kutusunun gösterildiği bir web sitesi hayal edin. Genellikle Jumbotron uygulamasını bu tür yerlerde bulur. Kullanıcının dikkatini çekmeye yarayan büyük bir kutudur.
Bootstrap'in yalnızca bir bileşenini kullandığımız için, bu örnek için ayrı bir CSS dosyası oluşturmayacağız. Doğrudan HTML koduna girelim.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>Analiz Kodu
line 64 referans Bootstrap kitaplığı. Jumbotron için kenar boşluğunu ve sınır yarıçapını belirliyoruz.line 8 to 11.
Görebildiğimiz gibi line 33, Özel görüntümüzün yükleneceği büyük kutuyu göstermek için Jumbotron sınıfıyla bir div oluşturuyoruz. Lütfen bu sefer görsel için doğrudan bir URL olmadığını unutmayın, indirilen görseli kullanacağız. Örneğiniz için herhangi bir yüksek çözünürlüklü resmi indirebilir veline 16.
Yukarıda verilen kodu çalıştırdığınızda görebileceğiniz çıktı aşağıda gösterilmiştir -
Bu eğitimde, paralaks kaydırmayı oluşturmak için farklı kitaplıkları inceledik. Ön uç geliştirme için kullandığımız CSS Bootstrap'i kullandığımız temel seviyeden ileri seviyeye kadar tüm yönleri ele aldık. Göz ardı edilmesi zor bir web sayfası oluşturmak için yaratıcı becerilerinizi uygulamanızı öneririz. Paralaks kaydırma için size ilham verecek çok sayıda çevrimiçi örnek olduğunu unutmayın.
Paralaks Kaydırmanın Kullanımı
Giriş bölümlerinde daha önce tartıştığımız gibi, olağanüstü bir kullanıcı deneyimi elde etmek için paralaks kaydırmayı kullanabilirsiniz. Paralaks kaydırmayı dahil edebileceğiniz site için bazı fikirler.
Web sitesi zaman çizelgesi
Bu tür sitelerin genellikle bir ürün veya şirket veya başka herhangi bir şey hakkında anlatacak bir hikayesi vardır. Hikayeyi ziyaretçiye sunmak ve onları farklı animasyonlarla meşgul etmek için bir paralaks efekti oluşturabilirsiniz.
Bir zaman çizelgesi sitesi için, bir arka plan oluşturmak ve metin içeriğini ön planda göstermek faydalı olacaktır. Arka planla el ele giden grafikler oluşturmak için bir grafik tasarımcıyla birlikte çalışabilirsiniz.
Mobil Uygulama web sitesi
Günümüzde, her ürün / hizmet teklifi için mobil uygulama olmazsa olmazdır. Mobil uygulamanın ne yapıp ne yapamayacağına dair bir açıklama sağlayan mobil uygulama web sitesi oluşturmak isteyen birçok girişim var.
Uygulama oluşturmanın katı kuralları ile tanınan Apple App Store, mobil uygulamadan bir destek web sitesine sahip olmasını talep ediyor. Bu web sitesinin her zaman çekici ve kullanıcı dostu olması gerekecektir.
Paralaks kaydırmayı kullanarak, bir mobil görüntü kullanabilir ve kullanıcı sayfayı aşağı kaydırırken farklı işlev türleri gösterebilirsiniz. Böyle bir örnek, bu eğitimin 4. Bölümünde zaten tartışılmıştır.
Mouse Over Effects
Bir sonraki animasyon seviyesi oluşturmak için paralaks kaydırmanın gücünü kullanabilir ve fareyi üzerine getirebilirsiniz. Fare ile üzerine geldiğinizde, kaydırma yönünü kontrol edebilir ve bir paralaks efekti oluşturabilirsiniz.
Bu şekilde, harika bir deneyim yaratmak söz konusu olduğunda birçok olasılık vardır. İhtiyacınız olan tek şey bir fikir ve doğru araçlar ve kitaplıklar.
Web Kullanıcı Arayüzünün Geleceği
Teknolojinin gücü ve paralaks kaydırma gibi yaratıcı unsurlarla, şaşırtıcı kullanıcı deneyimleri yaratmak için daha önce hiç görülmemiş bir rekabet var. Bu sadece web siteleriyle sınırlı değil, mobil sitelere de yayıldı.
Web kullanıcı arayüzü şu anda zirvede iken, bir mobil cihazla uyumlu bir web sayfasına sahip olmak zamana ihtiyaç duymaktadır. Bootstrap ve jQuery örneklerinde gördüğümüz gibi, web sitesi el cihazlarında desteklenmiyorsa uzun bir ömür yaşayamaz.
Mevcut kütüphanelerin yanı sıra, kullanıcı deneyiminin geleceği hevesle Yapay Zeka ve sanal gerçekliği dört gözle bekliyor. Bir VR ekipmanı kullanılarak görüntülenebilen bazı web sayfaları var. Böyle bir durumda, en son eklentilerle iletişim halinde olmak ve aynı zamanda yenisini oluşturmak gerçekten mantıklı.
Bu eğitimde edindiğiniz bilgileri, kullanıcı deneyiminin en iyisini oluşturmak için uygularsınız, web geliştirme yolculuğunuzda size bol şans ve başarılar diliyorum!