En fantastisk måde at fange en besøgende på din hjemmeside på er en "stænkskærm" eller en "introskærm". Men det er meget vanskeligt at gøre en succes, fordi en enkelt grund skyldes, at stænkskærme let irriterer brugerne.
Splash skærme kan fungere, hvis de vises hurtigt og let kan afvises. De kan være visuelt slående og smukke, og få brugeren til at rulle for at lære mere. Denne stil af introer fungerer meget godt på websider med scrolling. Eller "banner stil" af webdesign, der er kommet i mode med den flade design trend. Det kan også være meget nyttigt at lave en flot udseende "baggrundsfilm" -stil, som også er rasende i øjeblikket.
Det, jeg vil vise dig i dag, er en grundlæggende metode til at opnå denne effekt, som du nemt kan ændre for at gøre flotte introer til weboplevelser.
Hvis du gerne vil se, hvad vi bygger, er der en demo her. Og du kan download alle kildefiler her.
Opmærkning
Vi vil forsøge at holde markeringen for dette meget enkelt. På den måde kan det faktisk implementeres på eksisterende websteder samt nye projekter.
Så dybest set, hvad vi vil lave er to divs. En med en klasse af splash og en anden med en klasse af indpakning . (Indpakningsklassen kan allerede eksistere på en eller anden måde for dig, hvis du implementerer dette på et eksisterende websted, så du kan muligvis ændre dit klassenavn).
Det er det. Det er alt, hvad vi har brug for semantisk. Men selvfølgelig tilføjer vi nogle dummyindhold og titler, så vi har noget at se på i vores demo. Vi har også brug for en slags pil for at tilføje i skærmbilledet for at vise brugeren, at han kan rulle ned (da dette vil være vores metode til at gøre introskærmen forsvinde og bringe hovedindholdet op).
Så her er den enkle markering, der alle går inde i vores krops tag:
Der er ikke noget for dig, og du er sikker på at hjælpe dig. Dolor, vellykket sapiente facere tempora uldam accusamus minus laborum porro odit sequi dolorum enim optio alias på nulla laudantium voluptatibus quibusdam quaerat provident eius quo perferendis voluptatem modi maiores cumque saepe quidem ducimus numquam et commodi cupiditate libero parliatur mollitia eveniet molestias debitis quia! Natus, minima, fejl, porro facere cum perferendis consequatur necessitatibus id sapiente soluta veritatis magnam quasi ud cumque provident quidem nemo enim nesciunt nihil architecto in obcaecati nobis quam tenetur corrupti. Fejl, solute autem følgesvigt mollitia dolorem sequi iusto dolore fuga facilis esse illum accusamus ratione earum quasi ipsa doloribus odio. Architecto, natus fuga ikke perferendis veritatis nihil repellat dolorum rerum quidem
Så lad os forklare, hvad der foregår her i lidt mere detaljeret: Vi starter med vores splash div. Inde i det har vi en titel, og vores rulleindikator (som her er et pilbillede, men kan være alt, hvad du vil have det selvfølgelig). Så lukker vi den div, og åbner en anden med en klasse af indpakning . Indenfor har vi lige fået noget generisk indhold på webstedet, som vil være anderledes for alle tilfælde, men her vil vi holde det enkelt: en titel, nogle navigation, et hovedindholdsareal og en footer. Derefter er jQuery inkluderet fra Google API, da vi vil bruge det til funktionalitet, og endelig linker vi til en anden .js-fil, som er vores egen, hvor vi skriver vores jQuery-kode.
Du kan også lægge mærke til klassenavnet fade-in i skærmområdet. Vi bruger denne klasse til at tilføje nogle fine CSS3-animationer til bestemte elementer og gøre introen mere kraftfuld. Selvfølgelig, hvis man ser på resultaterne nu, vil det virkelig ikke være noget, vi skal style alt nu. Taler om hvilke lad os komme ind på CSS ...
Styling
Lad os igen forsøge at holde stilarterne enkle og nyttige. Dette er helt almindeligt CSS. Først og fremmest, lad os starte med .fade-in klassenavnet. (Dette skal erklæres øverst i vores CSS-fil, så vi kan erklære forskellige animationsforsinkelsestider på andre elementer længere nedenfor.)
@-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 erklærer keyframes først og kalder vores animation fadeIn. Det går fra en 0 opacitet til 1. Derefter målretter vi klassenavnet direkte, angiver at det har 0 opacitet. og kald ion animationen, som vi lige har angivet, gør det sidste 0.3s og giv det en forsinkelse på 0,5s.
Lad os nu se på CSS, der er brug for til vores splash-side:
.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 kalder et baggrundsbillede (her er det bare et sort-hvidt billede af en gade), som vi centrerer, og sørger også for at det dækker hele skærmen uanset størrelse og gør det vedhæftet - hvilket betyder at det ' Jeg fortsætter ikke med at rulle. Derefter giver vi det en "fast" position, og angiver, at den skal være i en afstand på 0 fra toppen, højre, bund og venstre - derfor fylder det hele browservinduet. Vi vil så give det en minimumshøjde, da det vi placerer inde i, vil være helt placeret. Sørg for, at den har en høj z-indeks, da vi ønsker at den skal vises over resten af indholdet på siden (som nu skal placeres direkte under vores skærm, da den har en fast position).
Der går du, det er alle de stilarter, der egentlig er nødvendige for at få skærmbilledet til at blive vist på det rigtige sted på siden. Fyldning af skærmen og frem for alt andet indhold uden at ændre strømmen af siden overhovedet. Så nu vil jeg hurtigt give dig resten af CSS, som hovedsageligt placerer titlen på det rigtige sted, tilføj en flot nedadvendt pil for at indikere, at brugeren skal rulle. Og endelig nogle grundlæggende stilarter til siden og et par medieforespørgsler:
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å her har vi generelle kropsstilarter, noget toppolstring på titlen, hvor vi også forsinker fade i animation med endnu et halvt sekund. Så det har sin egen indgang. Pilens link er absolut placeret, for altid at være i midten og bunden af skærmen. Den har endnu en halv sekund forsinkelse til at komme endelig til skærmen. Vi tilføjer nogle CSS3 overgange, således at positionen ændres på: hover state er animeret. Endelig har vi nogle små medie forespørgselsændringer for at få det til at se lidt pænere ud på mindre skærme. Men selvfølgelig vil disse stilarter ændre sig i overensstemmelse med dit design.
jQuery
Så som vi erklærede tidligere, skal vi lave en fil med navnet main.js i en js- mappe. Inde i, at vi skriver vores jQuery, der får skærmbilledet til at forsvinde på scroll, eller når du klikker på pillinket. Her er det:
$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"} );} $ ( ". Splash-pil") klik (function () {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"} , 800);});});}); $ (vindue) .scroll (function () {$(window).off("scroll");$(".splash").slideUp("800", function() {$("html, body").animate({"scrollTop":"0px"} ". Wrapper. " 100) $ () forsinkelse (100) .animate ({" opacitet ":" 1.0" }, 800);});});
Først og fremmest indpakker vi vores første få sætninger inde i en dokument klar funktion, for kun at gribe ind, når siden er fuldt indlæst. Så vi begynder at kontrollere, om vores stænkskærm er synlig. Hvis det er, gør vi wrapper usynlige (så vi har ingen flash indhold, mens baggrundsbilledet indlæses, og også for at gøre en endelig fade i animation, når vi kommer til siden). Vi tilføjer derefter en funktion til klikhåndtereren på pilen. Så hvis brugeren klikker på det, glider skærmbilledet op (og derfor forsvinder), og så animerer vi opacitet af wrapper tilbage til 1.
Denne lille blok kode er (næsten) den samme, som vi vil bruge lige efter i $ (vinduet) .scroll- funktionen. Så når brugeren ruller, glider vi op stænket, og så animerer denne gang tilbage til toppen af siden (så brugeren starter ikke halvvejs ned på siden) og animerer pakningselementets opacitet. Vi tilføjer også i den linje $ (vindue) .off ("scroll"); der stopper vinduet fra rent faktisk at rulle, når vi ikke ønsker det. Når brugeren først ruller, ønsker vi at den bare skal afbryde animationen, og ikke rent faktisk rulle siden. Men når intro er væk, bladrer siden normalt.
Konklusion
Så der har du det, en meget simpel (let) men elegant løsning, der har en introskærm, der er tilføjet til toppen af dit websted, og har den forsvundet på scroll, eller når brugeren klikker på et bestemt element. Du er velkommen til at tage denne kode, bruge den og ændre den efter dine behov.
Som jeg nævnte i begyndelsen, kan denne teknik bruges på mange forskellige måder, så få kreativ!