Share
CodePen es una herramienta invaluable: nos ayuda a explicar cosas y hace que nuestros tutoriales de código front-end sean aún más atractivos. En reconocimiento de este hecho, echemos un vistazo a algunos bolígrafos de tutoriales y cursos de Tuts + que realmente han afectado a nuestra comunidad.!
Este tutorial de George Martsoukos toma una lista desordenada, mostrando sus elementos como una línea de tiempo vertical (sensible). Luego, George continúa para verificar si los elementos han entrado en la vista en el scroll, animándolos en su lugar una vez que sea así..
Con más de 21K vistas y 500 me gusta, esta pluma es una de las más populares que hemos publicado.!
Donovan, con sede en Dublín, sabía exactamente lo que todos querían cuando escribió este. Siga este tutorial para principiantes para aprender no solo sobre los aspectos prácticos de la codificación de la animación CSS, sino también sobre la creación intangible de "apelación" que acompaña.
Este curso es muy popular. Sigue a Kezz Bracey mientras construye diez proyectos CSS3 diferentes, todos en CodePen, y todos enfocados en la interfaz de usuario y el diseño. Aquí hay uno de esos proyectos, donde ella demuestra cómo construir una interfaz de usuario funcional y animada, sin una jota de JavaScript:
El curso de seguimiento de Kezz se inspiró en “Marca y presentación”, una vez más demostrando cómo construir 10 proyectos CSS3 desde el entorno familiar de CodePen. Esta demostración en particular es una presentación similar a "PowerPoint", de nuevo sin JavaScript en absoluto.
Muchos de ustedes esperaron ansiosamente este tutorial, deseosos de transferir las enseñanzas del material de Google al navegador web. Aquí hay solo uno de los bolígrafos del tutorial, pero uno que ha visto unos cuantos miles de visitas. Clic de distancia!
Amo esto. Pero luego lo haría, como abanderado del Proyecto de Traducción Tuts +, ¿no es así? En cualquier caso, si nunca has considerado qué. unicode-bidi: incrustar; servirá para sus páginas web de RTL, tal vez sea hora de que revise este popular bolígrafo!
Dennis hizo un gran trabajo de este! Solo intente resistirse al desplazamiento ... Si está interesado en aprender sobre ScrollMagic, este es un tutorial realmente accesible para comenzar. Tomar un café y sumergirse en.
Muchos de los cursos de Craig Campbell utilizan CodePen como una forma de configurar proyectos y completarlos. En este curso, demuestra varias formas de usar la plataforma de animación de GreenSock (GSAP), incluido este popular preloader mesmérico:
Otro de los cursos de Craig aquí, y uno de nuestros cursos más vistos de los últimos meses. Enseña exactamente lo que usted esperaría, por lo que si aún no se ha ensuciado las manos con flexbox, estos proyectos (como esta cuadrícula de imágenes con capacidad de respuesta) lo pondrán en marcha!
¿Qué queda por decir? Disfruta de los bolígrafos mencionados anteriormente, revisa los tutoriales y los cursos de los que fueron tomados y asegúrate de seguir Envato Tuts + en CodePen!
Accentsconagua