8 Schnipsel, die den abstoßenden Effekt im Webdesign demonstrieren

Experimente mit Leinwand sind heutzutage in aller Munde. Sie können nicht nur als Konzepte in den beliebten Playgrounds der Webentwickler angesehen werden, sondern auch als Lösungen für reale Projekte. Die Vielfalt ist zweifellos erstaunlich: Von primitiven Partikelanimationen, die auf beliebten Plugins basieren, bis hin zu einzigartigen Ideen, die eine Mischung aus modernen und bewährten Tools sind.

Heute lenken wir Ihre Aufmerksamkeit auf die abstoßende Wirkung. Obwohl es ein abstoßendes Verhalten hat, hat es sicherlich eine anziehende Natur. Indem die Benutzer ermutigt werden, mit den Details der Szenerie zu spielen, indem sie sie in verschiedene Richtungen schieben oder in einigen Fällen sogar alles wegblasen, wird dies sofort zur Hauptunterhaltung. Es macht die Benutzererfahrung angenehm und spannend.

Lassen Sie uns eine Sammlung inspirierender Demos mit Codeausschnitten erkunden, damit Sie sich selbst von dem einzigartigen Trend überzeugen können.

Abstoßende Linien

Auf den ersten Blick erinnert dieses Demo an einen Satz Gitarrensaiten. Bewegen Sie Ihren Mauszeiger darüber und Sie werden die Magie sehen. Die Linien beginnen sich zu biegen und zu verformen und bilden eine kleine Kugel.

Mit dem Optionsfeld auf der rechten Seite können Sie den Effekt steuern. Sie können den Radius des Mausbereichs festlegen, die Anzahl der Linien hinzufügen oder verringern oder den Abstand zwischen den Zeichenfolgen ändern. Beachten Sie die Physik. Es ist gut durchdacht und sorgfältig reproduziert.

Siehe Pen Repeling Lines von Daniel Velasquez

30.000 Partikel

Der abweisende Effekt sieht einfach fantastisch aus, wenn er auf Tausende von Punkten anstelle von Linien aufgetragen wird. Justin Windle beweist dies in der Praxis. Sein ikonisches und äußerst beliebtes Projekt auf CodePen verfügt über ein Panel, auf dem 30.000 winzige Partikel bequem sitzen.

Sie sind dicht aneinander gepackt, um eine dichte Oberfläche zu schaffen. Bewegen Sie den Mauszeiger darüber und Sie werden sehen, wie die Punkte von Ihnen weglaufen. Obwohl sie nicht aus dem Blickfeld verschwinden, werden sie durch die Reichweite der Maus zurückgehalten. Daher sehen Sie einen relativ großen, hohlen Kreis, an dem Punkte die Grenze bilden.

Siehe Pen 30.000 Particles von Justin Windle

Interaktive Partikel

Wenn der einfache rechteckige Rahmen Ihre Kreativität nicht beflügelt, können Sie all diese Punkte jederzeit zu Zeichen zusammenfassen, wie es Tamino Martinius in seinem Interactive Particles-Projekt getan hat.

Seine Demo enthält ein Wort, bei dem jeder Buchstabe aus Hunderten von Punkten besteht. Blasen Sie sie mit Ihrem Mauszeiger weg, um die Dinge aufzupeppen. Es gibt ein kleines Kontrollzentrum, in dem Sie die Parameter des Experiments ändern und an Ihre Vorlieben anpassen können.

Siehe das Pen Interactive Particle Logo von Tamino Martinius

Text zu Partikeln

Lassen Sie uns mit Farbe und Größe spielen, um die beiden vorherigen Konzepte mit einigen lebhaften Wendungen zu bereichern, wie es Louis Hoebregts in seinem Text-to-Particles-Projekt getan hat.

Anders als bei der Lösung von Tamino Martinius haben hier die Punkte unterschiedliche Radien sowie unterschiedliche Farben. Außerdem können Sie den Text gerne ändern, indem Sie ihn über die Eingabe setzen. Der Mauszeiger hat ein glattes und sanftes Verhalten, das die Menge zerstreut und zu einer kleinen Störung auf dem Spielplatz führt. Dies ist eine wirklich ansprechende Demo.

Siehe den Stifttext zu Partikeln von Louis Hoebregts

Bälle und Schwerkraft

Der abweisende Effekt lässt sich leicht mit anderen physikalisch basierten Lösungen kombinieren, um hervorragende Ergebnisse zu erzielen. Betrachten Sie Bälle und Schwerkraft.

Der Name des Projekts ist Programm. Die Schwerkraft sowie die abstoßende Wirkung stehen im Mittelpunkt des Konzepts und machen das Erlebnis faszinierend.

