So erstellen Sie mit jQuery ein verschiebbares Raster

Dieses Raster ist eine unterhaltsame und ansprechende Möglichkeit, mehrere Informationen auf der gleichen Fläche anzuzeigen, indem jeder Abschnitt des Rasters durch Klicken oder Bewegen des Mauszeigers weggeschoben wird und zusätzlicher Inhalt angezeigt wird.

Im Erstellungsprozess kümmern wir uns um das erforderliche Markup, einige Gestaltungsmöglichkeiten und die Anpassung des Rasters an die Reaktionsfähigkeit sowie die Implementierung einer Symbol-Webschriftart. Wir werden auch die benötigte jQuery sowie die verschiedenen verfügbaren Optionen untersuchen.

So wird es aussehen, wenn wir fertig sind:

Erstellen des Rasters in HTML

Das Markup für unser Rastersystem ist sehr einfach und funktioniert praktisch unabhängig davon, wie Sie es aufbauen möchten, aber lassen Sie mich das Wesentliche erklären: Es muss ein Umhüllungselement um unser Raster vorhanden sein. Dann müssen darin einzelne Abschnitte vorhanden sein, die eine relative Positionierung haben (dies sind die sichtbaren Kästchen, aus denen das Raster besteht). Innerhalb jedes dieser Bereiche befinden sich zwei weitere Bereiche, die eine absolute Positionierung haben und die gesamte Breite und Höhe ihres übergeordneten Elements (der Box) ausfüllen. Dann animieren wir ihre Positionen, sodass sie entweder „außerhalb des Bildschirms“ oder sichtbar sind.

Hier ist der Code, den ich im Beispiel verwende:


Webdesign

Etwas Beschreibendes zum Thema Webdesign. Und was Sie als Service anbieten.


Grafikdesign


Logo-Design


Webentwicklung


3D-Design


Illustration

Wie Sie sehen, ist es ziemlich einfach! Es gibt ein Div mit der ID „services“ und einem eindeutigen Float-Klassennamen. Darin befinden sich dann sechs verschiedene

-Elemente. Wie bereits erwähnt, befinden sich darin zwei DIVs, eines mit einer Spanne, um unser Symbol mithilfe einer Symbolschriftart zu erstellen, und eines Titels. Dann gibt es eine Sekunde, in der Sie den zusätzlichen Inhalt einfügen können.

Das ist so einfach wie das Markup, das heißt, wenn es kein JavaScript und kein CSS gibt, wird unser Inhalt nicht wirklich beschädigt, er ist immer noch sichtbar (abgesehen von den Symbolen, aber da es sich um leere Bereiche handelt). wir werden sie sowieso nicht sehen). Das ist also unser Backup, keine Stile und kein JavaScript-Inhalt:

Lesen:  So aktualisieren Sie WordPress sicher

Jetzt sind wir sicher, dass der Inhalt sicher ist. Wir können mit unserem CSS fortfahren, damit es schön aussieht, aber was noch wichtiger ist, es für die jQuery-Funktionalität einrichten.

Gestalten Sie das Raster mit CSS

Teilen wir das CSS in drei Teile auf; das Wesentliche, das benötigt wird, damit unsere jQuery funktioniert, der Symbolschriftcode und dann die endgültigen Stile, damit es gut aussieht. Hier also der erste Abschnitt:

#services .service {
Breite: 33 %;
schweben: links;
Polsterung: 0,5em;
Mindesthöhe: 200 Pixel;
Überlauf versteckt;
Position: relativ;
Rand: 1px fest #eee;
}

@media screen und (max-width: 600px) {
#services .service {
Breite: 50 %;
}
}

@media screen und (max-width: 320px) {
#services .service {
Breite: 100 %;
}
}

#services .service .service-icon, #services .service .service-description {
Position: absolut;
Breite: 100 %;
Höhe: 100 %;
oben: 0;
links: 0;
Hintergrund: #fff;
Polsterung: 50px 0;
Farbe: #222;
}

#services .service .service-description {
links: 100 %;
Hintergrund: #249EC2;
Farbe weiß;
Polsterung: 50px;
}

#services .service .service-description:hover { Cursor: Zeiger; }

Sehen wir uns also an, was hier vor sich geht. Wir zielen zunächst auf die einzelnen Kartonverpackungen (.service) ab und ordnen sie in der Rasterform an, indem wir ihnen eine fließende Breite und eine Mindesthöhe geben und sie nach links schweben lassen (deshalb hat die gesamte Verpackung eine Clearfloat-Korrektur). Dann ist es wichtig, ihren Überlauf auszublenden (sonst würden wir den zusätzlichen Inhalt jederzeit sehen) und ihre Position relativ zu machen. Anschließend machen wir dieses Raster auch reaktionsfähiger, indem wir einige Medienabfragen für verschiedene Bildschirmgrößen verwenden und die Breite jeder Zelle erhöhen. Dieser Code bedeutet, dass unser Raster mit einem 3-Spalten-Design bei voller Desktop-Größe beginnt und durch ein zweispaltiges Design und schließlich ein einspaltiges Design verläuft, während die Bildschirmgröße verringert wird.

Lesen:  Was ist ein Portal?

