Kennt ihr Hakim El Hattab? Er erstellt einige super verrückte progressive Demos auf seinem Blog. Sein CodePen-Profil ist ebenfalls voller erstaunlicher Dinge.
Eine seiner neuesten Kreationen ist Avgrund. Es ist ein Designmuster für Dialogfelder, bei denen die Hauptseite verblasst und die Modalbox von oben (oder unten) herabfliegt. Die Hauptseite wird kleiner und verschwommener, wodurch sie weiter entfernt zu erscheinen scheint, ähnlich der Schärfentiefe in der Fotografie. Die Modalbox liegt darüber und wirkt dadurch näher und fordert klar Ihre Aufmerksamkeit. Das ist gut, denn der eigentliche Zweck von Modalboxen ist es, dass der Benutzer eine Eingabe machen muss, bevor er etwas anderes tun kann.
Es fühlt sich ziemlich magisch an, wenn man es sieht und benutzt. Man möchte fast mit der rechten Maustaste klicken und sehen, ob es Flash ist. Aber das ist es nicht, und wie bei vielen Dingen im Web, wenn man anfängt zu graben, ist die Magie nur eine schöne Kombination einfacher Effekte.
Schauen wir sie der Reihe nach an. Hinweis: Dies ist nicht genau so, wie Avgrund funktioniert, sondern ich habe es nur nachgebaut.
Schritt 1) Separate Seiten-Markup und Modal-Markup
Der gesamte Inhalt der gesamten Seite sollte innerhalb eines Wrapper-Divs enthalten sein. Das Modal befindet sich außerhalb dieses Wrappers.
<body>
<div id="page-wrap">
<!-- all page content -->
</div>
<div id="modal">
<!-- modal box content -->
</div>
</body>Wie dieses Markup dorthin gelangt, bleibt Ihnen überlassen. Wenn ich das wirklich verwenden würde, würde ich es wahrscheinlich dynamisch einfügen, wenn es benötigt wird, über ein JavaScript-Ding, das ich speziell für die Verwaltung von Dialogen erstelle.
Schritt 2) Zustandsbasierte CSS
Keine Notwendigkeit, mit JavaScript zu ausgefallen zu werden. Wenn wir an "zustandsbasiert" denken, brauchen wir nur einen Klassennamen im body-Element, und wir können das gesamte visuelle Design mit dieser Klasse nach Bedarf anpassen. Dies ist ein größeres Konzept, das auf große Weise nützlich ist und weitere Diskussionen verdient (wie/wo/warum Zustände ausgelöst werden), aber halten wir es hier einfach mit etwas jQuery
// Something happens
$("button").on("click", function() {
// State changes
$("body").toggleClass("dialogIsOpen");
});Schritt 3) Standardzustand für Modal
Das Modal wird eine fest positionierte Box genau in der Mitte des Bildschirms sein. Standardmäßig wird es verborgen (Null Deckkraft) und nicht anklickbar sein (pointer-events). Ignorieren wir einfach die Browserunterstützung dafür. Wenn es für Sie ein großes Problem ist, können Sie es auf verschiedene andere Arten ausblenden, z. B. indem Sie es außerhalb des Bildschirms positionieren.
#modal {
background: white;
position: fixed;
width: 50%;
top: 50%;
left: 50%;
margin: -25% 0 0 -25%;
/* Embiggen */
transform: scale(1.5); /* prefix me */
/* Hidden */
opacity: 0;
pointer-events: none;
}Schritt 4) Aktiver Modal-Zustand (Die Magie!)
Jetzt haben wir alles, was wir brauchen, um die Seite beim Öffnen des Modals "zurückweichen" zu lassen. Zielen wir auf #page-wrap, wenn der Zustand aktiv ist, und machen wir die Magie.
Die Magie ist einfach: Transformiere und skaliere #page-wrap, um es kleiner zu machen, und filtere #page-wrap, um es verschwommen und weniger farbig zu machen.
.dialogIsOpen #page-wrap {
/* Blur and de-color */
-webkit-filter: blur(5px) grayscale(50%);
/* Recede */
-webkit-transform: scale(0.9);
}Nur WebKit? Nun… die Filter sind vorerst nur in WebKit. Es liegt an Ihnen, ob Sie die Vendor-Präfixe laden möchten oder nicht. Wenn ich dies für eine echte Website verwenden würde, würde ich etwas Zeit darauf verwenden, sicherzustellen, dass dieser Effekt einen Fallback hat, was nicht zu schwer sein sollte. Vielleicht würde eine nachdrückliche box-shadow ausreichen.
Dann: Lassen Sie den Dialog von oben erscheinen und erzwingen Sie den Schärfentiefe-Effekt. Die Deckkraft lässt ihn erscheinen; die Skalierung lässt ihn von oben erscheinen.
.dialogIsOpen #modal {
/* Regular size and visible */
transform: scale(1); /* prefix me */
opacity: 1;
/* Clickable */
pointer-events: auto;
}Schritt 5) Übergänge
Um es natürlich und magisch wirken zu lassen, fügen Sie ein paar Übergänge für beide beteiligten Elemente hinzu.
#page-wrap, #modal {
transition: all 0.4s ease; /* prefix me */
}Natürlich machen Sass/Compass all dies viel einfacher, da es @mixins für all diese Dinge gibt. Z.B.
@include transition(all 0.4s ease);
@include filter(blur(5px) grayscale(50%));
@include transform(scale(0.9));Warnung: Diese Dinge sind ziemlich speicher-/prozessintensiv. Manchmal helfen kleine Hacks wie das Auslösen von 3D-Transformationen in WebKit, auf Kosten von schlecht aussehendem Text.
body {
/* Use at your own discretion */
-webkit-transform: translateZ(0);
}Zusammenfassung
Ein Video, wenn Sie keinen Zugang zu einem unterstützten Browser haben oder was auch immer
Ich habe meine nachgebaute Demo aus diesem Artikel auf CodePen gestellt, aber Sie sollten sich wirklich nur Hakims Demo ansehen, die auch auf CodePen ist.
Verdammt coole Sachen!
Ich mag die Arbeit von Hakim El Hattab sehr – ich habe sie auf CodePen entdeckt. Ich habe meine persönliche Website mit einem anderen seiner Projekte, Meny, neu gestaltet.
Blur & Grayscale sind browserübergreifend mit einfachem SVG-Filter für Firefox und proprietärem Filter für IE (sogar IE6, und zur Erinnerung mit einer älteren Syntax konnte man IE4 !! bekommen).
Fehlende Übergänge für IE, aber hey! Ein kleines Stück jQuery sollte den Trick machen.
Schade um die Performance-Sache, es wäre schön, sie nutzen zu können !!
Toller Tipp, danke fürs Teilen!
Fantastisch!
Es scheint, dass der Code nicht funktioniert! Können Sie mir den gesamten Code zeigen, den Sie im Video verwendet haben?
Wie ist die Leistung auf Netbooks/Tablets? Es gibt eine spürbare Verzögerung/Ruckeln der Animation auf meinem 1,6-GHz-Core-2-Duo-Laptop.
Ich habe es auf einem neuen i7 Laptop ausprobiert, die Animation ist auf diesem und auch auf einem Nexus4 Android mit 4 Kernen laggy.
Sehr cool! Die Räder drehen sich. Könnte ich das irgendwie für meine Künstler-Website nutzen!
Dies ist eine wirklich coole Interaktion. Ich liebe es, wie es einen irgendwie anzieht und man gezwungen ist, sich auf das Modal zu konzentrieren. Könnte gut für "Sie müssen angemeldet sein, um das zu tun"-Nachrichten sein.
Hakim regiert! Ich habe auf einem WebGL-Blog auf einen Link geklickt, wo er Tipps gab, und bin auf seinem Blog gelandet. Ich habe ihn den ganzen Sonntag gelesen. Hakim ist der König des immersiven Front-End-Erlebnisses.
Liebe den Effekt. Er ist auf meinem alten Computer etwas laggy (Dual-Core-Prozessor sei Dank)
Werde vielleicht in einigen zukünftigen Projekten damit herumspielen.
Großartige Arbeit, vielen Dank fürs Teilen!
Ein wirklich erstaunlicher Effekt. Wenn doch nur die Systemleistung mit dem User Agent übertragen werden könnte, so wie Bildschirmauflösungen (Anzahl der CPU-Kerne), könnte diese Art von Effekt leicht basierend darauf degradiert oder verbessert werden.
Ich habe jedoch bemerkt, dass der Effekt zwar mit einigen Rucklern auf meinem iPhone 4 mit iOS 6 (was durch Entfernen des Blur-Filters behoben werden könnte) funktioniert, mein iPhone 5 diesen Effekt jedoch ohne Probleme auf nahezu nativem Niveau rendert.
Ups, mein Fehler. Ich bin es so gewohnt, Bildschirmauflösungsinformationen in Google Analytics anzusehen, dass ich vergesse, dass sie nicht tatsächlich Teil des User Agents sind, sondern Teil des JavaScript-Tracking-/Accounting-Codes von GA.
Hakim hat ein erstaunliches Portfolio mit Experimenten wie dem auf diesem Blog vorgestellten, aber auch anderen wie Fokus oder Meny (einer meiner Favoriten).
Tolle Inspiration.
Ich wäre vorsichtig mit dem Umschalten der body-Klasse. Test
Interessanter jsperf-Test. Aber ich verstehe nicht, warum IE überhaupt keine Ergebnisse für die body-Klasse hat. Was ist da los?
IE hat zwar Ergebnisse für body class, aber die Zahlen sind: 100/Sek. vs. Millionen/Sek. (andere Browser).
Ich liebe Hakims Arbeit! Danke fürs Teilen
Hallo Herr Coyier
Ich lerne neue Techniken aus Ihren Artikeln.
Ihre Artikel sind wunderbar!
Vielen Dank.
Modal-Interfaces sollten selbst bei ästhetisch ansprechenden Varianten vermieden werden.
Wow, nett – danke!
Sehr schöne Arbeit.
Ist es möglich, dass ein Button 3 Modal-Overlays auslöst?
Danke!
Andrea
funktioniert nur in Chrome allein :(
Ich versuche, ein Mitarbeiterverzeichnis mit Bildern zu erstellen, auf die man klicken kann und die ein Modal erzeugen.
Dialogfeld, das interaktiv ist (d. h. Kontaktinformationen für die angeklickte Person).
Dies scheint mir einen Hinweis darauf zu geben, wie ich dorthin gelangen kann, aber ich möchte nicht riskieren, etwas zu bauen, das nicht gebaut werden sollte, oder etwas wiederaufzubauen, das leicht durch die Verwendung eines vorhandenen WordPress-Plugins erledigt werden kann. Jedes Feedback ist willkommen.