Animasyonlu bir bölünmüş ekran açılış sayfası oluşturun

Açılış sayfanızda çok önemli bir unsurdur. Web Sitesi Düzeni . İşinizi veya sattığınız ürünü tanıtmanız gereken ilk gerçek fırsattır, bu yüzden tasarımı anahtardır. Açılış sayfaları, harekete geçme çağrısı (CTA) olarak bilinen tek bir odaklı amaç ile tasarlanmıştır. Aramaları işlemeye ve aramaları tamamlamak için renklerin ve görüntülerin kullanımı kullanıcı deneyimi olmalı.

• Bu öğretici için çalışma kodlamasını görün

Bu eğitimde, kurgusal bir moda markası için bir ilgi çekici bir açılış sayfası oluşturulur. Hover üzerinde gerçekleşen büyük resimler ve animasyonlu geçişler içeren bölünmüş ekran tasarımının etrafında ortalanacak. Bu sayfa eylem düğmelerine iki net aramaya sahip olacak ve HTML kullanıyor olacağız, Sos Şekillendirme ve ES6 sözdizimini kullanan Vanilya Javascript'in bir dokunuşu için (emin olmayı unutmayın. ağ sağlayıcısı Web sitesi ihtiyaçlarınız için uygundur). Çok karmaşık? Kod gerekmeden bir web sitesi oluşturun, basit bir şekilde deneyin Web Sitesi Oluşturucu .

01. Kurulum

Kodepen kullanıyorsanız, CSS'nin kalem ayarlarında 'SCSS' olarak ayarlandığından emin olun. Bu değişikliği Ayarlar sekmesine tıklayarak, 'CSS'yi seçin ve CSS ön işlemcisini açılır seçeneklerde SCSS'ye değiştirebilirsiniz.

O zaman HTML'imize eklemeye başlayabiliriz. 'Sol' olarak adlandırılan bir bölümü ve bir konteyner sınıfındaki 'sağ' adlı bir bölümü saracağız, her iki bölümden de bir 'ekran' sınıfı verildi.

 & lt; div class = "konteyner" & gt;
  & lt; bölüm sınıfı = "Ekran sol" & gt;
  & lt; / bölüm & gt;
  & lt; bölüm sınıfı = "ekranı sağ" & gt;
  & lt; / bölüm & gt;
& lt; / div & gt; 

02. HTML'yi bitirin

HTML'imizi sonlandırmak için, kullanan her bölüm için bir başlık ekleyeceğiz. h1 etiket. Altında, bu gerçek bir dünya projesiyse, başka bir sayfaya bağlanacak bir düğmeye eklememiz gerekecek. Bunu bir sınıf vereceğiz buton İşleri güzel ve basit tutmak için.

 & lt; div class = "konteyner" & gt;
   & lt; bölüm sınıfı = "Ekran sol" & gt;
    Mens modası & lt; / h1 & gt;
      & lt; button & gt;
       & lt; a href = "#" sınıf = "düğmesi" & gt; daha fazla bilgi edinin; / a & gt;
      & lt; / button & gt;
    & lt; / bölüm & gt;

    & lt; bölüm sınıfı = "ekranı sağ" & gt;
       Bayan modası & lt; / h1 & gt;
        & lt; button & gt;
          & lt; a href = "#" sınıf = "düğmesi" & gt; daha fazla bilgi edinin; / a & gt;
        & lt; / button & gt;
     & lt; / section & gt; 

03. Süs değişkenlerini keşfedin

Hepimizin Sass hakkındaki sevdiğimiz bir şey değişkenlerin kullanımıdır. Yerel CSS değişkenleri daha fazla destek alıyor olsa bile, SASS kullanarak işleri güvende tutacağız. Bunları üstüne koyacağız. .scss ve istediğiniz renkleri seçebilirsiniz, ancak kullanabilirsiniz. rgba Değerler bize daha fazla esneklik verecektir.

 / ** değişkenler ** /

