So machen Sie Ihre Website mit CSS und JavaScript reaktionsschnell und interaktiv

Eine Website zu haben, die sowohl reaktionsschnell als auch interaktiv ist, ist eine ungeschriebene Anforderung für jeden Website-Besitzer. Die Vorteile einer interaktiven Website, die sich perfekt an jede Bildschirmgröße anpasst, können nicht genug betont werden.

Sie sollten für jeden Benutzer, der Ihre Website besucht, ein personalisiertes Erlebnis schaffen, und mit mehreren CSS-Eigenschaften und einigen JavaScript-Funktionen können Sie genau das tun.

In diesem Tutorial-Artikel erfahren Sie, wie Sie Ihre HTML- und CSS-Website responsive und interaktiv gestalten.

Machen Sie Ihre Website interaktiv

Wenn Sie eine Website erstellen, beginnen Sie von oben nach unten. Daher ist die interaktive Gestaltung Ihrer Website ein Prozess, der ebenfalls ganz oben beginnen sollte. Nehmen diese Portfolio-Website Wir haben als Beispiel gebaut. Es hat ein klares Design, ist aber nicht vollständig interaktiv.

Jedes Menüelement ändert seine Farbe, wenn Sie mit der Maus darüber fahren, aber woher wissen Sie, in welchem ​​Bereich der Website Sie sich befinden? Nun, es gibt zwei Möglichkeiten, dies zu tun – aktivieren Sie Menüpunkte mit

aufrollen und onclick Veranstaltungen.

Das Aktivieren eines Menüpunktes jedes Mal, wenn Sie auf einer Website nach oben oder unten scrollen, erfordert die Verwendung einer JavaScript-Funktion, die Sie "activeMenu" nennen können. Diese Funktion benötigt Zugriff auf die Menüpunkte in der Navigationsleiste sowie auf jeden Abschnitt der Website. Glücklicherweise können Sie dies mit der Verwendung des querySelectorAll DOM-Selektor.

In Ihrem Projektverzeichnis müssen Sie eine neue JavaScript-Datei erstellen und diese mithilfe der folgenden Codezeile mit Ihrer HTML-Datei verknüpfen:

In einem Skript tag, die src value ist der Name der JavaScript-Datei, der im obigen Beispiel main.js.

Die main.js-Datei

// Verwenden von Javascript, um das On-Scroll-Menüelement zu aktivieren
const li = document.querySelectorAll(.links");
const sec = document.querySelectorAll("Abschnitt");
Funktion activeMenu(){
let len ​​= Sek.-Länge;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("aktiv"));
li[len].classList.add("aktiv");
}
activeMenu();
window.addEventListener("scrollen", activeMenu);

Der querySelectorAll Selektor im obigen Code greift alle Menüpunkte mit der Links Klasse. Es erfasst auch alle Abschnitte der Website mit dem Sektion Schild. Der aktivierenMenü Die Funktion nimmt dann die Länge jedes Abschnitts und entfernt oder fügt eine „aktive“ Variable abhängig von der Scroll-Position des Benutzers hinzu.

Damit der obige Code funktioniert, müssen Sie das Stylesheet der Portfolio-Website aktualisieren, um den folgenden Code in den Navigationsleistenabschnitt aufzunehmen:

#navbar .menu li.active a{
Farbe: #fff;
}

Aktivieren von Menüpunkten onclick

 // Verwenden von jquery zum Aktivieren des Menüelements onclick
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

Wenn Sie den obigen Code zu Ihrer JavaScript-Datei hinzufügen, wird jeder Abschnitt aktiviert, wenn ein Benutzer auf das entsprechende Menüelement klickt. Es verwendet jedoch jQuery (eine JavaScript-Bibliothek), die diese Aufgabe mit einer minimalen Menge an Code erfüllt.

Ein Problem, das beim Aktivieren jedes Menüelements beim Klicken auftreten kann, besteht darin, dass die Navigationsleiste den oberen Teil jedes Abschnitts abdeckt. Um dies zu verhindern, können Sie einfach den folgenden Code in den Utility-Bereich des Stylesheets einfügen:

Sektion{
Scroll-Margin-Oberseite: 4.5rem;
}

