En flott måte å få oppmerksomheten til en besøkende på nettstedet ditt er en "splash-skjerm" eller en "intro-skjerm". Men å gjøre en vellykket en er svært vanskelig av en enkel grunn: sprutskjermer lett irriterer brukere.
Splash skjermer kan fungere hvis de vises raskt og lett kan avvises. De kan være visuelt slående og vakre, og få brukeren til å bla for å lære mer. Denne stilen med introer fungerer veldig bra på nettsider med enkeltrulling. Eller "banner stilen" av webdesign som har kommet inn i mote med den flate designtrenden. Det kan også være veldig nyttig å lage en fin utseende "bakgrunnsvideo" -stil med intro som også er rasende for øyeblikket.
Det jeg vil vise deg i dag, er en grunnleggende metode for å oppnå denne effekten, som du enkelt kan endre for å gjøre flotte introer til webopplevelser.
Hvis du vil se hva vi bygger, er det en demonstrasjon her. Og du kan Last ned alle kildefilene her.
Markeringen
Vi kommer til å prøve å holde markeringen for dette veldig enkelt. På den måten kan det faktisk implementeres på eksisterende nettsider samt nye prosjekter.
Så i utgangspunktet hva vi ønsker å lage er to div. En med en klasse av sprut og en annen med en klasse av innpakning . (Innpakningsklassen kan allerede eksistere på noen måte for deg hvis du implementerer dette på et eksisterende nettsted, så du må kanskje variere det klassenavnet).
Det er det. Det er alt vi trenger semantisk. Men selvsagt legger vi til noe dummy innhold og titler slik at vi har noe å se på i vår demo. Vi trenger også en slags pil for å legge til på skjermen for å vise brukeren at han kan bla nedover (da dette vil være vår metode for å gjøre introskjermen forsvinne og ta inn hovedinnholdet).
Så her er det enkle oppslaget alle går inn i vår kroppsdel :
Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Dolor, vellykket sapiente fasere tempora ullam accusamus minus laborum porro odit sequi dolorum enim optio alias på nulla laudantium voluptatibus quibusdam quaerat provident Natus, minima, feil, porro facere cum perferendis consequatur necessitatibus id sapiente soluta veritatis magnam quasi ut cumque provident quidem nemo enim nesciunt nihil architecto i obcaecati nobis quam tenetur corrupti. Feil, selvfølgelig, etterfølgelse av feilen er ikke bare en følge av feilen, men det er vanskelig å få et godt svar på. Architecto, natus fuga ikke perferendis veritatis nihil repellat dolorum rerum quidem
Så la oss forklare hva som foregår her i litt mer detaljert: Vi starter med vår splash div. Innsiden av det har vi en tittel, og vår rullindikator (som her er et pilbild, men kan være alt du vil at det skal være åpenbart). Så lukker vi den diven, og åpner en annen med en klasse av innpakning . Innenfor har vi nettopp fått noe generisk nettstedinnhold som vil være forskjellig for alle tilfeller, men her vil vi holde det enkelt: en tittel, noe navigasjon, et hovedinnholdsområde og en bunntekst. Deretter er jQuery inkludert fra Google API, da vi vil bruke den til funksjonalitet, og til slutt kobler vi til en annen .js-fil som er vår egen, der vi skal skrive vår jQuery-kode.
Du kan også legge merke til klassenavnet fade-in i skjermområdet. Vi bruker den klassen til å legge til noen fine CSS3-animasjoner til enkelte elementer og gjøre introen kraftigere. Selvfølgelig hvis du ser på resultatene nå, vil det egentlig ikke være noe, vi må stil alt nå. Snakker om hvilke la oss komme inn på CSS ...
styling
Igjen, la oss prøve og holde stilene enkle og nyttige. Dette er alt vanlig CSS. Først av alt, la oss begynne med .fade-in klassenavnet. (Dette må deklareres på toppen av vår CSS-fil, slik at vi kan erklære forskjellige animasjonsforsinkelsestider på andre elementer lenger 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 ringer vår animasjon fadeIn. Det går fra en 0-dekkhet til 1. Da målretter vi klassenavnet direkte, angir at det har 0 ugjennomtrengelighet. og ring ion animasjonen som vi nettopp spesifisert, gjør det siste 0.3s og gi det en forsinkelse på 0,5s.
La oss se på CSS som er nødvendig for vår 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 ringer i et bakgrunnsbilde (her er det bare et svart og hvitt bilde av en gate), som vi senterer, og sørger også for at den dekker hele skjermen uansett størrelse, og gjør den festet - noe som betyr at det ' Jeg vil ikke fortsette å bla. Da gir vi den en "fast" posisjon, og angir at den skal være i en avstand på 0 fra toppen, høyre, bunn og venstre. Derfor fyller det hele nettleservinduet. Vi vil da gi den en minimumshøyde da det vi plasserer inni, vil være helt posisjonert. Pass på at den har en høy z-indeks som vi vil at den skal vises over resten av innholdet på siden (som nå skal plasseres direkte under vår splash-skjerm, da den har en fast posisjon).
Der du går, det er alle stilene som egentlig trengs for å få sprutskjermen til å vises på riktig sted på siden. Fyll skjermen og fremfor alt annet innhold, uten å endre strømmen av siden i det hele tatt. Så nå vil jeg raskt gi deg resten av CSS, som hovedsakelig plasserer tittelen på riktig sted, legg til en fin nedovervendt pil for å indikere at brukeren skal rulle. Og til slutt noen grunnleggende stiler for siden, og noen få media spørringer:
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 kroppsstiler, noe topppolstring på tittelen, hvor vi også forsinker visningen i animasjon med et halvt sekund. Så det har sin egen inngang. Pilen er helt posisjonert, for alltid å være i midten og bunnen av skjermen. Den har ytterligere en halv sekund forsinkelse som vises endelig til skjermen. Vi legger til noen CSS3-overganger slik at stillingen endres på: hover-tilstanden er animert. Endelig har vi noen små utskriftsendringer for media for å få det til å se litt finere ut på mindre skjermer. Men selvfølgelig vil disse stilene endres i henhold til design.
jQuery
Så som vi erklærte tidligere, skal vi lage en fil som heter main.js i en js- katalog. Innenfor vil vi skrive vår jQuery som gjør at skjermen forsvinner på bla, eller når du klikker på pillinken. Her er det:
$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"} );} $ ( ". Splash-pil") Klikk (funksjon () {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"} , 800);});})}); $ (vindu) .scroll (funksjon () {$(window).off("scroll");$(".splash").slideUp("800", function() {$("html, body").animate({"scrollTop":"0px"} ". Innpakningen. ";, 100) $ () forsinkelse (100) .animate ({" opasitet ":" 1.0" }, 800);});});
Først og fremst pakker vi inn de første få setningene våre i en dokumentklar funksjon, bare for å handle når siden er fullstendig lastet. Så for å begynne å sjekke vi for å se om vår skjermbilde er synlig. Hvis det er, gjør vi omslaget usynlig (slik at vi ikke har noe blits av innholdet mens bakgrunnsbildet laster, og også for å gjøre en endelig fade i animasjon når vi kommer til siden). Vi legger da en funksjon til klikkbehandleren på pilen. Så hvis brukeren klikker på den, glir skjermbildet opp (og forsvinner derfor), og deretter animerer vi pakkenes opasitet tilbake til 1.
Denne lille koden er (nesten) den samme som vi skal bruke like etter i $ (vinduet) .scroll- funksjonen. Så når brukeren ruller, glir vi opp splashen, og så animerer denne tiden tilbake til toppen av siden (slik at brukeren ikke starter halvveis nedover siden) og animerer ugjennomtrengelighet av wrapperelementet. Vi legger også til i linjen $ (window) .off ("scroll"); som stopper vinduet fra å rulle faktisk når vi ikke vil ha det til. Når brukeren først ruller vil vi at den bare skal sette av animasjonen, og ikke bla gjennom siden. Men når intro er borte, vil siden rulle normalt.
Konklusjon
Så der har du det, en veldig enkel (lett) men elegant løsning for å få en introskjermer lagt til toppen av nettstedet ditt, og få den til å forsvinne på bla, eller når brukeren klikker på et bestemt element. Ta gjerne denne koden, bruk den og modifiser den for å dekke dine behov.
Som jeg nevnte i begynnelsen, kan denne teknikken brukes på noen forskjellige måter, så bli kreativ!