Eine Website muss über eine Reihe von UX-Add-Ons oder -Funktionen verfügen, die sie für sich auszeichnen und darüber hinaus dem Benutzer die größtmögliche Benutzerfreundlichkeit bieten, um die relevanten Vorgänge auf der Website schnell und einfach ausführen zu können.
Eine dieser Funktionen oder Ergänzungen ist der berühmte Schieberegler, mit dem Bilder, Text oder beides eingefügt werden können. Er empfängt den Benutzer beim Aufrufen der Website und zeigt herausragende Informationen auf eine Weise an, die gut aussieht und eine Vorschau bietet des gesamten Inhalts.
Darüber hinaus wird eine Website, die nicht reagiert, sicherlich nicht korrekt in den Suchmaschinen oder bei den Nutzern positioniert. Aus diesem Grund sollte alles, was wir entwickeln, diesen Aspekt abdecken.
Lassen Sie uns sehen, wie wir diese Ergänzung entwickeln können, die korrekt und reaktionsschnell funktioniert.
Der HTML-Code des reaktionsfähigen Schiebereglers
Wir werden unsere Ergänzung mit HTML5, CSS3, jQuery und Modernizr entwickeln , um alle erforderlichen Funktionen bereitzustellen. In dieser Reihenfolge werden wir unser HTML erstellen, das unsere Stylesheets, unsere Bibliotheken und die Inhaltsstruktur enthält.
<! DOCTYPE html> <html lang = "en" class = "no-js"> <head> <meta charset = "UTF-8" /> <meta http-equiv = "X-UA-kompatibel" content = "IE = edge, chrome = 1"> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> <title> Responsive Slider </ title> <meta name = "description" content = "TechnoWikis: Slider responsive" /> <meta name = "keywords" content = "responsive, content, slider, jquery, css3, fluid, template" /> <link rel = "stylesheet" type = "text / css" href = "css / default.css" /> <link rel = "stylesheet" type = "text / css" href = "css / component.css" /> <script src = "js / modernizr.custom.js"> </ script> </ head> <body> <div class = "container"> <header class = "clearfix"> <span> TechnoWikis </ span> <h1> Regler reagiert </ h1> </ header> <div class = "main"> <div id = "cbp-contentslider" class = "cbp-contentslider"> <ul> <li id = "slide1"> <h3> <img src = "img / php-logo.png" class = "logos_language"> PHP </ h3> <div> <div class = "cbp-content"> <p> Lorem ipsum pain sit amet, consectetur adipiscing elit, sed do eiusmod temporäre incididunt ut labore und dolore magna aliqua. Nutzen Sie diese Gelegenheit, um Ihre Arbeit zu verrichten, und erhalten Sie einen Überblick über die Folgen. Duis aute irure pain in reprehenderit in voluptate velit esse cillum dolore. Excepteur sint occaecat cupidatat nonproident, sunt in fault </ div> </ div> </ li> <li id = "slide2"> <h3> <img src = "img / logo-html5.png" class = "logos_language"> HTML5 </ h3> <div> <div class = "cbp-content"> <p> Lorem ipsum pain sit amet, consectetur adipiscing elit, sed do eiusmod temporäre incididunt ut labore und dolore magna aliqua. Nutzen Sie diese Gelegenheit, um Ihre Arbeit zu verrichten, und erhalten Sie einen Überblick über die Folgen. Duis aute irure pain in reprehenderit in voluptate velit esse cillum dolore. Excepteur sint occaecat cupidatat nonproident, sunt in fault </ div> </ div> </ li> <li id = "slide3"> <h3> <img src = "img / js-logo.png" class = "logos_language"> JavaScript </ h3> <div> <div class = "cbp-content"> <p> Lorem ipsum pain sit amet, consectetur adipiscing elit, sed do eiusmod temporäre incididunt ut labore und dolore magna aliqua. Nutzen Sie diese Gelegenheit, um Ihre Arbeit zu verrichten, und erhalten Sie einen Überblick über die Folgen. Duis aute irure pain in reprehenderit in voluptate velit esse cillum dolore. Excepteur sint occaecat cupidatat nonproident, sunt in fault </ div> </ div> </ li> <li id = "slide4"> <h3> <img src = "img / logo-jquery.png" class = "logos_language"> jQuery </ h3> <div> <div class = "cbp-content"> <p> Lorem ipsum pain sit amet, consectetur adipiscing elit, sed do eiusmod temporäre incididunt ut labore und dolore magna aliqua. Nutzen Sie diese Gelegenheit, um Ihre Arbeit zu verrichten, und erhalten Sie einen Überblick über die Folgen. Duis aute irure pain in reprehenderit in voluptate velit esse cillum dolore. Excepteur sint occaecat cupidatat nonproident, sunt in fault </ div> </ div> </ li> <li id = "slide5"> <h3> <img src = "img / logo-java.png" class = "logos_language"> Java </ h3> <div> <div class = "cbp-content"> <p> Lorem ipsum pain sit amet, consectetur adipiscing elit, sed do eiusmod temporäre incididunt ut labore und dolore magna aliqua. Nutzen Sie diese Gelegenheit, um Ihre Arbeit zu verrichten, und erhalten Sie einen Überblick über die Folgen. Duis aute irure pain in reprehenderit in voluptate velit esse cillum dolore. Excepteur sint occaecat cupidatat nonproident, sunt in fault </ div> </ div> </ li> </ ul> <nav> <a href="#slide1"> <span> PHP </ span> </a> <a href="#slide2"> <span> HTML5 </ span> </a> <a href="#slide3"> <span> JS </ span> </a> <a href="#slide4"> <span> jQuery </ span> </a> <a href="#slide5"> <span> Java </ span> </a> </ nav> </ div> </ div> </ div> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </ script> <script src = "js / jquery.cbpContentSlider.min.js"> </ script> <script> $ (function () { $ ('# cbp-contentslider') .cbpContentSlider (); }); </ script> </ body> </ html>
Eines der Dinge, die wir hervorheben müssen, ist die Struktur unseres Codes, in der wir chaotische Listen neben geordneten Listen und Containern haben. Schließlich identifizieren wir die Navigationsleiste und fügen am Ende unser JavaScript hinzu, um Ladezeiten zu optimieren und so weiter Es bezieht sich auf die Funktion von cbpContentSlider , einer Bibliothek, die unter folgendem Link heruntergeladen werden kann.
Die Stile des Schiebereglers
Sobald wir unser HTML haben , werden wir die CSS-Dateien einbinden, in diesem Fall werden wir zwei verschiedene verwenden. Der erste von ihnen ist für die Verwaltung der Stile auf der Ebene des Aussehens unseres Schiebereglers zuständig und der zweite für die Verwaltung der Medien, die von den Regeln an ein ansprechendes Design angepasst werden sollen . Sehen wir uns den Inhalt des ersten an:
body, html {Schriftgröße: 100%; Polsterung: 0; margin: 0;} *, *: nach, *: vor { -webkit-box-größe: border-box; -Moz-Box-Größe: Border-Box; Box-Größe: Border-Box; } .clearfix: vorher .clearfix: nach { Inhalt: ""; Anzeige: Tabelle; } .clearfix: nach { klar: beides; } Körper { Schriftfamilie: 'Lato', Calibri, Arial, serifenlos; Farbe: # 47a3da; } ein { Farbe: # f0f0f0; Textdekoration: keine; } a: schwebeflug { Farbe: # 000; } .main, .container> header { Breite: 90%; maximale Breite: 70em; Margin: 0 Auto; Polsterung: 0 1.875em 3.125em 1.875em; } .container> header { Polsterung: 2.875em 1.875em 1.875em; } .container> header h1 { Schriftgröße: 2.125em; Zeilenhöhe: 1,3; Rand: 0; Schwimmer: links; Schriftgröße: 400; } .container> Header Span { Anzeige: Block; Schriftgröße: 700; Text-Transformation: Großbuchstaben; Buchstabenabstand: 0.5em; Polsterung: 0 0 0,6 em 0,1 em; } .container> header nav { Schwimmer: rechts; } .container> header nav a { Anzeige: Block; Schwimmer: links; Position: relativ; Breite: 2.5em; Höhe: 2.5em; Hintergrund: #fff; Randradius: 50%; Farbe: transparent; Rand: 0 0,1 em; Rand: 4px durchgehend # 47a3da; Texteinzug: -8000px; } .container> header nav a: nach { Inhalt: attr (Dateninfo); Farbe: # 47a3da; Position: absolut; Breite: 600%; oben: 120%; Text ausrichten: rechts; rechts: 0; Deckkraft: 0; Zeiger-Ereignisse: keine; } .container> header nav a: hover: after { Deckkraft: 1; } .container> header nav a: hover { Hintergrund: # 47a3da; } .icon-drop: vorher .icon-arrow-left: vor { Schriftfamilie: 'fontawesome'; Position: absolut; oben: 0; Breite: 100%; Höhe: 100%; sprechen: keine; Schriftstil: normal; Schriftgröße: normal; Zeilenhöhe: 2; Textausrichtung: Mitte; Farbe: # 47a3da; -webkit-font-smoothing: Antialiasing; Texteinzug: 8000px; links auffüllen: 8px; } .container> header nav a: hover: before { Farbe: #fff; } .icon-drop: vor { Inhalt: " e000"; } .icon-arrow-left: vor { Inhalt: " f060"; } .logos_lenguaje { Schwimmer: links; }
Wenn wir es gewohnt sind, mit CSS3 herumzuspielen, sehen wir, dass daran nichts Seltsames ist. Positionierung, Farben usw. Als nächstes sehen wir uns die zweite CSS-Datei an, die die Regeln für Medienabfragen und einige Stile für die Container unseres Schiebereglers enthält:
html, body, .container, .main {height: 100%;} .cbp-contentslider { Breite: 100%; Höhe: 70%; Rand: 1em auto; Position: relativ; Rand: 4px durchgehend # 47a3da } .cbp-contentslider> ul { Listenstil: keine; Höhe: 100%; Breite: 100%; Überlauf: versteckt; Position: relativ; Polsterung: 0; Rand: 0; } .cbp-contentslider> ul li { Position: absolut; Breite: 100%; Höhe: 100%; links: 0; oben: 0; Polsterung: 1em; Hintergrund: #fff; } .cbp-contentslider> ul li: target { Z-Index: 100; } .cbp-contentslider nav { Position: absolut; unten: 0; links: 0; rechts: 0; Höhe: 3.313em; Z-Index: 1000; Rand oben: 4px durchgehend # 47a3da; Überlauf: versteckt; } .cbp-contentslider nav a { Schwimmer: links; Anzeige: Block; Breite: 20%; Höhe: 100%; Schriftgröße: 400; Buchstabenabstand: 0.1em; Überlauf: versteckt; Farbe: # 47a3da; Hintergrund: #fff; Gliederung: keine; Textausrichtung: Mitte; Zeilenhöhe: 3; Position: relativ; links auffüllen: 3.125em; Text-Transformation: Großbuchstaben; Rand rechts: 4px durchgehend # 47a3da; -Webkit-Übergang: Farbe 0,2 s, Hintergrundfarbe 0,2 s; -Moz-Übergang: Farbe 0,2 s, Hintergrundfarbe 0,2 s; Übergang: Farbe 0,2 s, Hintergrundfarbe 0,2 s; } .cbp-contentslider nav a span { Anzeige: Block; } .cbp-contentslider nav a: letztes Kind { Grenze: keine; Kastenschatten: 1px 0 # 47a3da; } .cbp-contentslider nav a: hover { Hintergrundfarbe: # 47a3da; Farbe: #fff; } .cbp-contentslider nav a.rc-active { Hintergrundfarbe: # 47a3da; Farbe: #fff; } .cbp-contentslider h3 { Schriftgröße: 4em; Höhe: 2em; Zeilenhöhe: 1,7; Schriftgröße: 300; Marge: 0 0 0,3 em; Position: relativ; Farbe: # 47a3da; Text-Transformation: Großbuchstaben; Text ausrichten: rechts; Buchstabenabstand: 0.3em; Polsterung: 0 0,2 bis 0 0; Rand unten: 4px durchgehend # 47a3da; } .cbp-contentslider li> div { Position: absolut; oben: 9em; unten: 3,313em; Breite: 100%; links: 0; Polsterung: 0 1em; Überlauf-x: versteckt; Überlauf-y: auto; } .cbp-contentlider .cbp-content { -webkit-column-rule: 1px gestrichelt # 47a3da; -moz-column-rule: 1px gestrichelt # 47a3da; Spaltenregel: 1px gestrichelt # 47a3da; -webkit-column-count: 2; -moz-column-count: 2; -o-Spaltenanzahl: 2; Spaltenanzahl: 2; -webkit-column-gap: 1em; -moz-column-gap: 1em; -o-Spalte-Lücke: 1em; Spaltenabstand: 1em; vertikal ausrichten: oben; Polsterung: 1em 0; } .cbp-contentslider p { Farbe: # 47a3da; Polsterung: 0 0,5 em 0,4 em; Rand: 0; Schriftgröße: 1.2em; Schriftgröße: 300; Text ausrichten: rechtfertigen; Zeilenhöhe: 1,6; } / * Medienanfragen * / @media screen und (max-width: 70em) { .cbp-contentslider p { Schriftgröße: 100%; } } @media screen und (max-width: 67.75em) { .cbp-contentslider {Schriftgröße: 85%; } .cbp-contentslider nav to [class ^ = "logos_language"]: before, .cbp-contentslider nav a [class * = "logos_lenguaje"]: before { links: 50%; ; } .cbp-contentslider nav a span { Anzeige: keine; } } @media screen und (max-width: 43em) { .cbp-contentslider h3 { Schriftgröße: 2em; } .cbp-contentlider .cbp-content { -webkit-column-count: 1; -moz-column-count: 1; -o-Spaltenanzahl: 1; Spaltenanzahl: 1; } .cbp-contentslider li> div { oben: 5em; } } @media screen und (max-width: 25em) { .cbp-contentslider nav a {padding: 0;} .cbp-contentslider h3 [class ^ = "logos_language"]: vorher .cbp-contentslider h3 [class * = "logos_language"]: before {display: none;} }
Mit all den Teilen zusammen sehen wir uns dann die Bedienung unseres Schiebereglers an.
Wie wir sehen können, ist es uns gelungen, unseren reaktionsschnellen Schieberegler zu erstellen, indem wir jQuery , CSS3 und einige spezielle Bibliotheken dafür unterstützen. Es liegt an jedem Benutzer, dieses Beispiel zu nehmen und es an seine Bedürfnisse anzupassen, indem er die Farben, Bilder, Texte ändert und es auf jeder Site implementiert, die diese nützliche und farbenfrohe Funktionalität erfordert.