Future CSS Tip! 🔮
You can create this scrolling image pop-out effect with CSS scroll-driven animations and zero JS! 🔥
.pop {
view-timeline-name: --pop;
}
img {
animation: slide both;
animation-timeline: --pop;
animation-range: entry 100% cover 50%;
}
.skateboarder {
--x: 0;
--y: -45%;
}
@ keyframes slide {
to { translate: var(--x) var(--y); }
}
The "trick" is to layer up two image elements and keep one clipped by the container 🤙
Slide them both together and it will look like one pops out of the container 🎈 You can leverage scoped custom properties to translate by different distances too! 😎
You can use macOS's built-in image background removal tool to get the pop-out image ✨ And for added effect, you can animate the brightness on that to make it stand out ⭐️
@CodePen link below! 👇
Hoy tengo 21 , y no había aplicado a empleos antes porque aún no me sentía preparado así que opte por aprender más y entender al menos el 85% de lo aprendido 😅
Ahora mis compañeros de trabajo me preguntan que porque no aplique antes 🙃 y mi respuesta es: "por miedo al éxito" 😬
👀 Confirmo, sí se puede!! 💪🏼
A mis 17 más o menos me salí de la prepa por motivos personales pero me metí a @platzi porque no quería dejar de estudiar, hace 9 meses después de hacer una ardua búsqueda tengo mi primer empleo como Frontend 🤯
Todo lo que dicen es cierto 💚
🥳 Por fin banda, en lo personal he estado esperando este curso con ansias y creo que muchos de ustedes también. Ahora a ver qué tal está, de seguro estará super genial ya que el profe es @degranda10 💪🏻 https://t.co/pt2dKiAhVZ
Bueno ya que todos están haciendo stream pues yo también me uno 🤓, https://t.co/0lsgxBef1v
PD: Llegaremos a un punto donde ya no haya espectadores para los streamers? 🤔😂
PD2: Perdónen el color oscuro no sé que le pasa al obs