Share
CodePen is een tool van onschatbare waarde - het helpt ons dingen uit te leggen en maakt onze front-end code-tutorials des te boeiender. Als we dat weten, laten we eens een kijkje nemen bij een aantal pennen van Tuts + tutorials en cursussen die echt een snaar zijn geraakt bij onze community.!
Deze tutorial van George Martsoukos neemt een ongeordende lijst, waarbij de items worden weergegeven als een (responsieve) verticale tijdlijn. George gaat vervolgens na of de items in het kijkvenster zijn gekomen bij het scrollen, en animeert ze zodra ze het geval zijn.
Met meer dan 21.000 views en 500 likes is deze pen een van de populairste die we hebben gepost!
Donovan uit Dublin wist precies wat u allemaal wilde toen hij deze schreef. Volg deze zelfstudie voor beginners om niet alleen te leren over de praktische aspecten van het coderen van CSS-animaties, maar ook over het ongrijpbare ontwerp van 'aantrekkingskracht' dat daarmee gepaard gaat.
Deze cursus is enorm populair. Volg Kezz Bracey terwijl ze tien verschillende CSS3-projecten bouwt, allemaal op CodePen, en allemaal gericht op UI en lay-out. Dit is een dergelijk project, waarin ze laat zien hoe je een functionele, geanimeerde tabblad-UI kunt bouwen, zonder een beetje JavaScript:
De vervolgtraining van Kezz was geïnspireerd op 'Branding en presentatie' en demonstreerde opnieuw hoe je 10 CSS3-projecten bouwt vanuit de vertrouwde omgeving van CodePen. Deze specifieke demo is een "PowerPoint" -achtige presentatie, wederom zonder enige JavaScript.
Er werd met veel enthousiasme uitgekeken naar deze tutorial door velen van jullie, die graag de lesmateriaal van Google in de webbrowser wilden overbrengen. Hier is slechts een van de pennen uit de zelfstudie, maar er zijn er een paar duizenden bekeken. Wegklikken!
Ik hou van deze. Maar dan zou ik, als vaandeldrager van het Tuts + Translation Project, toch niet? In ieder geval, als je nog nooit hebt nagedacht over wat unicode-bidi: embed; zal doen voor uw RTL-webpagina's, misschien is het tijd dat u deze populaire pen hebt uitgecheckt!
Dennis heeft het uitstekend gedaan! Probeer gewoon door te gaan met scrollen ... Als je meer wilt weten over ScrollMagic is dit een echt toegankelijke tutorial om je op weg te helpen. Neem een kop koffie en duik erin.
Veel van de cursussen van Craig Campbell gebruiken CodePen als een manier om projecten op te zetten en tot voltooiing te brengen. In deze cursus toont hij een aantal manieren om het Animation Platform (GSAP) van GreenSock te gebruiken, inclusief deze populaire mesmerische preloader:
Nog een Craig-cursus hier, en een van de meest bekeken cursussen van de afgelopen maanden. Het leert precies wat je zou verwachten, dus als je je handen nog met flexbox moet bevuilen, zullen deze projecten (zoals dit responsieve beeldraster) je op gang helpen brengen!
Wat is er nog te zeggen? Geniet van de bovenstaande pennen, bekijk de tutorials en cursussen waarvan ze zijn genomen en zorg ervoor dat je Envato Tuts + volgt op CodePen!
Accentsconagua