DEV Community

José Antonio Fernández
José Antonio Fernández

Posted on

2 2

🏀 Animación de cards al estilo Jordan 🏀

Banner animación cards Jordan

Este diseñ fue creado usando unicamente css y html, lenguajes de programaciones sobre los cuales se fundamente la web.

Abajo te explico como utilizar este diseño en tu web o relacionados otros de tus elementos para crear una mejor experiencia de usuario.


Veamos como se ve el diseño final

Cover de diseño final cards jordan

¿Conocimiento importantes para el desarrollo?

  • CSS / Position Relative
.card {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10000;
    transition: 0.6s;
}
Enter fullscreen mode Exit fullscreen mode
  • CSS / Position Absolute
img {
    position: absolute;
    max-width: 280px;
    left: 20px;
    top: 80px;
    transform: rotate(-35deg);
    transition: 0.5s;
}

Enter fullscreen mode Exit fullscreen mode
  • CSS / Hover Selector
.contenedor:hover .card img {
    left: 20px;
    top: 40px;
    transition: 0.5s;
}
Enter fullscreen mode Exit fullscreen mode
  • CSS / ::Before and After Pseudo ELements
.contenedor:hover::before {
    width: 250px;
    height: 250px;
    right: -35px;
    top: -30px;
}
Enter fullscreen mode Exit fullscreen mode

Sí no conoces CSS te costará mil veces .

El código en Javascript que permite cambiar las zapatillas



Es bien sabido que javascript es el lenguaje por mucho mas usado en la web, pero para generar dinamismo esto puede servirte como un compoente y de esa forma te permite generar ids, enlaces dinamicos entre otras cosas para que tus compoentes sean totalmente reactivos o simplemente integrar la card a un motor de plantilla o lo que quieras hacer con ella.

  • Código en js
btnMorado.addEventListener("click", () => {
    document.getElementById("imagen").src = "img/awesome-shoes-violet.png";
});
Enter fullscreen mode Exit fullscreen mode

Qué simplemente detecta el elemento y te permite cambiar dinamicamente la imagen previamente almacenada en el repo, o generar una función para extraer estos datos desde el backend y generar ids personalizados de forma dinamica y no manual que es mi caso particular.

Este es mi correo profesional jose@joseamaya.tech, si me escribes te aseguro que tendrás una respuesta.

Atentamente,

Link al repo: Github Repo

Link a la demo: Demo



Foto de perfil

José A. Amaya

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay