jQuery ve HTML5 ile 18 Paralaks Kaydırma Eğitimi – 2022
Yayınlanan: 2022-03-17Paralaks 1940'ların sonlarından beri kullanılmaktadır ve son zamanlarda oyun gibi endüstrilerde herkes için benzersiz oyun deneyimleri yaratmak için kullanılmaktadır. Cidden, paralaks tasarımcılar için yeni bir şey gibi gelebilir. Yine de, bu konsept o kadar uzun zamandır bizimle ki, tasarımcılar ancak şimdi yetişiyor ve bu kaydırma efekti etrafında bir trend oluşturuyor. Paralaks tanımını en iyi şekilde daraltmak için, web tasarımında, her bir kap/ızgara/bağlamın arkasında hareketli bir arka plan efekti oluşturmaya yardımcı olan, farklı web sayfası bileşenlerinin çeşitli zaman aralıklarında kullanıcının yanında gezinmesine izin veren benzersiz bir tekniktir.
Colorlib'de, makalelerimizin her birinde benzersiz yaklaşımların tutarlılığını korurken, paralaksa elimizden gelenin en iyisini vermeye çalıştık:
Şimdi jQuery, JavaScript, HTML5 ve CSS3 gibi teknolojileri kullanmayı içeren en iyi paralaks kaydırma eğitimlerini tanıtmak istiyoruz. Web tasarımında yeni başlayanlar için kolay olan öğreticilere ve paralaksın temelini ve nasıl çalıştığını açıklamak için bazı ara parçalara odaklandık.
Öğreticilerimize ve tüm bunlara girmeden önce, daha yakından bakmamız gereken iki yön var: paralaks kaydırmanın arama motoru optimizasyonu üzerindeki etkisi. Dinamik tasarım özelliklerini kullanmanın, arama motorlarının web sitenizi işleme biçimi üzerinde kesinlikle bir etkisi olacaktır ve organik trafiğiniz üzerinde kötü bir etkisi olabilecek bir özellikle yetinmek istemezsiniz. Moz'dan Carla Dawson bu konuyu çok detaylı bir şekilde ele aldı. Gönderinin ana paketi, paralaks tasarımınızı daha SEO dostu hale getirmek için uygulayabileceğiniz 3 benzersiz tekniği listeliyor. Her şey, tasarımınızda işlevsel bir paralaks etkisi yaratmaya çalışmadan, önce SEO metodolojisini uygulamadan ve ardından içerik oluşturmaya odaklanmadan önce başlar, bu şekilde arama motorlarının web sitenizin nasıl çalıştığını anlaması için yer bırakırsınız, aynı zamanda robotlara izin verirsiniz. içeriği işlemek için.
İkinci yönü ise paralaks tasarımın kullanıcı deneyimi, tüm tasarımlara uygun olup olmadığı ve ne gibi sorunlara yol açabileceğidir. Bu, paralaks tasarımının kullanıcı deneyimi üzerindeki etkileri üzerine derinlemesine bir araştırma çalışmasıdır, bu nedenle bu makaleyi tam olarak işlemek ve anlamak biraz zaman alacaktır. Çalışma, her ikisi de keşfedilecek örnek web siteleri verilen iki grup insanı aldı: paralaks ve standart kaydırma. Nihai sonuç şaşırtıcı değildi, kullanıcılar paralaks kaydırmadan daha çok hoşlanıyorlar, ancak bu, bir karışıklık pahasına ve genel kullanılabilirlik endişelerine dikkat çekiyor. Kullanıcılara her zaman web sitesi tasarımlarınıza yapılan süslü eklemelere göre öncelik vermelisiniz, bu sizi analiz etmesi için profesyonel bir uzman tasarımcı kiralamak anlamına geliyorsa, özellikle büyük ölçekli bir ticari operasyon yürütüyorsanız, bu fikirle ilerlemelisiniz. Kendi deneyimimize göre, küçük ölçekli web siteleri genellikle paralaks kaydırmayı kullanabilir ve bunun kullanıcı deneyimi veya genel kullanılabilirlik üzerinde o kadar büyük bir etkisi yoktur.
Artık bu iki konuyu ele aldığımıza göre, paralaks kaydırmayı nasıl uygulayacağınız ve paralaks kaydırma efektlerinizi nasıl oluşturacağınız konusunda bazı teknikler ve yöntemler öğrenmeye başlayabiliriz. İlk eğitim, uzun yıllardır ön uç çalışmaları yapan ve bu alanda köklü bir profesyonel olan Petr Tichy'den geliyor. Paralaksın ilk kurulum aşamasını, yine paralaksla entegre olan animasyon efektlerinin nasıl ekleneceğini ve her bir animasyon için uygun zamanlamanın nasıl tahsis edileceğini öğreneceksiniz. Eğitim, bazı açılardan biraz karmaşıktır, bu nedenle önceden JavaScript bilgisine sahip orta düzey geliştiricilere yöneliktir. Aynı öğreticide, Petr'ın paralaksla ilgili daha önceki eğitimlerinden birine giden bir bağlantı bulacaksınız, bu çok daha yeni başlayanlar için uygundur.
Ian Yates bu öğreticiyi yılın başlarında yazdı ve bu, bu paralaks öğretici koleksiyonunda sunacağımız bu konuyla ilgili en yeni öğreticilerden biri olabilir. Ian, harika bir paralaks efekti kombinasyonu kullanan başka bir web sitesinden ilham alma yaklaşımını benimsiyor ve onu yeniden yaratmaya çalışıyor. Tek şey, çoğunlukla paralaks özelliklerine sahip özellikli tasarımlardan bahsediyor ve JS ve CSS kullanarak benzersiz bir arka plan efektinin nasıl oluşturulacağına dair küçük bir pasajdan bahsediyor.
Müşteriler tasarım standartları hakkında o kadar fazla bilgiye sahip değiller, müşteriler yalnızca trendleri ve bir web sitesinin inanılmaz derecede havalı ve rekabet olarak adlandırılabilecek her şeye tamamen benzersiz görünmesini sağlamak gibi şeylerle ilgilenmeye meyillidir. Bu tür müşterilerle çalışıyorsanız, bir tasarım üzerinde benzersiz kaydırma efektlerinin nasıl oluşturulacağına dair kısa bir eğitim çok önemli olacak ve burada işi aynen böyle yapacak bir tane olduğunu düşünüyorum. CSS3 ile şekillendirilmiş ve ardından jQuery kullanarak bir paralaks efektine yerleştirilmiş HTML5 kodunu yapılandırmayı öğreneceksiniz.
Script Tutorials'ın öğreticisi şimdiden 17.000'den fazla tasarımcı ve geliştiriciye ulaştı, bu sayı ilgimizi çekti, çünkü öğreticinin gerçekten çalışması gerektiği ve pürüzsüz bir paralaks hareket deneyimi sağlaması gerektiği anlamına geliyor. Bazı yerel testlerden sonra, gerçekten de öyle görünüyor. HTML ve CSS'nin olağan paralaks yaklaşımı ve gerçekten yapmanız gereken tek şey, her iki kodu da tasarımınıza kopyalayıp yapıştırmak ve gitmekte fayda var. Yine de, özel tasarımlar için uygulamanız gereken durumlarda bunun biraz daha zor olduğunu hayal edebiliyoruz, bu yüzden belki de bu konuda yardımcı olabilecek genel öğreticiler aramaya devam etmemiz gerekiyor.
Andy Shora bu konuda bize yardımcı olabilir. Ana hedefleri, web sitesi performansından ödün vermeyen bir paralaks etkisi yaratmaktır; bu, şu yollarla elde edilir: kaydırma olayları için DOM etkileşimlerinin miktarını en aza indirgemek ve mobil cihazların performansını artırmak için donanım hızlandırmayı kullanmak. Aslında bu, mobil cihazların paralaks ile nasıl etkileşime girdiğini ve kaliteyi veya tasarım çekiciliğini kaybetmeden maksimum performansı artırmak için neler yapılabileceğini gerçekten öğrenmek için başka bir kılavuzdur. Herhangi bir web sitesi tasarımında performans optimal paralaks efektleri oluşturmak için kullanılan iki farklı jQuery parçacığını keşfedeceksiniz.
Paralaks çok yeni bir teknik olduğu için (birkaç yıl önce, ama yine de), eski web tarayıcıları için paralaks uygulamak isteyen geliştiriciler için sunduğu birçok zorluğu var, süreç o kadar kolay değil ve bir eski tarayıcıların yeni web özellikleriyle nasıl çalıştığını biraz anlamak. Eğitim, paralaks web siteleri arasındaki iyi ve kötü örnekleri ve analiz sürecinde neler öğrenilebileceğini göstermeye devam ediyor. Dikey ve yatay gibi farklı paralaks açıları hakkında da konuşmaya devam ediyor - modern web tasarımının olanakları gerçekten yeni bir seviyeye ulaştı. Paralaksla ilgili en kullanışlı JavaScript kitaplıklarını öğreneceksiniz ve her birinin çevrimiçi olarak kendileri için belgeleri ve bireysel öğreticileri var, bu kitaplıkları kendimiz paylaşmak istedik, ancak miktar çok büyük değildi, bu yüzden öğreneceksiniz. hepsi bu eğitimde. Bu, özellikle etkileşimler ve dinamik bir kaydırma efekti elde etmenin farklı yolları olmak üzere, paralaks ile ilgili her şey için gerçekten harika bir kaynaktır.
Basit bir paralaks efekti nasıl oluşturulur
Sara Vieira harika bir geliştirici olmasına rağmen, paralaks gibi konularda karmaşık kod veya terminoloji ile uğraşmaz. İstenen sonuca ulaşmak için basit bir teknik oluşturmayı tercih ediyor ve paylaştığı kodu kendi hızınızda denemenize izin veriyor. Üç büyükle deneyler yapacaksınız: JS, HTML ve CSS. Denemenin en iyi yolu yerel bir web sunucusunda veya canlı sunucunuzdaki ayrı bir klasörde olabilir ve bu şekilde ne tür sonuçlar elde edebileceğinizi görün.
jQuery ile paralaks etkisi
Bu öğretici hakkında güzel olan şey, görüntülediğiniz sayfada zaten uygulanmış olmasıdır, bu nedenle yazılı metinde açıklamaya çok fazla gerek yoktur, bunun yerine canlı kod şeklinde bir örnek verin. Görüntülemekte olduğunuz sayfanın sahip olduğu aynı paralaks efektini elde etmek için HTML/CSS parçacığını alabilir ve onu jQuery parçacığıyla birleştirebilirsiniz. Her kod parçacığının sağ tarafında bulunan küçük bir açıklama (yorum) parçacıkları ile.
Sonuç olarak, mümkün olduğunca CSS'ye güvenmek istersiniz. CSS, çok daha iyi performans ve jQuery gibi dinamik dillerle daha az uğraşma anlamına gelir. Burada sahip olduğunuz şey, içerik kaplarınızı paralakslayacak ve içerik deneyimini harika bir performans kıyaslamasıyla çok daha zengin hale getirecek basit bir CSS parçacığıdır.
Stellar.js, web sitelerinize hızlı bir şekilde paralaks efektleri eklemenize yardımcı olmak için oluşturulmuş oldukça popüler bir JavaScript kitaplığıdır. Kütüphane geçen yıl içinde fazla gelişme görmemiş olsa da, topluluk genelinde geliştiriciler ve tasarımcılar tarafından hala aktif olarak kullanılmaktadır. Belirli öğelere paralaks etkisi kazandırmak için Stellar'ı tasarımlarınıza nasıl dahil edeceğinizi keşfedeceksiniz. Bir kitaplık, gerektiğinde ana geliştirme iş akışından kolayca ayrılabileceğinden, bu tür dinamik özellikleri takmak için kesinlikle güvenli bir seçimdir.
WordPress Sitenizi Pop Hale Getirmek için Paralaks Kullanmak
Paralaks o kadar çok farklı bağlamda kullanılıyor ki, kullanıcıların bu heyecan verici özelliğe geri dönmelerini sağlayan şeyin ne olduğunu merak etmek gerekiyor ve birçokları için - bu nedenle, akıcı kaydırma animasyonlarının kullanımı yoluyla daha iyi hikayeler anlatabilme yeteneği olmuştur. okuyucuyu hikayenin bir bölümünden diğerine, o harika akıcı hareketle. Peki ya WordPress blogları, işlevi destekleyen benzersiz temalar kullanmadan WordPress'e nasıl paralaks ekleyeceğiz? Bu gerçekten yanan tek sorunuzsa, aşağıdaki eğitimde tüm cevapları bulacaksınız. Bunun WordPress blogları için en kapsamlı paralaks öğreticisi olduğunu düşünüyoruz ve yakında bu harika efektleri kendi bloglarınıza ekleyeceğinizi umuyoruz. Paralaksın ne işe yaradığını zaten biliyorsanız girişi atlayın, kılavuzun büyük bir kısmı paralaksı ayrıntılı olarak açıklamaya adanmıştır, bu yüzden zaten biliyormuş gibi hissettiren her şeyden kaçının.
Wix nedir? Web'deki lider ücretsiz web sitesi oluşturma platformudur ve bu adamlar sonsuza kadar bu işin içinde! Bu bir öğretici değil, müşterilerle çalışan geliştiriciler ve web sitelerini barındırmak ve oluşturmak için Wix gibi platformları kullanmayı tercih eden türden müşteriler için bir başlık. Artık Wix kullanıcıları paralaks efektinin de keyfini çıkarabilir ve sizi cezbetmek için size gösterecekleri çok sayıda iyi demoları var. Elbette şaka yapıyoruz, Wix'i kullanmak benzersiz bir tasarım oluşturmak için çok fazla zaman kazandırabilir ve şaşırtıcı bir şekilde Web sitelerine olan talep azalmadı, ancak müşteriler web sitelerini barındırmak için kullandıkları platform hakkında bilgi edinmek için biraz daha fazla zaman ayırsalar bile bu harika tasarımları kendileri elde edebilirler. Yeni müşterilere web sitelerini Wix veya başka bir web sitesi oluşturma platformu ile barındırma şansı sunmaktan korkmayın. Web sitesi bakımı söz konusu olduğunda doğru yönde atılmış bir adımdır ve bazı durumlarda; performans da.
CSS kullanarak yatay paralaks
Paralaks tasarımı için birçok seçeneğiniz var, bu nedenle bir tasarımcı ve ön uç geliştirici olarak ne yaptığınızı bildiğiniz sürece, her şeyi paralaks efektine dönüştürebilir, hatta biraz CSS ve jQuery kullanarak bir manzarayı çoğaltabilirsiniz. büyü! Dave Chenell, paralaksta bir peyzaj tasarımı efekti yaratmak için gerekli adımlarda size yol gösteriyor.
CSS ve Javascript ile Çok Katmanlı Paralaks İllüstrasyon Nasıl Yapılır?
Katmanlı paralaks efekti, belirli bir görsel senaryoyu ortaya çıkarmak için iki görüntünün üst üste kullanılmasından oluşur. Bu, kullanıcılarınızın tasarımınızla/web sitenizle yaşayacakları görsel deneyimi daha da geliştirecek ve bu aynı zamanda elle çizilmiş sanatın olanaklarını ve web sitesi tasarımına dahil edilmesini keşfetmek için harika bir fırsat, çünkü çoğunlukla bir şey kullanmak isteyeceksiniz. Demo önizlemesinde göreceğiniz gibi, birbirinin üzerine binebilir ve tam bir anlam ifade edebilir.
Saf CSS Paralaks Web Siteleri
Yerel CSS'den başka bir şey kullanmadan paralaks kullanarak sağlam bir kaydırma efekti oluşturmaya yönelik güzel bir giriş eğitimi.
Firewatch Paralaks Etkisini Yeniden Oluşturma
Paralaks birçok isimle anılmıştır ve kesinlikle paralaks eğiliminden kesinlikle nefret eden sadık bir tasarımcı/geliştirici grubu vardır, ancak ne yapabilirsiniz, pek çok kişi için işe yarıyor gibi görünüyor, öyleyse neden bu konuda eğitim ve içerik üretmeyi bırakıyorsunuz? Bu etkiyi gerçek zamanlı olarak nasıl mümkün kılabiliriz. Burada sahip olduğumuz eğitim, içeriğin daha fazla açılmasına izin vermek için düşen öğelerle birleştirilmiş bir tür manzara efekti oluşturmak için Firewatch web sitesinden belirli bir efekti yeniden oluşturacak. İlk başta kulağa zor geliyor, ancak Hamish (eğitimin yazarı) her şeyi adım adım açıklamaya özen gösteriyor.
Gereksinimleriniz ne olursa olsun, listelediğimiz eğitimlerin bu gelişen web tasarım trendinin tüm yönlerini kesinlikle kapsayacağını düşünüyoruz. Basit efektlerden performans için optimize edilmiş efektlere, birkaç dakikadan daha uzun süre hatırlanacak bir içerik deneyimi sunmaya yönelik benzersiz yaklaşımlara kadar. Web tasarımında neler olup bittiğinin çoğu ilham kaynağına ve tasarım yeterliliği ile elde edilen benzersiz bükülmelerle kullanıcılara ve okuyuculara nasıl ilham verileceğine bağlıdır.