CSS Teknikleri
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.