Im Gegensatz zu den vorherigen Beispielen müssen Sie hier den Kreis greifen und ihn als Instrument verwenden, um die anderen Kreise wegzuschieben. Sie können diese bunten flachen Bälle fast treffen und sie zwingen, sich zu bewegen. Außerdem müssen Sie gegen die Schwerkraft ankämpfen, was das Erlebnis noch spannender macht.

Sehen Sie sich den Kugelschreiber BALLS&GRAVITY von Marco Dell'Anna an

Attraktor

Auch dieses Projekt von Marco Dell'Anna dreht sich um die Schwerkraft. Sie können es mit Ihrem Mauszeiger steuern. Verwenden Sie es, um Partikel zu verschieben und ihre Position neu anzuordnen.

Beachten Sie, dass die Partikel, obwohl sie ihre Position ändern, immer noch danach streben, zum Kreis zurückzukehren. Hier sehen Sie also einen Mauszeiger, der die Rolle eines Magneten spielt, und gleichzeitig ein Werkzeug, um die Punkte (zumindest vorübergehend) wegzuschieben.

Siehe Pen Attractor – MatterJS von Marco Dell'Anna

aktivieren Sie

Activate ist ein herausragender Stift von Gerard Ferrandez. Ähnlich wie im vorigen Beispiel hat sich der Autor auch hier für die Schwerkraft entschieden. Diesmal kombiniert mit Fließverhalten und natürlich der abstoßenden Wirkung. Infolgedessen lockt uns das Projekt mit seinem ausgelassenen Aussehen und seiner spielerischen Natur.

Sehen Sie sich die Aktivierung des Stifts von Gerard Ferrandez an

Moar-Plasma

Der abstoßende Effekt kann auch bei Partikelanimationen sehr hilfreich sein. Sie können sie noch spannender machen. Werfen Sie einen Blick auf Moar Plasma.

Hier sehen Sie eine chaotische Animation, bei der der Mauszeiger alle Partikel verscheucht, indem er sie auf verschiedene Seiten schiebt. Sie können die Demo nicht nur genießen, sondern auch damit interagieren.

Siehe Pen Moar Plasma von John Chin-Jew

Schneepartikel

Snowy Particles ist ein weiteres hervorragendes Beispiel, bei dem die traditionelle Partikelanimation einen Schub erhält. Nat, der Autor des Stifts, hat zwei Tricks angewandt.

Erstens kann der Mauszeiger einfache Punkte in Schneeflocken verwandeln, sodass sich die Szene wirklich magisch anfühlt. Zweitens wird ein kleiner Abwehreffekt hinzugefügt, der die Schneemasse leicht zerstreut, sodass Sie markante Schneeflocken sehen können. Einfach fantastisch.

Sehen Sie sich den Pen Particles.js Snow von Nat an

Repeller

Ein weiterer Bereich, in dem der abstoßende Effekt Vorteile bringt und eine langweilige Szene leicht in eine Extravaganz verwandelt, sind Texteffekte. Wir haben bereits gesehen, wie hervorragend Wörter aus tausend Punkten aussehen. Es ist Zeit, Punkte in Linien zu verwandeln und alles mit dem abstoßenden Effekt aufzupeppen. Erwägen Repeller als Point-in-Case.

Das Projekt zeigt ein Wort, bei dem Symbole aus kurzen, dünnen Linien bestehen, die auf die Betrachter gerichtet sind. Auf diese Weise können Sie seine volumetrische Natur fast spüren. Greifen Sie Ihren Mauszeiger und ziehen Sie ihn über den Text, und Sie werden sehen, wie die Linien zu tanzen beginnen.

Ihr Verhalten ist glatt und angenehm für die Augen, obwohl sich der Text selbst etwas scharf und scharf anfühlt. Außerdem bewegen sich die Linien auch von selbst, sodass es sich anfühlt, als ob eine kleine Brise Teile der Komposition schwankt. Als Ergebnis können Sie ein wahres Meisterwerk genießen, bei dem einfacher Text die Show anführt.

Siehe Pen Repellers von Rein van der Woerd

Anziehung durch Abstoßung

Obwohl der abstoßende Effekt verwendet wird, um Details der Komposition zu verdrängen, ist es dennoch absolut magnetisch. Sie können Ihre Augen nicht davon abwenden. Es fällt durch sein spielerisches Verhalten sofort ins Auge und regt die Benutzer an, mit der Szene zu interagieren.

Nicht nur die abstoßende Wirkung kämpft um die Gunst des Publikums. Es arbeitet perfekt mit anderen Arten von Animationen und Effekten zusammen und führt zu einzigartigen, aufmerksamkeitsstarken Lösungen.