Share
CodePen è uno strumento inestimabile: ci aiuta a spiegare le cose e rende i nostri tutorial sul codice front-end ancora più accattivanti. In riconoscimento di questo fatto, diamo un'occhiata ad alcune penne di Tuts + tutorial e corsi che hanno davvero colpito la nostra comunità!
Questo tutorial di George Martsoukos prende una lista non ordinata, mostrando i suoi elementi come una timeline (reattiva) verticale. George continua quindi a verificare se gli elementi sono entrati nella finestra sullo scroll, animandoli in posizione una volta che questo è il caso.
Con oltre 21.000 visualizzazioni e 500 mi piace, questa penna è una delle più popolari che abbiamo pubblicato!
Donovan, con sede a Dublino, sapeva esattamente cosa volevi quando ha scritto questo. Segui questo tutorial per principianti per imparare non solo gli aspetti pratici della codifica dell'animazione CSS, ma anche l'intangibile creazione di un "appeal" che va di pari passo con esso.
Questo corso è estremamente popolare. Segui Kezz Bracey mentre crea dieci diversi progetti CSS3, tutti su CodePen e tutti concentrati su interfaccia utente e layout. Ecco uno di questi progetti, in cui dimostra come costruire un'interfaccia utente di scheda animata e funzionale, senza jot di JavaScript:
Il corso di follow-up di Kezz si è ispirato a "Branding and Presentation", dimostrando ancora una volta come creare 10 progetti CSS3 all'interno dell'ambiente familiare di CodePen. Questa particolare demo è una presentazione simile a "PowerPoint", sempre senza JavaScript.
Questo tutorial è stato atteso con impazienza da molti di voi, desiderosi di trasferire gli insegnamenti sui materiali di Google al browser web. Ecco una delle penne del tutorial, ma una che ha visto alcune migliaia di visualizzazioni. Fai clic di distanza!
Io amo questo. Ma poi, come portabandiera del progetto Tuts + Translation, non lo farei? In ogni caso, se non hai mai considerato cosa unicode-bidi: embed; farà per le tue pagine web RTL, forse è ora che tu abbia estratto questa penna popolare!
Dennis ha fatto un ottimo lavoro con questo! Prova a resistere allo scrolling ... Se sei interessato a conoscere ScrollMagic, questo è un tutorial davvero accessibile per iniziare. Prendi un caffè e tuffati.
Molti dei corsi di Craig Campbell utilizzano CodePen come un modo per impostare progetti e vederli fino alla conclusione. In questo corso dimostra una serie di modi per utilizzare la piattaforma di animazione di GreenSock (GSAP), tra cui questo popolare preloader mesmerico:
Un altro dei corsi di Craig qui, e uno dei nostri corsi più visti degli ultimi mesi. Ti insegna esattamente cosa ti aspetti, quindi se non hai ancora sporcato le mani con Flexbox questi progetti (come questa griglia di immagini reattiva) ti faranno andare avanti!
Cosa resta da dire? Goditi le penne sopra menzionate, dai un'occhiata ai tutorial e ai corsi da cui sono state prese, e assicurati di seguire Envato Tuts + su CodePen!
Accentsconagua