Share
CodePen ist ein unschätzbares Werkzeug - es hilft uns, Dinge zu erklären und macht unsere Front-End-Code-Tutorials noch ansprechender. Um dies zu würdigen, werfen wir einen Blick auf einige Stifte von Tuts + -Tutorials und -Kursen, die bei unserer Community einen echten Akkord gefunden haben!
Dieses Tutorial von George Martsoukos verwendet eine ungeordnete Liste und zeigt seine Elemente als (responsive) vertikale Zeitleiste an. George prüft dann, ob die Elemente beim Scrollen in das Ansichtsfenster eingetreten sind, und animiert sie an Ort und Stelle, sobald dies der Fall ist.
Mit über 21.000 Ansichten und 500 Likes ist dieser Stift einer der beliebtesten, den wir veröffentlicht haben!
Donovan aus Dublin wusste genau, was Sie alles wollten, als er diesen schrieb. Folgen Sie diesem Anfänger-Tutorial, um nicht nur etwas über die praktischen Aspekte der Codierung von CSS-Animationen zu lernen, sondern auch über die damit einhergehende immaterielle Verarbeitung von "Appeal".
Dieser Kurs ist sehr beliebt. Folgen Sie Kezz Bracey, während Sie zehn verschiedene CSS3-Projekte erstellt, die alle auf CodePen basieren und sich auf die Benutzeroberfläche und das Layout konzentrieren. Hier ist ein solches Projekt, in dem sie zeigt, wie man eine funktionale, animierte Tab-Benutzeroberfläche ohne viel JavaScript erstellt:
Kezz 'Follow-up-Kurs wurde von „Branding and Presentation“ inspiriert und zeigte einmal mehr, wie man 10 CSS3-Projekte in der vertrauten Umgebung von CodePen erstellt. Diese spezielle Demo ist eine "PowerPoint" -artige Präsentation, wiederum ohne JavaScript.
Dieses Tutorial wurde von vielen von Ihnen mit Spannung erwartet, um die Materialunterrichtsmaterialien von Google in den Webbrowser zu übertragen. Hier ist nur einer der Stifte aus dem Tutorial, aber einer, der schon einige tausend Ansichten gesehen hat. Klick das weg!
Ich liebe diesen Aber dann würde ich als Fahnenträger für das Tuts + Translation Project nicht auch? Auf jeden Fall, wenn Sie noch nie darüber nachgedacht haben Unicode-Bidi: Einbettung; reicht für Ihre RTL-Webseiten, vielleicht ist es an der Zeit, dass Sie diesen beliebten Stift auschecken!
Dennis hat einen tollen Job gemacht! Versuchen Sie es einfach und widersetzen Sie sich dem Scrollen… Wenn Sie sich für ScrollMagic interessieren, ist dies ein wirklich zugängliches Tutorial, um Ihnen den Einstieg zu erleichtern. Nimm einen Kaffee und tauche ein.
Viele von Craig Campbells Kursen verwenden CodePen, um Projekte einzurichten und bis zum Abschluss durchzuarbeiten. In diesem Kurs demonstriert er eine Reihe von Möglichkeiten, die Animationsplattform (GSAP) von GreenSock zu verwenden, einschließlich dieses beliebten hypermodischen Preloaders:
Ein weiterer von Craig's Kursen hier und einer unserer meistgesehenen Kurse der letzten Monate. Es lehrt genau, was Sie erwarten würden. Wenn Sie sich also noch mit flexbox die Hände schmutzig gemacht haben, werden Sie durch diese Projekte (wie dieses responsive Bildgitter) in Schwung kommen!
Was ist noch zu sagen? Genießen Sie die oben genannten Stifte, schauen Sie sich die Tutorials und Kurse an, aus denen sie genommen wurden, und stellen Sie sicher, dass Sie Envato Tuts + auf CodePen folgen!
Accentsconagua