Bir ziyaretçinin dikkatini web sitenize çekmek için harika bir yol, bir "açılış ekranı" veya bir "giriş ekranı" dır. Ancak, başarılı olanı yapmak basit bir sebepten dolayı çok zor: Sıçrama ekranları kullanıcıları rahatsız ediyor.
Sıçrama ekranları, hızlı bir şekilde görünürlerse ve kolayca reddedilebilirlerse çalışabilirler. Görsel olarak çarpıcı ve güzel olabilirler ve kullanıcının daha fazla bilgi edinmek için gezinmesini ister. Intros'un bu tarzı tek sayfalık kaydırma web sitelerinde çok iyi çalışır. Ya da düz tasarım trendiyle modaya dönüşen web tasarımının 'banner stili'. Aynı zamanda şu anda her şeyden öfkeli olan güzel bir “arka plan video” tarzı intro yapmak çok faydalı olabilir.
Bugün size göstermek istediğim, bu etkiyi elde etmenin, web deneyimlerine hoş görünmek için kolayca değiştirebileceğiniz temel bir yöntem.
Ne yaptığımızı görmek isterseniz, orada Burada bir demo. Ve yapabilirsin Tüm kaynak dosyaları buradan indirebilirsiniz.
İşaretleme
Bunun için işaretlemeyi çok basit tutmaya çalışacağız. Böylelikle önceden var olan sitelerde ve yeni projelerde uygulanabilir.
Yani temelde yapmak istediğimiz şey iki div. Biri bir sıçrama sınıfı ve başka bir sargı sınıfı ile. (Bunu önceden varolan bir sitede uygularsanız, sarıcı sınıfı sizin için bir şekilde zaten mevcut olabilir; bu nedenle, sınıf adını değiştirmeniz gerekebilir).
Bu kadar. Bütün bunlar semantik olarak ihtiyacımız. Ama açıkçası, bazı kukla içeriklere ve başlıklara ekleyeceğiz, böylece demolarımıza bakacak bir şeyimiz var. Kullanıcının aşağı kaydırılabileceğini göstermek için açılış ekranına eklemek üzere bir ok türüne de ihtiyacımız olacak (bu, giriş ekranının kaybolması ve ana içeriğin getirilmesi yöntemimiz olacaktır).
İşte burada beden etiketimizin içine giren basit işaretler:
Lorem Ipsum Dolor oturmak, consectetur adipisicing elit. Dolor, velit sapriente facere tempora ullam accusamus eksi laborum porro odit sequi dolorum enim optio alias nulla laudantium voluptatibus quibusdam quaerat sağlayıcı eius quo perferendis voluptatem modi maiores cumque saepe quidem ducimus numquam ve commodi cupiditate libero pariatur mollitia eveniet molestias debiti quia! Natus, minima, hata, porro facere cum perferendis sonuç belirleyici gereklilikler saptaente soluta veritatis magnam quasi ut cumque sağlayıcısı quidem nemo enim nesciunt oburecati nobis quam tenetur yousti içinde nihil architecto. Hata, soluta autem sonuçlarının etkileri, bu olayların bir sonucu olarak, bir şey değil. Architecto, natus fuga olmayan perferendis veritatis nihil repellat dolorum rerum quidem
O zaman burada neler olup bittiğini biraz daha ayrıntılı olarak açıklayalım: Sıçrama divumuzla başlıyoruz. Bunun içinde bir başlık var ve kaydırma göstergemiz (burada bir ok görüntüsü var, ancak açık bir şekilde olmasını istediğiniz herhangi bir şey olabilir). Sonra bu divayı kapatırız ve bir sarıcı sınıfı ile başka bir tane açarız. İçinde, her vaka için farklı olacak bazı genel site içeriği var, ancak burada basit kalacağız: bir başlık, bir miktar gezinme, bir ana içerik alanı ve bir altbilgi. Daha sonra jQuery, Google API'den işlevsellik için kullanacağımızdan ve nihayet jQuery kodumuzu yazacağımız bir başka .js dosyasına bağlanır.
Ayrıca, açılış ekranı alanında sınıf adının kaybolduğunu da görebilirsiniz. Belirli sınıflara güzel CSS3 animasyonları eklemek ve tanıtımı daha güçlü yapmak için bu sınıfı kullanırız. Açıkçası, sonuçlara bakarsanız, gerçekten hiçbir şey olmayacak, şimdi her şeyi şekillendirmeliyiz. Konuşmak CSS'ye geçelim…
Şekillendirme
Tekrar stilleri basit ve kullanışlı tutmaya çalışalım. Hepsi düz CSS. Öncelikle, .fade-in sınıf adıyla başlayalım. (Bu, CSS dosyanızın en üstünde beyan edilmek zorundadır, böylece aşağıda diğer öğeler üzerinde farklı animasyon gecikme süreleri bildirebiliriz.)
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }.fade-in {opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:0.3s;-moz-animation-duration:0.3s;animation-duration:0.3s;-webkit-animation-delay: 0.5s;-moz-animation-delay: 0.5s;animation-delay: 0.5s;}
Öncelikle anahtar kareleri bildiriyoruz ve animasyonumuzu arıyoruz. 0 opaklıktan 1'e gider. Daha sonra sınıf adını doğrudan hedefleriz, 0 opaklığına sahip olduğunu belirtiriz. ve az önce belirttiğimiz animasyonu iyon olarak adlandırın, son 0,3'ü yapın ve 0,5'lik bir gecikme verin.
Şimdi sıçrama sayfamız için gerekli CSS'ye bakalım:
.splash { background: url('../img/splash-bg.jpg') center center;background-size: cover;background-attachment: fixed;position: fixed;top: 0;right: 0;bottom: 0;left: 0;min-height: 360px;z-index: 999;text-align: center;}
Bir arka plan görüntüsünü (burada sadece bir caddenin siyah beyaz bir fotoğrafı) arıyoruz, ortalamakta olduğumuzuzu, aynı zamanda tüm ekranı hangi boyutta kapladığını ve ekli hale getirdiğini - yani bunun anlamına geldiğini - kaydırma üzerinde hareket etmeyeceğim. Sonra ona 'sabit' bir pozisyon veriyoruz ve üst, sağ, alt ve soldan 0 mesafede olması gerektiğini belirtiyor, dolayısıyla tüm tarayıcı penceresini doldurur. İçine yerleştireceğimiz şey kesinlikle konumlandırılacağından minimum bir yükseklik vereceğiz. Sayfadaki içeriğin geri kalanı üzerinde görünmesini istediğimizden yüksek bir z-endeksine sahip olduğundan emin olun (şimdi sabit bir konum olduğu için doğrudan sıçrama ekranımızın altına yerleştirilecektir).
İşte gidiyorsunuz, bu gerçekten de, açılış ekranının sayfada doğru yerde görünmesi için gereken tüm stillerdir. Sayfanın akışını hiç değiştirmeden ekranı ve diğer tüm içeriği doldurmak. Bu yüzden şimdi CSS'nin geri kalanını hızlı bir şekilde vereceğim, ki bu da esas olarak başlığı doğru yere yerleştiriyor, ek olarak kullanıcının kaydırması gerektiğini belirten aşağıya bakan bir ok. Ve son olarak, sayfa için bazı basit stiller ve birkaç medya sorgusu:
html, body { width: 100%;height: 100%;}body { font: normal 1em/1.5em 'Open Sans', sans-serif; color: #333; margin-bottom: 20px; }.wrapper {max-width: 1000px;width: 90%;margin: 0 auto;}.splash-title {color: white;font-size: 3em;margin-top: 100px;text-shadow: 0 2px 10px #000;-webkit-animation-delay: 1s;-moz-animation-delay: 1s;animation-delay: 1s;}a.splash-arrow {color: white;font-size: 1.2em;position: absolute;bottom: 55px;left: 50%;margin-left: -25px;padding: 10px;width: 50px;height: 50px;font-weight: bold;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;animation-delay: 1.5s;border: 3px solid white;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}a.splash-arrow:hover {text-decoration: none;bottom: 50px;}@media all and (max-width: 690px) {header h1 { width: 100%; text-align: center; }header nav { float: none; display: inline-block; margin: 0 auto; }.splash-title {font-size: 2em;}}@media all and (max-width: 480px) {.splash-title {font-size: 1.5em;}}
İşte burada genel vücut stilleri, başlığın üstünde üst kısımda bir dolgu var, burada animasyondaki yavaşlamayı bir saniye daha geciktiriyoruz. Yani kendi girişi var. Ok linki, her zaman ekranın ortasında ve altında olmak üzere kesinlikle konumlandırılmıştır. Ekrana nihai olarak görünmesi için ikinci bir gecikme daha var. Bazı CSS3 geçişlerini ekliyoruz, böylece pozisyon şu şekilde değişiyor: vurgulu durum animasyonu. Son olarak, küçük ekranlarda biraz daha güzel görünmesini sağlamak için bazı küçük medya sorgu değişikliklerine sahibiz. Ama belli ki bu stiller tasarımınıza göre değişecektir.
jQuery
Daha önce de belirttiğimiz gibi , bir js dizininde main.js adında bir dosya yapacağız. İçinde, jQuery'mizi, açılış ekranının kayda kaybolarak veya ok bağlantısını tıkladığınızda yazacağız. İşte burada:
$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"} );} $ (.) "Ok sıçrama" ((function tıklayın) {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"} , 800);});});}); $ (pencere) .scroll (function () {$(window).off("scroll");$(".splash").slideUp("800", function() {$("html, body").animate({"scrollTop":"0px"} ". Sarıcı ", 100) $ () gecikmesi (100) .animate ({" opaklık ":" 1.0" }, 800);});});
Her şeyden önce, ilk sayfadan oluşan bir belgeyi , yalnızca sayfa tamamen dolduğunda harekete geçmek için, bir belgeye hazır fonksiyonun içinde sarıyoruz. Başlamak için başlangıç ekranımızın görünür olup olmadığını kontrol ediyoruz. Öyleyse, sarmalayıcıyı görünmez yaparız (bu yüzden arka plan resmi yüklenirken hiçbir içeriğe sahip değiliz ve ayrıca sayfaya ulaştıktan sonra animasyonda son bir solma yapalım). Ardından, okdaki tıklama işleyicisine bir işlev ekliyoruz. Bu yüzden kullanıcı bunu tıklarsa, açılış ekranı yukarı kayıyor (ve dolayısıyla kayboluyor) ve daha sonra sarıcının opaklığını tekrar 1'e dönüştürüyoruz.
Bu küçük kod bloğu (neredeyse) $ (window) .scroll fonksiyonunda hemen sonra kullanacağımızla aynıdır. Kullanıcı kaydırdığında, sıçramayı yukarı kaydırıyoruz ve bu sefer sayfanın başına geri dönüyor (böylece kullanıcı sayfayı yarıya kadar başlatmıyor) ve sarmalayıcı öğesinin opaklığını canlandırıyor. Ayrıca bu satırı $ (window) .off (“scroll”) olarak ekliyoruz; Bu, onu istemediğimizde pencereyi gerçekten kaydırarak durdurur. Kullanıcı ilk olarak kaydırdığında, yalnızca animasyonu ayarlamasını ve aslında sayfayı kaydırmasını istemiyoruz. Ancak intro bittiğinde sayfa normal olarak ilerler.
Sonuç
Yani orada var, sitenizin en üstüne bir intro ekranı eklenmiş ve kaydırma üzerinde kaybolacak veya kullanıcı belirli bir öğeyi tıkladığında çok basit (hafif) ama zarif bir çözüm. Bu kodu almakta, kullanmakta ve ihtiyacınıza göre değiştirmekte özgürsünüz.
Başlangıçta belirttiğim gibi, bu teknik herhangi bir şekilde farklı şekillerde kullanılabilir, bu yüzden yaratıcı olun!