$ konteyner-bgcolor: # 444;
$ sol-BGColor: RGBA (136, 226, 247, 0.7);
$ Sol düğmesi - Hover: RGBA (94, 226, 247, 0.7);
$ Right-BGColor: RGBA (227, 140, 219, 0.8);
$ Sağ düğme-Hover: RGBA (255, 140, 219, 0.7);
$ Hover genişliği:% 75;
$ küçük genişlik:% 25;
$ AnimatesPeed: 1000ms; 

04. Vücut stilini ayarlayın

Öncelikle, tüm varsayılan dolgu ve kenar boşluğunu gövdeye kadar temizleyeceğiz ve ardından font ailesini SAN'ları açacak şekilde ayarlayacağız. Bu sadece düğmeyi etkileyecektir, bu yüzden ne kullandığımız yazı tipi önemli değil. O zaman genişlik ve yüksekliği ayarlayacağız. 100% ve X ekseni üzerinde taşan hiçbir şeyin gizlendiğinden emin olun.

 html, body {
  Dolgu: 0;
  Marj: 0;
  Yazı Tipi ailesi: 'Açık Sans', Sans-Serif;
  Genişlik:% 100;
  Yükseklik:% 100;
  taşma-x: gizlenmiş;
} 

05. Bölüm başlıklarını stil

Bölüm başlıkları için bir Google yazı tipi seçme zamanı - Playfair ekranı seçtik. Sonra kullanma translate Bölüm başlıklarının her zaman x ekseni üzerinde ortalandığından emin olabiliriz.

 H1 {
  Yazı tipi boyutu: 5rem;
  Renk: #FFF;
  Konum: Mutlak;
  Sol:% 50;
  en iyi 20%;
  dönüşüm: çevirek (-50%);
  beyaz boşluk: nowrap;

  Yazı tipi ailesi: 'Playfair ekranı', serif;
} 

06. CTA'ların öne çıkmasını sağlayın

