Erinomainen tapa saada vierailija huomata verkkosivustoosi on "splash screen" tai "intro screen". Menestyksen onnistuminen on kuitenkin hyvin vaikeaa yhdestä yksinkertaisesta syystä: roiskevedenpainikkeet helposti ärsyttävät käyttäjiä.
Splash-näytöt toimivat, jos ne näkyvät nopeasti ja ovat helposti irrotettavissa. Ne voivat olla silmiinpistäviä ja kauniita, ja tekevät käyttäjistä haluamasi vierittämällä saadakseen lisätietoja. Tämä introtystyyli toimii erittäin hyvin yhden sivun selaus sivustoilla. Tai "banneri tyyli" webdesign, joka on tullut muoti ja tasainen suunnittelu suuntaus. Se voi myös olla erittäin hyödyllinen tehdä kiva näköinen "tausta video" tyyli intro, jotka ovat myös all-the-raivoa tällä hetkellä.
Mitä haluan näyttää teille tänään on perusmenetelmä tämän vaikutuksen aikaansaamiseksi, jota voit muokata helposti tehdäksesi hienoja introja verkkokokemuksille.
Jos haluat nähdä, mitä rakennamme, siellä on demo täällä. Ja sinä voit lataa kaikki lähdetiedostot täältä.
Merkintä
Aiomme yrittää säilyttää merkinnät tästä yksinkertaisesta. Näin se voidaan tosiasiallisesti toteuttaa jo olemassa oleviin sivustoihin ja uusiin projekteihin.
Pohjimmiltaan haluamme tehdä kaksi div. Yksi luokalla splash ja toinen kääre- luokan kanssa. (Kääre-luokka saattaa olla jossakin määrin jo olemassa jos käytät tätä aiemmin olemassa olevalla sivustolla, joten sinun on ehkä vaihdettava kyseisen luokan nimi).
Se siitä. Se on kaikki mitä tarvitsemme semanttisesti. Mutta ilmeisesti lisätään joihinkin hahmoja ja otsikoita niin, että meillä on jotain katsomista demoomme. Tarvitsemme myös jonkinlaisen nuolen lisätäksesi splash-näytön, jotta käyttäjä voi selata alaspäin (koska tämä on menetelmä, jonka avulla intro-näyttö katoaa ja tuo pääsisältö).
Joten tässä on yksinkertainen merkintä, joka tulee kaikkiin kehon tagimme sisälle:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, velit sapiente kasvot tempora ullam accusamus minus laborum porro odit sequi dolorum enim optio alias at nulla laudantium voluptatibus quibusdam quaerat provident eius quo perferendis voluptatem modus maiores cumque saepe quidem ducimus numquam et commodi cupiditate vapaasti pariatur mollitia eveniet molestias debitis quia! Natus, minima, virhe, porro kasvot cum perferendis resultatur necessitatibus id sapiente soluta veritatis magnam lähes ut cumque provident quidem nemo enim nesciunt nihil arkkitehtuuri obcaecati nobis quam tenetur corrupti. Error, soluta autem consequatur mollitia dolorem sequi iusto paino fuga facilis esse illum accusamus ratione earum lähes ipsa ahdistushäiriö. Architecto, natus fuga ei perferendis veritatis nihil repellat dolorum rerum quidem
Joten selitämme, mitä täällä tapahtuu hieman yksityiskohtaisemmin: alamme splash divilla. Sisällä meillä on otsikko, ja meidän vieritysmittari (joka on tässä nuolinäkymä, mutta voi olla mitä haluatte sen olevan ilmeisesti). Sitten suljemme divan ja avaamme toisen kääre- luokan kanssa. Sisällä, että meillä on vain jokin yleinen sivuston sisältö, joka on erilainen joka tapauksessa, mutta tässä pidämme sen yksinkertaisena: otsikko, jonkin verran navigointi, pää sisältöalue ja alatunniste. Tällöin jQuery sisällytetään Google-sovellusliittymästä, kun käytämme sitä toiminnallisuutta varten ja vihdoinkin linkitään toiseen .js-tiedostoon, joka on meidän omaamme, jossa kirjoitamme jQuery-koodimme.
Saatat huomata myös, että luokan nimi häivyttää näkyvyysalueella. Käytämme tätä luokkaa lisäämällä joitain hienoja CSS3-animaatioita tiettyihin elementteihin ja tekemällä intro tehokkaampi. Ilmeisesti, jos katsotte tuloksia nyt, se ei todellakaan ole mitään, meidän on tehtävä kaikkea nyt. Puhuminen josta päästään CSS: hen ...
Muotoilu
Yritetään yrittää edelleen pitää tyylejä yksinkertaisina ja hyödyllisinä. Tämä on kaikki tavallinen CSS. Ensinnäkin aloitetaan .fade-in-luokan nimestä. (Tämä on ilmoitettava CSS-tiedostemme yläosassa, jotta voimme ilmoittaa erilaiset animaation viiveajat muille alla olevista elementeistä.)
@-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;}
Me julistamme avainkehykset ensin ja soittamalla animaatiomme fadeIn: hen. Se menee 0: n peittävyydeltä 1: een. Sitten kohdistetaan nimen suoraan luokkaan, määritetään, että sillä on 0 peittävyys. ja soita ioni animaatioksi, jonka juuri eritelimme, anna sille viimeiset 0,3 sekuntia ja anna sille 0,5 s viive.
Katsokaamme nyt CSS: tä, joka tarvitaan roiskesivullamme:
.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;}
Kehotamme taustatietoa (tässä vain kadun kattava mustavalkoinen kuva), jota keskitymme, myös varmistamalla, että se kattaa koko näytön mihin tahansa kokoon ja liittää siihen - mikä tarkoittaa sitä, En liiku vierittämällä. Sitten annamme sille "kiinteän" sijainnin ja määritämme, että sen on oltava etäisyydellä 0 ylhäältä, oikealta, alhaalta ja vasemmalta, joten se täyttää koko selainikkunan. Sitten annamme sille vähimmäiskorkeuden, sillä sen, mitä sijoitamme, on ehdottomasti sijoitettu. Varmista, että sillä on korkea z-indeksi, kun haluamme sen näkyvän sivun sisällön yläpuolella (joka sijoitetaan nyt suoraan roiskevalaistilan alle, sillä sillä on kiinteä sijainti).
Siellä menet, kaikki tyylit, joita todella tarvitaan, jotta splash-näyttö tulee näkyviin oikeassa paikassa sivulla. Näytön täyttäminen ja ennen kaikkea muuta sisältöä muuttamatta sivun virtaa lainkaan. Joten nyt minä annan nopeasti loput CSS: n, joka sijoittaa pääosin oikeaan paikkaan, lisää mukavasti alaspäin suuntautuvan nuolen osoittamaan, että käyttäjän pitäisi vierittää. Ja lopulta sivun perusstylejä ja muutamia mediakyselyjä:
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;}}
Joten tässä meillä on yleisiä kehon tyylejä, jotain otsikkoa, jossa viivytämme myös animaation haalistumista vielä puoli sekunnilla. Sillä on oma sisäänkäynti. Nuoli linkki on ehdottomasti sijoitettu aina keskelle ja näytön alareunaan. Se on toinen puoli sekuntia myöhästyäkseen näytölle lopullisena. Lisäämme joitain CSS3-siirtymiä niin, että sijainti muuttuu: hover-tilassa on animoitu. Lopuksi meillä on joitain pieniä mediakyselymuutoksia, jotta se näyttäisi hieman mukavammalta pienemmistä näytöistä. Mutta tietenkin nämä tyylit muuttuvat suunnittelusi mukaan.
jQuery
Kuten aiemmin ilmoitimme, aiomme tehdä tiedosto nimeltä main.js js- hakemistosta. Sisällä, että kirjoitamme jQueryn, joka tekee splash-näytöstä häviävän vierittämällä tai kun napsautat nuolen linkkiä. Tässä se on:
$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"} );} $ ( "Aloituskuvaksi nuoli"). Klikkaa (function () {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"} , 800);});});}); $ (ikkuna) .scroll (toiminto () {$(window).off("scroll");$(".splash").slideUp("800", function() {$("html, body").animate({"scrollTop":"0px"} , 100), $ (." Kääre "). Viive (100) .animate ({" opasiteetti ":" 1,0" }, 800);});});
Ensinnäkin olemme käärittämässä ensimmäisiä lausumme asiakirjan valmiiksi toimintoon, jotta toimimme vasta, kun sivu on täynnä. Joten aloittaessamme tarkistamme, onko meidän roiskesuutu näkyvissä. Jos se on, teemme kääreen näkymättömiksi (joten meillä ei ole salamaa sisällön ollessa kuormitettu taustakuvaksi ja myös lopullinen haalistuminen animaatiossa, kun saamme sivun). Sitten lisätään toiminto nuolen napsautustyökaluun. Joten jos käyttäjä napsauttaa sitä, splash-näyttö heikentyy (ja siksi katoaa) ja animoimme kääreen peittävyyden takaisin 1: ksi.
Tämä pieni koodilohko on (lähes) sama, jota käytämme juuri $ (ikkuna) .scroll -toiminnossa. Joten kun käyttäjä rullautuu, siirrymme roiskumaan ylös ja tämän jälkeen animoimme takaisin sivun yläosaan (joten käyttäjä ei käynnistä sivua puoliväliin) ja animaa kääre-elementin läpikuultavuus. Lisätään myös rivi $ (ikkuna) .off ("vieritys"); joka estää ikkunan vierittämästä, kun emme halua sitä. Kun käyttäjä ensin rullaa, haluamme, että se vain aloittaa animaation ja ei todellakaan vieritä sivua. Mutta kun intro on poistunut, sivu rullaa normaalisti.
johtopäätös
Niinpä sinulla on se, erittäin yksinkertainen (kevyt) mutta tyylikäs ratkaisu, jonka avulla verkkosivustosi lisätään intro-näyttöön ja poistetaan selaamalla tai kun käyttäjä napsauttaa tiettyä elementtiä. Voit käyttää tätä koodia, käyttää sitä ja muokata sitä tarpeitasi vastaavaksi.
Kuten mainitsin alussa, tätä tekniikkaa voidaan käyttää millä tahansa monella eri tavalla, joten luova!