İçerik
- 01. Hazırlanın
- 02. HTML'yi tamamlayın
- 03. Sass değişkenlerini keşfedin
- 04. Vücut stilini ayarlayın
- 05. Bölüm başlıklarının stilini belirleyin
- 06. CTA'ları öne çıkarın
- 07. Konteyner arka planını ve ekranlarını ayarlayın
- 08. Arka plan resimleri ekleyin
- 09. Geçişler ve vurgulu efektler ekleyin
- 10. JavaScript'e geçin
- 11. Bir sınıf ekleyin ve kaldırın
- 12. Duyarlı hale getirin
Açılış sayfanız, web sitenizin düzeninde çok önemli bir unsurdur. İşletmenizi veya sattığınız ürünü tanıtmak için sahip olduğunuz ilk gerçek fırsattır, dolayısıyla tasarımı çok önemlidir. Açılış sayfaları, eylem çağrısı (CTA) olarak bilinen tek bir odaklanmış hedefle tasarlanmıştır. Harekete geçirici mesajları ve kullanıcı deneyimini tamamlamak için renklerin ve resimlerin kullanılması bir zorunluluktur.
- Bu öğretici için çalışan CodePen'e bakın
Bu eğiticide, kurgusal bir moda markası için ilgi çekici bir açılış sayfasının nasıl oluşturulacağını inceleyeceğiz. Fareyle üzerine gelindiğinde gerçekleşen büyük görüntüler ve animasyonlu geçişlerle bölünmüş ekranlı bir tasarım etrafında ortalanacak.Bu sayfada iki net harekete geçirici mesaj düğmesi olacak ve stil için HTML, Sass ve ES6 sözdizimini kullanan bir vanilya JavaScript dokunuşu kullanacağız (web barındırma hizmetinizin web sitenizin ihtiyaçlarına uygun olduğundan emin olun). Çok karmaşık? Koda ihtiyaç duymadan bir web sitesi oluşturun, basit bir web sitesi oluşturucuyu deneyin.
01. Hazırlanın
CodePen kullanıyorsanız, Kalem ayarlarında CSS'nin "SCSS" olarak ayarlandığından emin olun. Bu değişikliği ayarlar sekmesine tıklayarak yapabilir, "CSS" yi seçebilir ve açılır seçeneklerden CSS Ön İşlemcisini SCSS olarak değiştirebilirsiniz.
Ardından HTML’imize eklemeye başlayabiliriz. Bir kapsayıcı sınıf içinde "sol" ve "sağ" adlı bir bölümü her iki bölüme de "ekran" sınıfı verilecek şekilde kaydıracağız.
div> bölüm> / bölüm> bölüm> / bölüm> / div>
02. HTML'yi tamamlayın
HTML'imizi son haline getirmek için, her bölüm için bir başlık ekleyeceğiz. h1 etiket. Bunun altına, gerçek dünya projesi olsaydı başka bir sayfaya bağlanacak bir düğme eklememiz gerekecek. Buna bir sınıf vereceğiz buton işleri güzel ve basit tutmak için.
div> section> h1> Erkek Modası / h1> button> a href = "#"> Daha Fazla Bilgi Edinin / a> / button> / section> section> h1> Kadın Modası / h1> button> a href = "#"> Öğrenin Diğer / a> / düğmesi> / bölüm>
03. Sass değişkenlerini keşfedin
Hepimizin Sass hakkında sevdiğimiz tek şey değişkenlerin kullanımıdır. Yerel CSS değişkenleri daha fazla destek alsa da, Sass kullanarak işleri güvende tutacağız. Bunları bizim üstümüze koyacağız .scssve istediğiniz rengi seçebilirsiniz, ancak rgba değerler bize daha fazla esneklik sağlayacaktır.
/ * * Değişkenler * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ sol düğme üzerine gelme: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ sağ düğme üzerine gelme: rgba (255, 140, 219, 0.7); $ vurgulu genişlik:% 75; $ küçük genişlik:% 25; $ animateSpeed: 1000 ms;
04. Vücut stilini ayarlayın
İlk olarak, tüm varsayılan dolgu ve kenar boşluğunu gövdeye temizleyeceğiz ve ardından yazı tipi ailesini Open Sans olarak ayarlayacağız. Bu yalnızca düğmeyi etkileyeceğinden, hangi yazı tipini kullandığımızın önemi kalmaz. Sonra genişliği ve yüksekliği şu şekilde ayarlayacağız: 100% ve X ekseninde taşan her şeyin gizlendiğinden emin olun.
html, gövde {dolgu: 0; kenar boşluğu: 0; font-family: "Open Sans", sans-serif; genişlik:% 100; yükseklik:% 100; overflow-x: gizli; }
05. Bölüm başlıklarının stilini belirleyin
Bölüm başlıkları için bir Google yazı tipi seçme zamanı - Playfair Display'i seçtik. Sonra kullanarak translateX Bölüm başlıklarının her zaman X ekseninde ortalandığından emin olabiliriz.
h1 {yazı tipi boyutu: 5rem; renk: #fff; konum: mutlak; sol:% 50; en iyi 20%; dönüşümü: translateX (-% 50); beyaz boşluk: nowrap; font-family: "Playfair Display", serif; }
06. CTA'ları öne çıkarın
Düğmelerimiz harekete geçirici mesajlarımız olarak işlev görecek, bu nedenle bunların büyük, kalın ve tıklaması kolay olan yerlere yerleştirilmiş olması gerekir. Her iki düğmenin de beyaz bir sınırı ve ilginç bir geçiş efekti olacaktır. Her iki düğme için varsayılan stiller aynı olacaktır, ancak fareyle üzerine gelindiğinde renklerini değiştireceğiz.
.button {display: block; konum: mutlak; sol:% 50; üst:% 50; yükseklik: 2.6rem; padding-top: 1.2rem; genişlik: 15rem; metin hizalama: merkez; Beyaz renk; border: 3px katı #fff; kenarlık yarıçapı: 4px; yazı tipi ağırlığı: 600; metin dönüşümü: büyük harf; metin dekorasyonu: yok; dönüşümü: translateX (-% 50); geçiş: tümü .2s;
Ana düğmeler hoş bir basit vurgulu etkiye sahip olacak ve renk için belirlediğimiz Sass değişkenlerini kullanacağız, bu da sayfanın arka planına benzer bir renk olacak.
.screen.left .button: {arka plan rengi: $ sol-düğme-üzerine gelme; border-color: $ sol düğme üzerine gelme; } .screen.right .button: imleci {arka plan rengi: $ sağ-düğme-üzerine gelme; border-color: $ sağ düğme üzerine gelme;
07. Konteyner arka planını ve ekranlarını ayarlayın
Kapsayıcı sınıfı, sayfa sarmalayıcımız olarak hareket edecek ve bunun konumunu göreceli olarak ayarlayacağız, çünkü ekranları mutlak konumlandırmaya konumlandırmak istiyoruz. Konteynere varsayılan bir arka plan rengi vereceğiz, ancak elbette bu görünmeyecek çünkü her iki ekran arka planına da farklı renkler ayarlayacağız.
.container {konum: göreli; genişlik:% 100; yükseklik:% 100; arkaplan: $ container-BgColor; .screen {konum: mutlak; genişlik:% 50; yükseklik:% 100; taşma: gizli; }}
08. Arka plan resimleri ekleyin
Hem sol hem de sağ bölüm bir resim gösterecek ve Unsplash, Pixabay veya Pexels gibi web sitelerinden telifsiz stok görseller bulabilirsiniz (bu eğiticide kullandım). İşleri kolaylaştırmak için, CSS'mizde bağlanabileceğimiz imgbb adlı ücretsiz bir resim barındırma ve paylaşma hizmeti kullandım.
.screen.left {sol: 0; arkaplan: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) merkez merkez yineleme yok; arka plan boyutu: kapak; &: {konumdan önce: mutlak; içerik: ""; genişlik:% 100; yükseklik:% 100; arkaplan: $ left-bgColor; }}
Sayfanın sağ tarafı da imgbb kullanarak bir arka plan resmi gösterecek ve arka plan rengini pembe olarak ayarlayacağız. Yine, arka plan boyutunu şu şekilde ayarladık: örtmek. Bu, kapsayıcı öğenin tamamını kapsamamıza izin verecektir, bu bizim durumumuzda .ekran sınıf.
.screen.right {sağ: 0; arkaplan: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) merkez merkez yineleme yok; arka plan boyutu: kapak; &: {konumdan önce: mutlak; içerik: ""; genişlik:% 100; yükseklik:% 100; arkaplan: $ right-bgColor; }}
09. Geçişler ve vurgulu efektler ekleyin
Her iki ekranda da fareyle üzerine gelme efektimizin animasyon hızı, değişkenimizin değerini tutan bir geçişle kontrol edilecektir. $ animateSpeed1000 ms (bir saniye). Ardından, animasyonu biraz yumuşatarak bitireceğiz, bu da bize daha yumuşak bir animasyon sağlamamıza yardımcı olacak bir giriş ve çıkış kolaylığıdır.
.screen.left, .screen.right, .screen.right: önce, .screen.left: {geçişten önce: $ animateSpeed tümü kolay giriş; }
Şimdi olmasını istediğimiz şey, sol ekranın üzerine geldiğinizde, o bölüme JavaScript kullanılarak (daha sonraki bir adımda yazacağımız) bir sınıf eklenecek olmasıdır. Bu sınıf eklendiğinde, o ekran belirlediğimiz değişkenin genişliği ne olursa olsun genişleyecektir - bu% 75 olacaktır ve ardından sağ taraf daha küçük genişlik değişkenine (% 25) ayarlanacaktır.
.hover-left .left {genişlik: $ hover-genişlik; } .hover-left .right {genişlik: $ küçük genişlik; } .hover-left .right: {z-endeksi: 2'den önce; }
Bu, JavaScript kullanılarak fareyle üzerine gelindiğinde yeni bir sınıfın ekleneceği sol tarafla tamamen aynı şekilde çalışır ve sağ ekran buna göre genişleyecektir. Ayrıca emin olmalıyız z-endeksi ayarlandı 2 böylece CTA düğmesi daha belirgin hale gelir.
.hover-right .right {width: $ hover-width; } .hover-right .left {genişlik: $ küçük-genişlik; } .hover-right .left: {z-endeksi: 2'den önce; }
10. JavaScript'e geçin
CSS sınıfları eklememize ve kaldırmamıza yardımcı olması için vanilya JavaScript kullanacağız ve ayrıca yeni ES6 özelliklerinden bazılarını da kullanacağız. Yapmamız gereken ilk şey, bazı sabit değişkenler bildirmek.
Çünkü kullanacağız belge bir kereden fazla, adı verilen sabit bir değişken ayarlayacağız belge ve belgeyi içinde saklayın, böylece 'belge' kelimesini güzel ve kısa tutabiliriz.
const doc = belge;
Şimdi, depolayacak üç sabit daha ayarlamamız gerekiyor. .sağ, .ayrıldı ve .container seçiciler. Sabitleri kullanmamızın nedeni, bunların değerini değiştirmek istemediğimizi bilmemizdir, bu nedenle bir sabit kullanmak mantıklıdır. Bunlar şimdi ayarlandığında, devam edebilir ve bunlara bazı fare olayları ekleyebiliriz.
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); const container = doc.querySelector (". kapsayıcı");
Kullanmak ayrıldı son adımda tanımladığımız sabit değişkeni artık ona bir olay dinleyicisi ekleyebiliriz. Bu olay olacak mouseenter olayı ve bir geri arama işlevi kullanmak yerine, adı verilen başka bir ES6 özelliğini kullanacağız. Ok İşlevleri '(() =>).
// hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");}) üzerindeki konteyner öğesine bir sınıf ekler;
11. Bir sınıf ekleyin ve kaldırın
Son adımda, olay dinleyicimiz bir mouseenter ana kapsayıcı sınıfını hedefleyen ve adında yeni bir sınıf ekleyen olay fareyle sol sol bölüm elemanına. Bu çağrı eklendiğinde, şimdi fareyle üzerine geldiğimizde onu kaldırmamız gerekiyor. Bunu kullanarak yapacağız Mouseleave olay ve .Kaldır() yöntem.
// hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");}) üzerine eklenen sınıfı kaldırır;
Şimdiye kadar sol ekrandaki her şeyi yaptık. Şimdi JavaScript'i bitirip sağ bölüm öğelerine sınıfları ekleyip kaldıracağız. Her şeyin güzel ve düzenli görünmesini sağlamak için burada yine ok işlevi sözdizimini kullandık.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Duyarlı hale getirin
Ne kadar büyük veya küçük olursa olsun hiçbir proje, duyarlı hale getirilmekten kaçınmamalıdır. Dolayısıyla, bu adımda CSS'mize bazı medya sorguları ekleyeceğiz ve bu küçük projeyi elimizden geldiğince mobil cihazlara uyarlanabilir hale getireceğiz. Bunun nasıl çalıştığını görmek için orijinal CodePen'e bakmaya değer.
@media (maks. genişlik: 800 piksel) {h1 {yazı tipi boyutu: 2rem; }. düğmesi {genişlik: 12rem; }
Sayfamızın genişliği 800 piksele düştüğünde yazı tipi ve düğmelerin boyut olarak küçülmesini sağladık. Bu nedenle, işleri bitirmek için yüksekliği de hedeflemek ve sayfa yüksekliği 700 pikselin altına düştüğünde düğmelerimizin sayfanın aşağısına hareket etmesini sağlamak istiyoruz.
@media (maks. yükseklik: 700 piksel) {. düğmesi {üst:% 70; }}
Sayfalarınızı kaydetmek mi istiyorsunuz? Bunları PDF olarak dışa aktarın ve güvenli bulut depolamaya kaydedin.
Web tasarım etkinliği Londra'yı Oluştur 19-21 Eylül 2018'de sektör lideri konuşmacılarla dolu bir program, tam bir günlük atölye çalışmaları ve değerli ağ oluşturma fırsatları sunan geri dönüşler - bunu kaçırmayın. Generate biletinizi şimdi alın.
Bu makale ilk olarak net dergisinde yayınlandı sorun 305. Şimdi abone ol.