Der obige Code stellt sicher, dass die Navigationsleiste 4,5 Rem über jedem Abschnitt (oder 72 Pixel) bleibt, wenn Sie durch Klicken zu jedem Abschnitt navigieren. Eine weitere coole Funktion, die Sie Ihrer Website hinzufügen können, ist flüssiges Scrollen, was Sie mit dem folgenden CSS-Code erreichen können:

html {
Scroll-Verhalten: glatt;
}

Gestalten Sie Ihre Homepage interaktiv

Auf den meisten Websites sieht ein Benutzer seine erste Schaltfläche in der Navigationsleiste oder auf der Startseite. Abgesehen davon, dass ein Button wie ein Call-to-Action aussieht, sollte er auch interaktiv sein. Eine großartige Möglichkeit, dies zu erreichen, ist das CSS :schweben Selektor, der einem Element jedes Mal einen neuen Zustand zuweist, wenn ein Benutzer darüber fährt.

Auf der Portfolio-Website hat der einzige Link auf der Startseite den btn -Klasse (die ihm das Aussehen einer Schaltfläche verleiht). Um diese Schaltfläche interaktiv zu gestalten, können Sie einfach die :schweben wähler zum btn Klasse.

Verwenden des :Hover-Selektors

 .btn: schweben{
Hintergrund: #fff;
Farbe blau;
Rand: blauer Feststoff ;
Randradius: 5px;
}

Wenn Sie den obigen Code zum Dienstprogrammabschnitt der Portfolio-Website hinzufügen, wechselt die Schaltfläche von einem Zustand in einen anderen, wenn Sie den Mauszeiger darüber bewegen.

Ein weiteres cooles Feature für die Homepage ist eine Tippanimation, die typed.js (ein jQuery-Eingabe-Animationsskript).

Typed.js verwenden

// jquery, das Textanimationsskript eingibt
var typisiert = new Typed(.typing", {
Zeichenfolgen: ["Softwareentwickler"],
TypGeschwindigkeit: 100,
zurückGeschwindigkeit: 60,
Schleife: wahr
});

Nachdem Sie den obigen Code zu Ihrer JavaScript-Datei hinzugefügt haben, müssen Sie die folgende HTML-Änderung vornehmen:

Und ich bin ein 

Im obigen Code ersetzen Sie den Text „Software Developer“ im Originalcode durch die Klasse „typing“ und erstellen so die Tippanimation.

Andere Bereiche Ihrer Website interaktiv gestalten

Erstellen einer Schaltflächen-Dienstprogrammklasse und Verwenden des schweben selector stellt sicher, dass jeder Abschnitt Ihrer Webseite mit einer Schaltfläche interaktiv ist. Die CSS-Übergangs- und Transformationseigenschaften verfügen auch über einige großartige Animationsfunktionen, die Sie Ihrer Website hinzufügen können.

Wenn Sie eine Galerie oder einen Bildbereich auf Ihrer Website haben, können Sie die beiden oben genannten Eigenschaften verwenden, um einen Hover-Effekt auf Ihren Bildern zu erzeugen. Das Hinzufügen des folgenden CSS-Codes zu den Bildern im Projektabschnitt der Portfolio-Website erzeugt einen Transformationseffekt auf die Bilder im Abschnitt:

.img-container img{
maximale Breite: 450px;
Übergang: alle 0,3s nachlassen;
Cursor: Zeiger;
}
.img-container img: schweben{
transformieren: Skala (1.2);
}

Machen Sie Ihre Website responsive

Beim Erstellen einer responsiven Website müssen Sie vier verschiedene Gerätetypen berücksichtigen – Desktops, Laptops, Tablets und Smartphones. Darüber hinaus hat jeder dieser Gerätetypen auch eine Reihe unterschiedlicher Bildschirmgrößen, aber diese vier Kategorien sind ein guter Anfang.

Verwandt: So verwenden Sie Media Queries in HTML und CSS, um responsive Websites zu erstellen

Im aktuellen Zustand wird die Portfolio-Website auf Desktops und Laptops gut angezeigt. Um es reaktionsfähig zu machen, müssen Sie also ein benutzerdefiniertes Layout für Tablets und Smartphones erstellen.

