Eine gute Möglichkeit, die Aufmerksamkeit eines Besuchers auf Ihre Website zu lenken, ist ein "Splash-Screen" oder ein "Intro-Bildschirm". Einen erfolgreichen zu machen, ist jedoch aus einem einfachen Grund sehr schwierig: Splash-Screens irritieren Benutzer leicht.
Splash Screens können funktionieren, wenn sie schnell erscheinen und leicht zu entfernen sind. Sie können visuell auffällig und schön sein und den Benutzer zum Scrollen bringen, um mehr zu lernen. Diese Art von Intros funktioniert sehr gut auf Single-Page-Scroll-Websites. Oder der "Banner-Stil" von Webdesign, der mit dem flachen Design-Trend in Mode gekommen ist. Es kann auch sehr nützlich sein, einen gut aussehenden "Hintergrundvideo" -Stil des Intro zu machen, der im Moment auch allgegenwärtig ist.
Was ich Ihnen heute zeigen möchte, ist eine grundlegende Methode, um diesen Effekt zu erreichen, den Sie leicht modifizieren können, um schön aussehende Intros zu Web-Erlebnissen zu machen.
Wenn Sie sehen möchten, was wir bauen, gibt es eine Demo hier. Und du kannst Hier können Sie alle Quelldateien herunterladen.
Das Markup
Wir werden versuchen, das Markup dafür sehr einfach zu halten. Auf diese Weise kann es tatsächlich auf bereits vorhandenen Sites sowie auf neuen Projekten implementiert werden.
Was wir also machen wollen, sind zwei Divs. Eine mit einer Klasse von Splash und eine mit einer Klasse von Wrapper . (Die Wrapperklasse existiert möglicherweise bereits auf irgendeine Art für Sie, wenn Sie dies auf einer bereits vorhandenen Site implementieren. Daher müssen Sie diesen Klassennamen eventuell ändern).
Das ist es. Das ist alles, was wir semantisch brauchen. Aber natürlich fügen wir Dummy-Inhalte und Titel hinzu, damit wir in unserer Demo etwas sehen können. Wir benötigen auch eine Art Pfeil, der im Begrüßungsbildschirm hinzugefügt werden muss, um dem Benutzer anzuzeigen, dass er nach unten scrollen kann (da dies unsere Methode ist, den Intro-Bildschirm verschwinden zu lassen und den Hauptinhalt einzufügen).
Also hier ist das einfache Markup, das in unser Body- Tag hineingeht:
Lorem ipsum dolor sit amét, consectetur adipisicing elit. Dolor, velit sapiente facer tempora ullam accusamus minus laborum porro odit sequi dolorum enim optio alias bei nulla laudantium voluptatibus quibusdam quaera provident eius quo perferendis william modi maiores cumque saepe quidem ducimus numquam und commodis amoritate libero pariatur mollitia eveniet mostias debitis quia! Natus, Minima, Fehler, porro facere cum perferendis consequatur notwendig necessitatibus id sapiente soluta veritatis magnam Quasi ut cumque provident quidem nemo enim nesciunt nihil Architekt in obcaecati nobis quam tetenur corrupti. Fehler, soluta autem consequatur mollitia dolorem sequi iusto dollo fuga facilis esse illum accusamus ratione earum quasi ipsa doloribus odio. Architecto, natus fuga nicht perferendis veritatis nihil replellat dolorum rerum quidem
Also, lasst uns etwas genauer erklären, was hier vor sich geht: Wir beginnen mit unserem Splash Div. Darin haben wir einen Titel und unseren Scrollindikator (der hier ein Pfeilbild ist, aber es kann alles sein, was Sie wollen, dass es offensichtlich ist). Dann schließen wir das div und öffnen ein weiteres mit einer Wrapper- Klasse. Darin haben wir nur einen generischen Seiteninhalt, der für jeden Fall anders sein wird, aber hier werden wir es einfach halten: einen Titel, eine Navigation, einen Hauptinhaltsbereich und eine Fußzeile. Dann wird jQuery von der Google API aufgenommen, da wir es für die Funktionalität verwenden werden, und schließlich werden wir mit einer anderen .js-Datei verlinkt, die unsere eigene ist, in der wir unseren jQuery-Code schreiben werden.
Möglicherweise bemerken Sie auch die Einblendung des Klassennamens im Begrüßungsbildschirm. Wir verwenden diese Klasse, um einigen Elementen einige schöne CSS3-Animationen hinzuzufügen und das Intro leistungsfähiger zu machen. Natürlich, wenn man sich die Ergebnisse jetzt ansieht, wird es wirklich nichts sein, wir müssen jetzt alles stilisieren. Apropos, lass uns in die CSS gehen ...
Styling
Versuchen wir einmal, die Stile einfach und nützlich zu halten. Dies ist alles einfache CSS. Lassen Sie uns zunächst mit dem Namen der Klasse .fade-in beginnen. (Dies muss oben in unserer CSS-Datei deklariert werden, damit wir andere Animationsverzögerungszeiten für weitere Elemente angeben können.)
@-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;}
Wir deklarieren zuerst die Keyframes und rufen unsere Animation fadeIn auf. Es geht von einer Deckkraft von 0 auf 1. Dann zielen wir direkt auf den Klassennamen und geben an, dass es eine Deckkraft von 0 hat. und rufen Sie die Animation auf, die wir gerade spezifiziert haben, machen Sie sie 0,3 Sekunden lang und geben Sie ihr eine Verzögerung von 0,5 Sekunden.
Sehen wir uns nun das CSS an, das für unsere Splash-Seite benötigt wird:
.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;}
Wir rufen ein Hintergrundbild an (hier ist es nur ein Schwarz-Weiß-Foto einer Straße), das wir zentrieren und sicherstellen, dass es den gesamten Bildschirm in jeder Größe abdeckt und es anbringt - was bedeutet, dass es " lch kann nicht auf scroll gehen. Dann geben wir ihm eine "feste" Position und geben an, dass er von oben, von rechts, von unten und von links in einem Abstand von 0 liegen sollte - daher füllt er das gesamte Browserfenster aus. Wir geben ihm dann eine Mindesthöhe, da das, was wir hineinlegen, absolut positioniert ist. Stellen Sie sicher, dass es einen hohen Z-Index hat, da es über dem Rest des Inhalts auf der Seite erscheinen soll (der jetzt direkt unter unserem Begrüßungsbildschirm platziert wird, da er eine feste Position hat).
Da sind alle Stile, die tatsächlich benötigt werden, um den Begrüßungsbildschirm an der richtigen Stelle auf der Seite erscheinen zu lassen. Füllen Sie den Bildschirm und vor allem anderen Inhalt, ohne den Fluss der Seite überhaupt zu ändern. So, jetzt gebe ich Ihnen schnell den Rest des CSS, der hauptsächlich den Titel an der richtigen Stelle platziert, fügen Sie einen schönen Pfeil nach unten um anzuzeigen, dass der Benutzer einen Bildlauf durchführen sollte. Und schließlich einige grundlegende Stile für die Seite und ein paar Medienabfragen:
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;}}
Also haben wir hier allgemeine Body-Styles, einige Top-Padding auf dem Titel, wo wir die Einblendung auch um eine halbe Sekunde verzögern. Es hat also einen eigenen Eingang. Der Pfeil-Link ist absolut positioniert, um immer in der Mitte und am unteren Bildschirmrand zu sein. Es hat noch eine halbe Sekunde Verzögerung, um auf dem Bildschirm zu erscheinen. Wir fügen einige CSS3-Übergänge hinzu, so dass die Positionsänderungen im: hover-Status animiert werden. Schließlich haben wir einige kleine Änderungen an der Medienabfrage, damit es auf kleineren Bildschirmen etwas schöner aussieht. Aber natürlich werden sich diese Stile je nach Design ändern.
jQuery
Wie wir schon früher erklärt haben, werden wir eine Datei namens main.js in einem js- Verzeichnis erstellen . Darin schreiben wir unsere jQuery, die den Begrüßungsbildschirm beim Blättern oder beim Klicken auf den Pfeil-Link verschwinden lässt. Hier ist es:
$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"} );} $ (". splash-arrow"). click (function () {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"} , 800);});});}); $ (window) .scroll (function () {$(window).off("scroll");$(".splash").slideUp("800", function() {$("html, body").animate({"scrollTop":"0px"} , 100); $ (". Wrapper"). Delay (100) .animate ({"opacity": "1.0"}, 800);});});
Zuallererst wickeln wir unsere ersten paar Anweisungen in eine Dokumentbereitschaftsfunktion ein , um nur dann Maßnahmen zu ergreifen, wenn die Seite vollständig geladen ist. Um zu beginnen, überprüfen wir, ob unser Begrüßungsbildschirm sichtbar ist. Wenn dies der Fall ist, machen wir den Wrapper unsichtbar (so haben wir keinen Flash des Inhalts, während das Hintergrundbild geladen wird, und auch, um eine endgültige Einblendung der Animation vorzunehmen, sobald wir auf der Seite angekommen sind). Wir fügen dann dem Klick-Handler eine Funktion auf dem Pfeil hinzu. Wenn der Benutzer darauf klickt, wird der Begrüßungsbildschirm nach oben verschoben (und verschwindet daher) und wir animieren die Deckkraft des Wrappers wieder auf 1.
Dieser kleine Code-Block ist (fast) derselbe, den wir gleich danach in der $ (window) .scroll- Funktion verwenden werden. Wenn der Benutzer also scrollt, schieben wir den Splash nach oben und animieren ihn dann zum Anfang der Seite (so dass der Benutzer nicht halbwegs auf der Seite startet) und animiert die Deckkraft des Wrapperelements. Wir fügen auch in dieser Zeile hinzu $ (window) .off ("scroll"); das verhindert, dass das Fenster tatsächlich scrollt, wenn wir es nicht wollen. Wenn der Benutzer zum ersten Mal scrollt, möchten wir, dass er nur die Animation auslöst und nicht tatsächlich die Seite scrollt. Aber sobald das Intro verschwunden ist, wird die Seite normal durchlaufen.
Fazit
So haben Sie es, eine sehr einfache (leichte), aber elegante Lösung, um einen Intro-Bildschirm an den Anfang Ihrer Website hinzugefügt zu haben, und lassen Sie es auf Bildlauf verschwinden, oder wenn der Benutzer auf ein bestimmtes Element klickt. Fühlen Sie sich frei, diesen Code zu nehmen, ihn zu benutzen und ihn Ihren Bedürfnissen anzupassen.
Wie ich zu Beginn erwähnt habe, kann diese Technik auf viele verschiedene Arten verwendet werden, also werde kreativ!