Düğmelerimiz, harekete geçme çağrılarımız olarak hareket edecektir, bu yüzden bunların tıklamaları kolay olduğu yerlerde büyük, cesur ve konumlandırılmış olması gerekir. Her iki düğmenin de beyaz bir sınır ve ilginç bir geçiş etkisi olacaktır. Her iki düğme için varsayılan stiller aynı olacaktır, ancak onların renklerini vurgulu olarak değiştireceğiz.

 .button {
  Ekran bloğu;
  Konum: Mutlak;
  Sol:% 50;
  Üst:% 50;
  Yükseklik: 2.6REM;
  Dolgu-top: 1.2rem;
  Genişlik: 15rem;
  Metin Hizası: Merkez;
  Beyaz renk;
  Sınır: 3px katı #fff;
  Sınır-yarıçap: 4px;
  Yazı Tipi Ağırlığı: 600;
  Metin dönüşümü: büyük harf;
  Metin Dekorasyonu: Yok;
  dönüşüm: çevirek (-50%);
  Geçiş: tüm .2S; 

Ana düğmeler güzel basit bir vurgulu etkisi olacaktır ve renk için belirttiğimiz SASS değişkenlerini, sayfanın arka planına benzer bir renk olacaktır.

 .Screen.left .button: Hover {
  Arka plan rengi: $ sol-düğme;
  Sınır rengi: $ sol-düğme;
}

.Screen.right .button: Hover {
  Arka plan rengi: $ sağ düğme-hover;
  Sınır rengi: $ sağ buton-Hover; 

07. Konteyner arka planını ve ekranları ayarlayın

Konteyner sınıfı sayfa ambalajımız olarak hareket edecektir ve bunun konumunu göreceli olarak ayarlayacağız, çünkü ekranları mutlak konumlandırmaya yerleştirmek istiyoruz. Konteynırını varsayılan bir arka plan rengini vereceğiz, ancak tabii ki bu görülmeyeceğimiz için her iki ekran arka planına farklı renkler ayarlayacağız.

 .container {
  Konum: Göreceli;
  Genişlik:% 100;
  Yükseklik:% 100;
  Arka plan: $ konteyner-bgcolor;
  
    .Screen {
      Konum: Mutlak;
      Genişlik:% 50;
      Yükseklik:% 100;
      Taşma: Gizli;
    }
} 

08. Arka plan resimlerini ekleyin

Hem sol hem de sağ bölümler bir görüntü gösterecek ve web sitelerinden kabiliyetsiz stok görüntüleri bulabilirsiniz. Bozulmak , Pixabay veya Pexels (Bu öğreticide kullandığım). İşleri kolaylaştırmak için, CSS'imize bağlayabileceğimiz IMGBB adlı ücretsiz bir resim barındırma ve paylaşım hizmeti kullandım.

 .screen.left {
  Sol: 0;
  Arka plan: URL ('https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg') Center Center No-Repeer;
  Arka plan boyutu: Kapak;
  
    & amp;: önce {
       Konum: Mutlak;
      İçerik: "";
      Genişlik:% 100;
      Yükseklik:% 100;
      Arka plan: $ sol-bgcolor;
    }
} 

Sayfanın sağ tarafı, IMGBB'yi kullanarak bir arka plan görüntüsü de görüntüleyecektir ve arka plan rengini pembeye ayarlayacağız. Yine, arka plan boyutunu ayarladık. örtmek . Bu, bizim durumumuzda olan tüm elemanın tamamını kaplamamıza izin verecektir. .ekran sınıf.

 .screen.right {
  Sağ: 0;
  Arka plan: URL ('https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg') Center Center No-repeer;
  Arka plan boyutu: Kapak;
  
   & amp;: önce {
      Konum: Mutlak;
      İçerik: "";
      Genişlik:% 100;
      Yükseklik:% 100;
      Arka plan: $ sağ bgcolor;
    }
} 

09. Geçişler ve Hover efektleri ekleyin

Hover etkisinin her iki ekran üzerindeki animasyon hızı, değişkenimizin değerini tutan bir geçişle kontrol edilecektir. $ AnimatesPeed , hangisi 1000ms (bir saniye). O zaman, animasyona biraz rahatlatarak bitireceğiz, bu da bize daha yumuşak bir animasyon yapmanıza yardımcı olacak bir rahatlık ve dışarıda.

 .Screen.left, .screen.right, .screen.right: Daha önce, .screen.left: önce {
  Geçiş: $ AnimatesPeed Tüm kolaylık dışı;
} 

Şimdi olmak istediğimiz şey, sol ekranın üzerine geldiğinizde, JavaScript kullanarak bu bölüme eklenen bir sınıf olacaktır (daha sonraki bir adımda yazacağımız). Bu sınıf eklendiğinde, o ekran, belirttiğimiz değişkenin genişliği ne olursa olsun, bu% 75 olacaktır ve daha sonra sağ taraf daha küçük genişlik değişkenine (% 25) ayarlanacaktır.

 .Hover-sol .Left {
  Genişlik: $ Hover-width;
}

.Hover-sol. Dright {
  Genişlik: $ küçük genişlik;
}
.Hover-sol. Right: Önce {
  Z-index: 2;
} 

Bu, JavaScript kullanarak Fare Hover'de yeni bir sınıfın ekleneceği sol taraf ile tamamen aynıdır ve doğru ekran buna göre uzanır. Ayrıca emin olmamız gerekiyor z-index ayarlandı 2 Böylece CTA düğmesi daha belirgin hale gelir.

 .Hover-right .right {
  Genişlik: $ Hover-width;
}

.Hover-sağ .left {
  Genişlik: $ küçük genişlik;
}

.Hover-sağ .Left: Önce {
  Z-index: 2;
} 

10. Javascript'e gidin

CSS sınıflarını eklememize ve kaldırmamıza yardımcı olmak için Vanilla Javascript dokunuşunu kullanacağız ve yeni ES6 özelliklerini de kullanacağız. Yapmamız gereken ilk şey, bazı sabit değişkenleri ilan etmektir.

Çünkü kullanacağız belge Bir kereden fazla, adında sabit bir değişken belirleyeceğiz doc Ve belgeyi bunun 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. Sabit kullandığımızın nedeni, bunların değerini değiştirmek istemedikümüzün, bu nedenle sabitleri kullanmak mantıklıdır. Bunlar şimdi ayarla, devam edebilir ve onlara bazı fare etkinlikleri ekleyebiliriz.

 Const Hak = Doc.Queryselector (". Sağ");
Const Sol = Doc.Queryselector (". Sol");
Const Conster = Doc.Queryselector (". Konteyner"); 

Kullanmak ayrıldı Sabit değişken Son adımda ilan ettiğimiz, şimdi buna bir olay dinleyicisi ekleyebiliriz. Bu olay olacak mousenter olay ve bir geri arama işlevi kullanmak yerine, adlı başka bir ES6 özelliğini kullanacağız. Arrow fonksiyonları '(() = & gt;) .

 // Hover'deki konteyner elemanına bir sınıf ekler
sol.addeventlistener ("mouseenter", () = & gt; {
  konteyner.classlist.add ("sola");
}); 

11. Bir sınıf ekleyin ve kaldırın

Son adımda, etkinlik dinleyicimiz bir mousenter Ana konteyner sınıfını hedef alan ve yeni bir sınıf ekleyen olay Hover-sola Sol bölüm öğesine. Buna eklendi ile, şimdi çıktığımızda onu kaldırmamız gerekiyor. Bunu kullanarak bunu yapacağız. mouselave olay ve .Kaldır() yöntem.

 // Hover'a eklenen sınıfı kaldırır
sol.addeventlistener ("Mouseleave", () = & gt; {
  konteyner.classlist.remove ("sola");
}); 

Şimdiye kadar sol ekranda her şeyi yaptık. Şimdi Javascript'i bitireceğiz ve sağ bölüm öğelerinde sınıfları ekleyip kaldıracağız. Yine, her şeyi güzel ve düzenli görünmek için burada ok işlevi sözdizimini kullandık.

 sağ.addeventlistener ("mouseenter", () = & gt; {
  konteyner.classlist.add ("Hover-sağ");
});

sağ.addeventlistener ("Mouseleave", () = & gt; {
  konteyner.classlist.remove ("Hover-sağ");
}); 

12. Duyarlı hale getirin

Hiçbir proje yok - ne kadar büyük ya da küçük olursa olsun - duyarlı olmaktan kaçınmalıdır. Öyleyse, bu adımda CSS'lerimize bazı medya sorgularını ekleyeceğiz ve bu küçük projeyi mobil cihazlara uygun olarak yapabildiğimiz kadarıyla uyum sağlayacağız. Kontrol etmeye değer Orijinal Kodepen Bunun nasıl çalıştığını görmek için.

 @Media (Max-width: 800px) {
  h1 {
    Yazı tipi boyutu: 2rem; }

  .buton {
    Genişlik: 12REM;
  } 

Sayfamızın genişliğinin 800px'e düştüğünde, yazı tipi ve düğmelerinin boyut olarak azalacağından emin olduk. Öyleyse, işleri kapatmak için yüksekliği de hedeflemek istiyoruz ve düğmelerinizin sayfa yüksekliği 700px'in altına düştüğünde sayfadan aşağıya doğru hareket ettiğinden emin olun.

 @Media (maksimum yükseklik: 700px) {
  .buton {
    Üst:% 70;
}} 

Sayfalarınızı kaydetmek ister misiniz? Onları PDF olarak dışa aktarın ve güvenli bir şekilde saklayın Bulut depolama .

Web Tasarım Etkinliği Londra'yı oluştur 19-21 Eylül 2018 tarihinde iade, bir sürü endüstri lideri hoparlörler, tam gün atölye ve değerli ağ fırsatları sunan, kaçırmayın - kaçırmayın. Şimdi Üretim Biletinizi Alın .

Bu makale başlangıçta net dergide yayınlandı Sayı 305 . Şimdi abone olun .

Daha fazla oku:

• 5 sansasyonel yeni web siteleri ilham alınacak
• Animasyonlu bir 3D metin efekti oluşturun
• 19 büyük paralaks kaydırma web siteleri