Ett bra sätt att få en besökares uppmärksamhet på din webbplats är en "stänkskärm" eller en "intro-skärm". Att lyckas är dock mycket svårt av en enkel anledning: stänkskärmar irriterar lätt användarna.
Splash-skärmar kan fungera om de visas snabbt och lätt avvisas. De kan vara visuellt slående och vackra, och få användaren att bläddra för att lära sig mer. Denna typ av intro fungerar väldigt bra på webbsidor med bläddring. Eller "banner stil" av webbdesign som har blivit modet med den trendiga designen. Det kan också vara väldigt användbart att göra en snygg utseende "bakgrundsfilm" -stil som också är raseri för tillfället.
Vad jag vill visa dig idag är en grundläggande metod för att uppnå denna effekt, som du enkelt kan modifiera för att göra snygging till webupplevelser.
Om du vill se vad vi bygger, så finns det en demo här. Och du kan ladda ner alla källfiler här.
Markeringen
Vi ska försöka hålla markeringen för det här mycket enkelt. På så vis kan det faktiskt genomföras på existerande webbplatser samt nya projekt.
Så i grund och botten vad vi vill göra är två divs. En med en klass av stänk och en annan med en klass av omslag . (Omslagsklassen kanske redan finns på något sätt för dig om du implementerar detta på en befintlig webbplats, så du kan behöva ändra det klassnamnet).
Det är allt. Det är allt vi behöver semantiskt. Men självklart lägger vi till några dummies innehåll och titlar så att vi har något att se på i vår demo. Vi behöver också en sorts pil för att lägga till på stänkskärmen för att visa användaren att han kan bläddra ner (eftersom det här är vår metod för att försvåra introskärmen och ta in huvudinnehållet).
Så här är det enkla markupet som alla går inuti vår kroppslabel :
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, välj sapiente fasere tempora ullam accusamus minus laborum porro odit sequi dolorum enim optio alias vid nulla laudantium voluptatibus quibusdam quaerat provident eius quo perferendis voluptatem modi maiores cumque saepe quidem ducimus numquam et commodi cupiditate libero parolatur mollitia eveniet molestias debitis quia! Natus, minima, fel, porro facere cum perferendis consequatur necessitatibus id sapiente soluta veritatis magnam kvasi ut cumque provident quidem nemo enim nesciunt nihil architecto i obcaecati nobis quam tenetur corrupti. Fel, lösa autologiska konsekvenser är inte bara en följd av felaktiga fågelförläggningar, men det är inte bara en rationell övning som är en del av det. Architecto, natus fuga, inte perferendis veritatis nihil repellat dolorum rerum quidem
Så låt oss förklara vad som händer här i lite mer detalj: vi börjar med vår splash div. Inuti det har vi en titel och vår rullningsindikator (som här är en pilbild, men kan vara allt du vill ha det självklart). Då stänger vi den div och öppnar en annan med en klass av omslag . Inuti har vi bara fått ett generiskt innehåll på webbplatsen som kommer att vara annorlunda för alla fall, men här kommer vi att hålla det enkelt: en titel, en del navigering, ett huvudinnehåll och en sidfot. Då ingår jQuery från Google API, eftersom vi använder det för funktionalitet, och slutligen länkar vi till en annan .js-fil som är vår egen, där vi skriver vår jQuery-kod.
Du kanske också märker klassnamnet fade-in i området stänkskärm. Vi använder den klassen för att lägga till några fina CSS3-animeringar till vissa element och göra introen mer kraftfull. Självklart om du tittar på resultaten nu kommer det inte att vara någonting, vi måste ställa allt nu. Tala om vilka låter vi komma in på CSS ...
styling
Låt oss igen försöka hålla stilerna enkla och användbara. Detta är allt vanligt CSS. Först och främst, låt oss börja med .fade-in klassnamn. (Detta måste deklareras längst upp i vår CSS-fil, så att vi kan deklarera olika animationsfördröjningstider på andra element längre fram nedan.)
@-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;}
Vi förklarar keyframes först och ringer vår animation fadeIn. Det går från en opacitet till 1. Då riktar vi oss mot klassnamnet direkt, anger att det har 0 opacitet. och kalla jonen animationen som vi precis angav, gör den sista 0.3s och ge det en fördröjning på 0.5s.
Låt oss nu titta på CSS som behövs för vår stänk sida:
.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;}
Vi ringer in i en bakgrundsbild (här är det bara ett svartvitt foto på en gata), som vi centrerar och ser till att det täcker hela skärmen i vilken storlek som helst och gör den bifogad - vilket innebär att det " Jag går inte vidare på rullning. Då ger vi det en "fast" position och anger att den ska ligga på 0 avstånd från toppen, höger, botten och vänster. Därför fyller det hela webbläsarfönstret. Vi ger då en minsta höjd eftersom det vi placerar inuti kommer att vara helt placerat. Se till att det har ett högt z-index eftersom vi vill att den ska visas över resten av innehållet på sidan (som nu kommer att placeras direkt under vår stänkskärm, eftersom det har en fast position).
Där går du, det är alla stilar som faktiskt behövs för att stänkskärmen ska visas på rätt plats på sidan. Fylla på skärmen och framför allt annat innehåll, utan att ändra flödet på sidan alls. Så nu ska jag snabbt ge dig resten av CSS, som främst placerar titeln på rätt ställe, lägg till en fin nedåtriktad pil för att indikera att användaren ska rulla. Och äntligen några grundläggande stilar för sidan och några mediasökningar:
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;}}
Så här har vi allmänna kroppsstilar, lite toppad på titeln, där vi också försenar blekningen i animering med ytterligare en halv sekund. Så det har sin egen ingång. Pilen är helt placerad, för att alltid vara i mitten och på undersidan av skärmen. Den har ytterligare en halv sekund fördröjning att visas slutgiltigt på skärmen. Vi lägger till några CSS3-övergångar så att läget ändras på: hover-staten är animerade. Slutligen har vi några små utskriftsändringar för att få det att se lite snyggare på mindre skärmar. Men självklart kommer dessa stilar att förändras enligt din design.
jQuery
Så som vi förklarade tidigare kommer vi att skapa en fil med namnet main.js i en js- katalog. Inuti skriver vi vår jQuery som gör att stänkskärmen försvinner i rullning, eller när du klickar på länken på pilen. Här är det:
$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"} );} $ (. "Stänk pil") klickar du på (funktion () {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"} , 800);});});}); $ (fönster) .scroll (function () {$(window).off("scroll");$(".splash").slideUp("800", function() {$("html, body").animate({"scrollTop":"0px"} ". Wrapper ";, 100) $ () fördröjning (100) .animate ({" opacitet ":" 1,0" }, 800);});});
Först och främst lägger vi in våra första uttalanden i en dokumentklar funktion, för att bara vidta åtgärder när sidan har laddats fullständigt. Så för att börja börjar vi se om vår stänkskärm är synlig. Om så är fallet gör vi omslaget osynligt (så vi har ingen blixt av innehåll medan bakgrundsbilden laddas, och även för att göra en slutgilt nyans i animation när vi kommer fram till sidan). Vi lägger sedan till en funktion för klickhanteraren på pilen. Så om användaren klickar på den glider stänkskärmen upp (och försvinner därför) och sedan animerar vi omslagets omslag till 1.
Detta lilla block av kod är (nästan) detsamma som vi ska använda strax efter i $ (fönster) .scroll- funktionen. Så när användaren rullar, glider vi upp stänket och animerar sedan den här tiden tillbaka till toppen av sidan (så användaren börjar inte halvvägs ner på sidan) och animerar omslaget på omslaget. Vi lägger också till i den raden $ (fönster) .off ("scroll"); som stannar fönstret från att rulla faktiskt när vi inte vill ha det. När användaren först rullar vill vi att den bara ska stänga av animationen och inte faktiskt bläddra på sidan. Men när introen är borta rullar sidan normalt.
Slutsats
Så där har du det, en väldigt enkel (lätt) men elegant lösning för att ha en introskärm läggad till toppen av din webbplats, och få den att försvinna i rullning eller när användaren klickar på ett visst element. Ta gärna av den här koden, använd den och modifiera den så att den passar dina behov.
Som jag nämnde i början kan denna teknik användas på flera olika sätt, så bli kreativ!