de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Parallax Scrollen leicht gemacht mit StickyStack.js

Parallaxeneffekte ziehen schnell Aufmerksamkeit auf sich. Diese Effekte behalten bestimmte Hintergründe beim Scrollen auf der Seite im Blick . Sie finden Parallax Scrolling auf vielen Webseiten und WordPress Themes und sie sind ein großer Teil des modernen Webdesigns.

Sie können mit dem StickyStack.js- Plugin auch einen einzigartigen Parallax-Stil erstellen . Es baut auf jQuery auf und hält jeden Hauptseitenabschnitt beim Scrollen nach oben fest.

Dies erzeugt die Illusion einer mehrschichtigen Website, bei der jede Seite übereinander gestapelt wird. Es ist wirklich cool und ziemlich einfach, sich selbst einzurichten.

Während es ziemlich einfach einzurichten ist, erfordert es ein gewisses Verständnis der Frontend-Entwicklung.

Sie müssen zuerst einzelne Seitenbereiche innerhalb des Hauptcontainers erstellen . Auf diese Weise haben Sie alles im HTML- Code eingeschlossen, sodass Sie alles mit der StickyStack jQuery-Funktion anvisieren können.

Es enthält außerdem einige Optionen, mit denen Sie den übergeordneten Container, die Elemente, die gestapelt werden sollen, und einen möglichen Box-Schatten anpassen können, wenn Ihnen dieser Effekt gefällt.

Hier ist ein Beispielcode von der GitHub-Seite:

 $ ('. main-content-wrapper'). stickyStack ({containerElement: '.main-content-wrapper', stackingElement: 'section', boxShadow: '0 -3px 20px rgba (0, 0, 0, 0.25)' }); 

Während dies in etwa zwei Jahren nicht aktualisiert wurde, ist es immer noch ein sehr zuverlässiges Plugin. Es funktionierte in allen von mir getesteten Browsern (Chrome, Safari und Firefox) mit Unterstützung für alle Versionen von jQuery .

Plus, die minimierte Datei ist nur 2KB, was eine anständige Größe für ein Plugin ist.

Um mehr zu erfahren, besuchen Sie das Hauptrepo und sehen Sie, was StickyStack bieten kann. Ich denke, es funktioniert am besten auf einseitigen Websites oder auf Zielseiten mit großen Vollbild-Hintergründen .

Sie können auch eine Live-Demo auf CodePen ausprobieren, wenn Sie sehen möchten, wie dies auf einer Live-Site aussieht.

Die Design-Entwicklung der WM-Maskottchen

Die Design-Entwicklung der WM-Maskottchen

Maskottchen sind bei vielen Sportveranstaltungen ein alltäglicher Anblick, und wenn es um die Weltmeisterschaft geht, ist das nicht anders. Maskottchen werden verwendet, um den Geist eines bestimmten Ereignisses zu umfassen, wie Sie in der diesjährigen niedlichen Maskottchenkonzeption der Weltmeisterschaft sehen können.Wu

(Tech- und Design-Tipps)

So deaktivieren Sie die Option "Passwörter speichern" im Browser

So deaktivieren Sie die Option "Passwörter speichern" im Browser

Der eingebaute Passwort-Manager ist in den meisten Browsern extrem unsicher . Die Tatsache, dass es normalerweise das Anmeldepasswort Ihres PCs verwendet, um alle anderen Passwörter zu schützen, ist mehr als genug Grund, es zur Unterstützung von Passwortverwaltern von Drittanbietern zu verwenden.Wenn Sie Bedenken hinsichtlich der Sicherheit Ihrer Kennwörter haben, sollten Sie zu einem sicheren Kennwort-Manager wie LastPass wechseln und den integrierten Kennwort-Manager des Browsers deaktivieren .Und

(Tech- und Design-Tipps)