Nachdem nun die äußeren Kästchen angebracht sind, konzentrieren wir uns auf die inneren Abschnitte, das .service-icon und die .service-description. Wir positionieren diese absolut (daher die Mindesthöhe im vorherigen Stil) und positionieren sie beide oben links (wir werden die Position der Beschreibung gleich ändern). Anschließend machen wir sie zu 100 % breit und hoch, sodass sie ihr übergeordnetes Element ausfüllen, und der Rest dient nur dem visuellen Effekt. Schließlich zielen wir ausschließlich auf das Beschreibungs-Div ab und setzen den linken Wert auf 100 %. Dadurch wird die gesamte Box nach rechts verschoben und aufgrund des im .service-Div versteckten Überlaufs außer Sichtweite. Auf diesen „linken“ Positionswert zielen wir mit der jQuery ab und animieren ihn. Deshalb ist es wichtig, ihn jetzt zu definieren.

Die Symbolschriftart

Fahren wir mit dem nächsten Schritt fort. Hier verwenden wir @font-face, um unsere Symbolschriftart abzurufen und die Klassennamen zu definieren, die wir bereits im HTML verwendet haben, damit sie als richtige Symbole angezeigt werden. Der erste Schritt besteht darin, eine Online-Ressource zu finden, die eine Symbolschriftart erstellen kann, die Ihren Anforderungen entspricht. Es gibt einige, aber für dieses Beispiel habe ich mich für die Verwendung entschieden Fontastisch. Auf der Website wählen Sie zunächst die Symbole aus, die Sie verwenden möchten. Dies ändert sich natürlich für jedes Projekt, an dem Sie arbeiten. Aber dann können Sie einige Informationen, wie die Klassennamen der Symbole und den Schriftartnamen, wie folgt ändern:

Wie Sie sehen, habe ich die Klassennamen, die wir im HTML verwendet haben, so gewählt, dass sie problemlos übereinstimmen. Der Dienst bietet Ihnen dann einen Download eines Ordners „Fonts“ und etwas Code an. Platzieren Sie den Ordner „Fonts“ in Ihrem CSS-Ordner (oder wo immer es Ihnen passt). Nehmen Sie dann den Code, den Sie erhalten, und fügen Sie ihn Ihrer CSS-Datei hinzu. Das brauchen Sie:

Lesen:  So nutzen Sie automatisierte Marketinglösungen, um Ihr Geschäft auszubauen

@Schriftart {
Schriftfamilie: „slidable-grid“;
src:url(“fonts/slidable-grid.eot”);
src:url(“fonts/slidable-grid.eot?#iefix”) format(“embedded-opentype”),
url(“fonts/slidable-grid.woff”) format(“woff”),
url(“fonts/slidable-grid.ttf”) format(“truetype”),
url(“fonts/slidable-grid.svg#slidable-grid”) format(“svg”);
Schriftstärke: normal;
Schriftstil: normal;
}

[class^=”icon-“]:Vor,
[class*=” icon-“]:Vor {
Schriftfamilie: „slidable-grid“ !important;
Schriftstil: normal !important;
Schriftstärke: normal !important;
Schriftartvariante: normal !important;
Texttransformation: keine !important;
sprechen: keine;
Schriftgröße: 4em;
Zeilenhöhe: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: Graustufen;
}

.icon-web:before {
Inhalt: „a“;
}

.icon-graphic:before {
Inhalt: „b“;
}

.icon-logo:before {
Inhalt: „c“;
}

.icon-dev:before {
Inhalt: „d“;
}

.icon-3d:before {
Inhalt: „e“;
}

.icon-illustration:before {
Inhalt: „f“;
}

Und da haben Sie es. Wenn Sie das Projekt neu laden, werden die Symbole angezeigt. Jetzt muss nur noch das Styling fertiggestellt werden, damit es wie die endgültige Demo aussieht.

Endgültige Stile

Lassen Sie uns schnell mit den letzten verbleibenden Stilen abschließen. Hier gibt es nichts Wesentliches, nur Design, damit es so aussieht, wie wir es wollen, also ist alles ziemlich selbsterklärend. Hier ist der Code, um das Raster zu zentrieren und ihm die maximale Breite zu geben. Auch um den schönen Hover-Effekt auf den Symbolen zu erzielen:

@import-URL(reset.css);

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; Boxgröße: border-box; }

.cf:before, .cf:after { content: ” “; /* 1 */ display: table; /* 2 */ }
.cf:after { clear: Both; }
.cf { *zoom: 1; }

Körper {
Schriftfamilie: „Exo 2“, serifenlos; /* Google-Schriftart http://google.com/fonts */
Textausrichtung: Mitte;
Farbe: #999;
Hintergrund: #444;
-webkit-font-smoothing: antialiased;
}

#Dienstleistungen {
maximale Breite: 850px;
Rand: 0 automatisch;
}

#services .service .service-icon:hover {
Cursor: Zeiger;
Farbe: #249EC2;
}

#services .service .service-icon span {
Bildschirmsperre;
-webkit-transition: alle 0,1 s linear;
-moz-transition: alle 0,1 s linear;
Übergang: alle 0,1 s linear;
}

#services .service .service-icon:hover span {
Position: relativ;
unten: 5px;
}

jQuery-Funktionalität

Unser Ziel mit jQuery ist es, denselben Codeausschnitt für das gesamte Raster wiederzuverwenden. Wir warten auf ein Klickereignis (auf dem Servicefeld). Wenn das passiert, animieren wir die Position des Symbols, um es zu verschieben, und fügen die Beschreibung ein. Außerdem fügen wir einen Klassennamen hinzu, um dabei zu helfen Funktionalität. Fügen Sie also zuerst jQuery in Ihre Seite ein und fügen Sie dann unseren Code entweder in einer anderen Skriptdatei oder innerhalb eines

Aktuelle Artikel:

Empfohlen