Der beste Weg, um mit CSS und HTML ein responsives Design zu erreichen, sind Medienabfragen. Sie können eine Medienabfrage in eine CSS-Datei oder den HTML-Code einfügen Verknüpfung Schild. Der letztere Ansatz erleichtert die Skalierbarkeit und ist auch die Methode, die ich demonstrieren werde.

Sie müssen zwei zusätzliche CSS-Dateien erstellen. Die erste CSS-Datei erstellt die Layoutstruktur für kleine Laptops und Tablets im Querformat. Es hat eine maximale Breite von 1100px, wie Sie im folgenden Link-Tag sehen:

Einfügen der obigen Codezeile in das Kopf Tag Ihrer HTML-Datei (oder in diesem Fall der Portfolio-Website-Datei) stellt sicher, dass jedes Gerät mit einer Bildschirmbreite von 1100px und darunter wird das Styling in der widescreen.css Datei.

Die widescreen.css-Datei

/* Heim */
#navbar .container h1 eine Spanne{
Anzeige: keine;
}
#home .home-content .text-3 span{
Farbe: #000000;
}
/* Portfolio */
.Projekte{
rechtfertigen-Inhalt: Mitte;
}
.Projekt{
Biegung: 0;
}
/* Etwa */
.über-Inhalt{
Flex-Richtung: Säule;
}
/* Kontakt */
.kontakt-inhalt{
Flex-Richtung: Säule;
}

Der obige Code erzeugt ein ansprechendes Layout auf Geräten mit Bildschirmgrößen von 1100px und darunter, wie Sie in der folgenden Ausgabe sehen können:

Die zweite CSS-Datei erstellt die Layoutstruktur für Smartphones und Tablets im Hochformat. Es hat eine maximale Breite von 760 Pixel, wie Sie im folgenden Link-Tag sehen können:

Die mobile.css-Datei

/* Navigationsleiste */
#navbar .container h1 eine Spanne{
Anzeige: keine;
}
#navbar .container .menu{
Rand-links: 0rem;
}
#schinken-menü{
Breite: 35px;
Höhe: 30px;
Rand: 30px 0 20px 20px;
Cursor: Zeiger;
}
#navbar .container .menu-wrap .menu{
Anzeige: keine;
}
.Bar{
Höhe: 5px;
Breite: 100 %;
Hintergrundfarbe: #ffffff;
Bildschirmsperre;
Randradius: 5px;
Übergang: 0,3s Leichtigkeit;
}
#bar1{
transformieren: translateY(-4px);
}
#bar3{
transformieren: translateY(4px);
}
/* Heim */
#Heimat{
Anzeige: flexibel;
Hintergrund: url("/images/home.jpg") No-Repeat Center;
Höhe: 100vh;
}
#home .container{
Rand: 6rem 1rem 2rem 1rem;
Polsterung: 2rem;
}
#home .home-content .text-1{
Schriftgröße: 20px;
Rand: 1,2rem;
}
#home .home-content .text-2{
Schriftgröße: 45px;
Schriftstärke: 500;
Rand: 1rem;
}
#home .home-content .text-3{
Schriftgröße: 22px;
Rand: 1,2rem;
}
#home .home-content .text-3 span{
Farbe: #0000ff;
Schriftstärke: 600;
}
#home .container{
Rand links: 4.5rem;
}
/* Etwa */
#über .container{
Polsterung: 0;
}
/* Kontakt */
#kontakt .container{
Polsterung: 0;
}

Die obige Datei erzeugt das folgende responsive Smartphone-Layout:

Andere Möglichkeiten zur Erstellung responsiver interaktiver Websites

Zu wissen, wie Sie Ihre Website mit CSS und HTML reaktionsschnell und interaktiv gestalten, ist eine großartige Fähigkeit. Dies sind jedoch nicht die einzigen Methoden, um Ihre Website responsive und interaktiv zu gestalten.

Viele Frontend-Frameworks und sogar Vorlagen für Dienste wie Joomla ermöglichen responsive interaktive Designs.

15 stilvolle Joomla-Vorlagen für responsive Websites

Sie möchten eine Website für Ihr Unternehmen oder Ihren Blog erstellen? Probieren Sie diese Joomla-Vorlagen aus.

Weiter lesen

Über den Autor