Een geweldige manier om de aandacht van een bezoeker van uw website te trekken, is een "startscherm" of een "introscherm". Succesvol maken is echter om één eenvoudige reden erg moeilijk: schermpatronen irriteren gebruikers gemakkelijk.
Splash-schermen kunnen werken als ze snel verschijnen en gemakkelijk kunnen worden gesloten. Ze kunnen visueel opvallend en mooi zijn en ervoor zorgen dat de gebruiker wil scrollen om meer te leren. Deze intro-stijl werkt heel goed op scrollende websites met één pagina. Of de 'bannerstijl' van webdesign die in de mode is gekomen met de platte designtrend. Het kan ook erg handig zijn om een intro-achtige "achtergrondvideo" -intro te maken die op dit moment ook al de rage is.
Wat ik je vandaag wil laten zien is een basismethode om dit effect te bereiken, dat je gemakkelijk kunt aanpassen om mooie intro's te maken voor webervaringen.
Als u wilt zien wat we aan het bouwen zijn, is dat waar een demo hier. En jij kan download hier alle bronbestanden.
De opmaak
We gaan proberen de opmaak hiervoor heel simpel te houden. Op die manier kan het daadwerkelijk worden geïmplementeerd op reeds bestaande sites en ook in nieuwe projecten.
Dus eigenlijk is wat we willen maken twee divs. Een met een klasse van splash en een andere met een klasse wrapper . (De wrapper-klasse bestaat mogelijk al op een of andere manier voor u als u dit op een bestaande site implementeert, dus u moet die klassenaam mogelijk wijzigen).
Dat is het. Dat is alles wat we semantisch nodig hebben. Maar uiteraard voegen we wat dummy-inhoud en titels toe, zodat we iets hebben om naar te kijken in onze demo. We hebben ook een soort pijl nodig om toe te voegen in het startscherm om de gebruiker te laten zien dat hij naar beneden kan scrollen (omdat dit onze methode is om het introscherm te laten verdwijnen en de hoofdinhoud binnen te halen).
Dus hier is de eenvoudige opmaak die allemaal in onze body- tag gaat:
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Dolor, velit sapiente facere tempora ullam accusamus minus laborum porro odit sequi dolorum enim optio alias bij nulla laudantium voluptatibus quibusdam quaerat provident eius quo perferendis voluptatem modi maiores cumque saepe quidem ducimus numquam et commodi cupiditate libero pariatur mollitia eveniet molestias debitis quia! Natus, minima, error, porro facere cum perferendis consequatatitus id sapiente soluta veritatis magnam quasi ut cumque provident quidem nemo enim nesciunt nihil architecto in obcaecati nobis quam tenetur corrupi. Error, soluta autem consequatur mollitia dolorem sequi iusto dolore fuga facilis esse illum accusamus ratione earum quasi ipsa doloribus odio. Architecto, natus fuga non perferendis veritatis nihil repellat dolorum rerum quidem
Dus laten we wat meer in detail uitleggen: we beginnen met onze splash- div. Binnenin hebben we een titel en onze schuifindicator (die hier een pijlafbeelding is, maar kan alles zijn wat je wilt dat het duidelijk is). Dan sluiten we die div, en openen we een andere met een klasse verpakking . Binnenin hebben we zojuist generieke site-inhoud die voor elk geval anders zal zijn, maar hier houden we het simpel: een titel, wat navigatie, een hoofdgedeelte van de inhoud en een voettekst. Vervolgens wordt jQuery opgenomen in de Google API, omdat we het zullen gebruiken voor functionaliteit en uiteindelijk linken we naar een ander .js-bestand dat van ons is waarin we onze jQuery-code schrijven.
U ziet ook de fade-in van de klassennaam in het gebied met het splashscherm. We zullen die klasse gebruiken om een aantal leuke CSS3-animaties toe te voegen aan bepaalde elementen en de intro krachtiger te maken. Het is duidelijk dat als je de resultaten nu bekijkt het niet echt iets zal zijn, we moeten alles nu stylen. Nu we het er toch over hebben, laten we naar de CSS gaan ...
styling
Laten we opnieuw proberen de stijlen eenvoudig en nuttig te houden. Dit is allemaal duidelijke CSS. Laten we allereerst beginnen met de naam van de .fade-in-les. (Dit moet bovenaan ons CSS-bestand worden vermeld, zodat we verschillende vertragingstijden voor animatie op andere elementen verderop kunnen declareren.)
@-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;}
We verklaren eerst de keyframes en bellen onze animatie fadeIn. Het gaat van een ondoorzichtigheid van 0 naar 1. Dan targeten we de klassenaam direct, specificeren dat het 0 dekking heeft. en bel de animatie die we zojuist hebben opgegeven, laat deze de 0,3s duren en geef hem een vertraging van 0,5 sec.
Laten we nu kijken naar de CSS die nodig is voor onze splash-pagina:
.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;}
We roepen een achtergrondafbeelding in (hier is het slechts een zwart-witfoto van een straat), die we centreren, en er ook voor zorgen dat deze het hele scherm op elke grootte beslaat en eraan vastzet, wat betekent dat het ' Ik ga niet verder scrollen. Vervolgens geven we het een 'vaste' positie en geven we aan dat het op een afstand van 0 van boven, rechts, onder en links moet staan - daarom vult het het volledige browservenster. We zullen het dan een minimale hoogte geven, want wat we binnenin zullen plaatsen zal absoluut gepositioneerd zijn. Zorg ervoor dat het een hoge Z-index heeft, want we willen dat het boven de rest van de inhoud op de pagina verschijnt (die nu direct onder ons splashscherm wordt geplaatst, omdat het een vaste positie heeft).
Daar gaan we, dat zijn alle stijlen die eigenlijk nodig zijn om het startscherm op de juiste plaats op de pagina te laten verschijnen. Het vullen van het scherm en boven alle andere inhoud, zonder de stroom van de pagina helemaal te veranderen. Dus nu zal ik je snel de rest van de CSS geven, die de titel vooral op de juiste plaats plaatst, en een mooie naar beneden wijzende pijl toevoegt om aan te geven dat de gebruiker zou moeten scrollen. En tot slot enkele basisstijlen voor de pagina en enkele mediaquery's:
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;}}
Dus hier hebben we algemene body-stijlen, een aantal top-padding op de titel, waar we ook de fade-in-animatie met nog eens een halve seconde uitstellen. Het heeft dus een eigen ingang. De pijllink is absoluut gepositioneerd om altijd in het midden en onderaan in het scherm te staan. Het heeft nog een halve seconde vertraging om als laatste op het scherm te verschijnen. We voegen enkele CSS3-overgangen toe zodat de positiewijzigingen in de: hover-status geanimeerd zijn. Ten slotte hebben we enkele kleine wijzigingen in de mediaquery nodig om het op kleinere schermen iets mooier te laten lijken. Maar uiteraard zullen deze stijlen veranderen volgens uw ontwerp.
jQuery
Dus zoals we eerder hebben verklaard, gaan we een bestand maken met de naam main.js in een js- directory. Daarin zullen we onze jQuery schrijven die ervoor zorgt dat het opstartscherm verdwijnt bij bladeren of wanneer u op de pijlkoppeling klikt. Hier is het:
$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"} );} $ (.. "Splash-pijl") klikken (function () {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"} , 800);});});}); $ (venster) .scroll (function () {$(window).off("scroll");$(".splash").slideUp("800", function() {$("html, body").animate({"scrollTop":"0px"} ". Wrapper ", 100) $ () vertraging (100) .animate ({" ondoorzichtigheid ":" 1.0" }, 800);});});
Eerst en vooral wikkelen we onze eerste paar statements in een document-ready- functie om alleen actie te ondernemen als de pagina volledig is geladen. Dus om te beginnen controleren we of ons splashscherm zichtbaar is. Als dat zo is, maken we de wrapper onzichtbaar (dus we hebben geen flits met inhoud terwijl de achtergrondafbeelding wordt geladen en ook om een definitieve fade-in animatie te maken zodra we bij de pagina zijn aangekomen). Vervolgens voegen we een functie toe aan de klikhandler op de pijl. Dus als de gebruiker erop klikt, schuift het opstartscherm omhoog (en verdwijnt dus) en vervolgens animeren we de dekking van de omslag opnieuw naar 1.
Dit kleine codeblok is (bijna) hetzelfde dat we net hierna zullen gebruiken in de $ (window) .scroll- functie. Dus als de gebruiker scrolt, schuiven we de splash op en animeren we deze keer terug naar de bovenkant van de pagina (zodat de gebruiker niet halverwege de pagina begint) en animeren we de dekking van het wrapperelement. We voegen ook die regel $ (window) .off ("scroll") toe; die ervoor zorgt dat het venster niet scrolt wanneer we het niet willen. Wanneer de gebruiker voor het eerst scrolt, willen we dat deze de animatie juist activeert en niet echt door de pagina schuift. Maar als de intro voorbij is, scrolt de pagina normaal.
Conclusie
Dus daar heb je het, een heel eenvoudige (lichtgewicht) maar elegante oplossing om een introductiescherm aan de bovenkant van je site toe te voegen en het te laten verdwijnen bij scrollen, of wanneer de gebruiker op een specifiek element klikt. U kunt deze code gebruiken, gebruiken en aanpassen aan uw behoeften.
Zoals ik in het begin al zei, kan deze techniek op verschillende manieren worden gebruikt, dus wees creatief!