İçindekiler
Şu anda klasik düz tasarımdan yenilikçi yeni Materyal Tasarımına kadar farklı tasarım modellerini uygulayabilen çok çeşitli web sayfalarımız var.
Ancak web siteleri yapmanın oldukça farklı ve tuhaf bir yolu var, yalnızca bilgilendirici olan ve bu şekilde çok karmaşık bir işlevselliğe sahip olmayan web siteleri. Bu durumlar için efekti uygulayan tek sayfalık bir web sitesi kullanabiliriz. Paralaks.
Bu efekt bize birden fazla düzlemimiz olduğu ve hatta birden fazla sayfamız olduğu hissini verir. O zaman nasıl uygulayabileceğimize bakalım.
HTML Kodu
Bizim HTML Belli sınıflara göre kapsayıcı olarak tanımlayacağımız div'den oluşan oldukça basit bir yapıdan oluşacak, buna ek olarak her zamanki gibi stil sayfalarımızı da dahil edeceğiz. JavaScript. Bu örnek için her ikisine de güveneceğiz jQuery beğenmek Underscore.js bu alıştırmada bize yardımcı olacak çeşitli işlevler sağlayan bir kitaplık:
Ev ParalaksSağanak
film 1
Profesyonel
Film 2
Rezervuar Köpekleri
Film 3
CSS kodu
Stil sayfamız için biraz daha çalışacağız ve özelliklerini kullanacağız. CSS3 ithafen dönüştürür arka planlarımızda yukarı veya aşağı hareket etme efekti vermek için buna ek olarak, birden çok sayfamız olarak hizmet edecek farklı arka plan resimleri atamak için belgemizin alt öğelerini kullanacağız, hadi sayfamızın bu parçasını görelim. CSS:
.background {arka plan boyutu: kapak; arka plan tekrarı: tekrar yok; arka plan konumu: merkez merkez; taşma: gizli; irade değişikliği: dönüştürmek; -webkit-backface-görünürlük: gizli; arka yüz görünürlüğü: gizli; yükseklik: 130vh; pozisyon: sabit; genişlik: %100; -webkit-transform: translateY (30vh); -ms-dönüşüm: çevirY (30vh); transform: translateY (30vh); -webkit-geçiş: tüm 1.2s kübik-bezier (0.22, 0.44, 0, 1); geçiş: tümü 1.2s kübik-bezier (0.22, 0.44, 0, 1); } .background: önce {içerik: ""; pozisyon: mutlak; genişlik: %100; yükseklik: %100; üst: 0; sol: 0; sağ: 0; alt: 0; arka plan rengi: rgba (0, 0, 0, 0.3); } .background: birinci çocuk {arka plan resmi: url (skyfall.jpg.webp); -webkit-dönüşüm: çeviriY (-15vh); -ms-dönüşüm: çevirY (-15vh); transform: translateY (-15vh); } .background: first-child .content-wrapper {-webkit-transform: translateY (15vh); -ms-dönüşüm: translateY (15vh); transform: translateY (15vh); } .background: nth-child (2) {background-image: url (theprofessional.jpg.webp); } .background: nth-child (3) {background-image: url (reservoirdogs.png.webp); } .background: nth-child (1) {z-endeksi: 3; } .background: nth-child (2) {z-endeksi: 2; } .background: nth-child (3) {z-endeksi: 1; }Stil sayfamızı bitirmek için, her bir kapsayıcıya dahil edilecek metne ve bunların her birinin web sitesinde yaptığımız kaydırmaya göre yapması gereken geçişi, yukarı doğru hareket edip etmediğimizi belirten bazı değişiklikler uygulayacağız. veya aşağı
.content-wrapper {yükseklik: 100vh; ekran: -webkit-kutusu; ekran: -webkit-flex; ekran: -ms-flexbox; ekran: esnek; -webkit-box-pack: merkez; -webkit-haklı-içerik: merkez; -ms-flex paketi: merkez; haklı içerik: merkez; metin hizalama: merkez; -webkit-flex-flow: sütun nowrap; -ms-flex-flow: sütun nowrap; esnek akış: sütun nowrap; renk: #fff; yazı tipi ailesi: Montserrat; metin dönüştürme: büyük harf; -webkit-transform: translateY (40vh); -ms-dönüşüm: çevirY (40vh); transform: translateY (40vh); irade değişikliği: dönüştürmek; -webkit-backface-görünürlük: gizli; arka yüz görünürlüğü: gizli; -webkit-geçiş: tüm 1.7s kübik-bezier (0.22, 0.44, 0, 1); geçiş: tüm 1.7s kübik-bezier (0.22, 0.44, 0, 1); } .content-title {yazı tipi boyutu: 12vh; satır yüksekliği: 1.4; } .background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); transform: translate3d (0, -15vh, 0); } .background.up-scroll .content-wrapper {-webkit-transform: translateY (15vh); -ms-dönüşüm: translateY (15vh); transform: translateY (15vh); } .background.up-scroll + .background {-webkit-transform: translate3d (0, 30vh, 0); transform: translate3d (0, 30vh, 0); } .background.up-scroll + .background .content-wrapper {-webkit-transform: translateY (30vh); -ms-dönüşüm: çevirY (30vh); transform: translateY (30vh); } .background.down-scroll {-webkit-transform: translate3d (0, -130vh, 0); transform: translate3d (0, -130vh, 0); } .background.down-scroll .content-wrapper {-webkit-transform: translateY (40vh); -ms-dönüşüm: çevirY (40vh); transform: translateY (40vh); } .background.down-scroll + .background: değil (.down-scroll) {-webkit-transform: translate3d (0, -15vh, 0); transform: translate3d (0, -15vh, 0); } .background.down-scroll + .background: değil (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-dönüşüm: translateY (15vh); transform: translateY (15vh); }
JavaScript kodu
Sonunda bizim JavaScript ne olduğunu halledeceğiz dinleyici yani kullanıcının web sayfasında gezinmek için fareyi ne zaman kullandığını bilmek. Buna ek olarak, kullanılan tarayıcıyı tespit edeceğiz ve bir kaydırıcının tekrar değiştirilebilmesi için sahip olması gereken süre, kaydırma hassasiyeti ve sahip olacağımız sayfa sayısı gibi bazı sabit değerler oluşturacağız.
var zaman = yanlış; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); var duyarlılık Kaydırma = 30; var süreSliders = 600; var sliderActual = 0; var sliderTotales = $ (". arka plan").uzunluk; fonksiyon paralaks etkisi (evt) {if (esFirefox) {delta = evt.detail * (-120); } else if (esInternetE) {delta = -evt.deltaY; } başka {delta = evt.wheelDelta; } if (zaman! = doğru) {if (delta = ScrollSensitivity) {zaman = doğru; if (currentSlider! == 0) {currentSlider--; } önceki madde (); süreSliderTime (durationSliders); }}}Son olarak, bir sonrakine geçmek için görüntünün sabitlenmesi gereken zamanı ve olaylarımızı dinleyenleri belirleyeceğiz, ayrıca görüntülerden birinin ne zaman olduğunu bilmek için sınıf ekleme veya çıkarma işlevini kullanacağız. altta veya üstte:
function timeSliderDuration (slideDuration) {setTimeout (işlev () {zaman = yanlış;}, slaytSüresi); } var eventScrollMouse = Firefox nedir? "DOMMouseScroll": "tekerlek"; window.addEventListener (ScrollMouse olayı, _.throttle (Parallax efekti, 60), false); function eleNext () {var $ slidePrevious = $ (". arka plan") eq (currentSlider - 1); $ slideAnterior.removeClass ("yukarı kaydırma").addClass ("aşağı kaydırma"); } function öncekiItem () {var $ slideSig = $ (". arka plan") eq (currentSlider); $ slideSig.removeClass ("aşağı kaydırma").addClass ("yukarı kaydırma"); }Kodumuz bittiğinde, sadece uygulamamızın çalışmasını test etmemiz gerekiyor, bunun için davranışı görmek için sadece faremizin kaydırmasını kullanmamız gerekiyor, görelim:
Bu etki sitelerimize oldukça taze bir his verir, ancak portföyler veya bilgi sayfaları gibi belirli uygulamalarda kullanılması tavsiye edilir, çünkü diğer türde süreçleri veya bilgileri işleyen diğer herhangi bir web sitesi kullanıcıyı yorar ve ona olan ilgisini kaybeder. . . .
