Publicidad

Introducción:

Hola chicos, hoy veremos la animación de «Homer Simpson» y su «donut».

Antes tengo que aclarar que «Homer Simpson» no esta hecho en CSS, en realidad es una imagen svg; pero la «donut» si fue creada con CSS puro.

Nota: Ahora que uso Grid en CSS la alineación de los elementos es más sencilla.

Pueden ver la animación dando click aquí y luego quizás comentarme si realmente quedo responsive por ejemplo.

1. Estructura en html

Bueno empecemos por la estructura o esqueleto de lo que vamos a construir.

  • Creamos los contenedores para que todo este alineado.
  • Luego dividimos el «donut» en tres partes:
    1. Masa de donut 
    2. Glaseado de azúcar rosa glazed
      1. Circulo interno circle
    3. Dulces de adorno sprinkles
  • Mientras que «Homer Simpson» no tiene mucha complejidad un contenedor la imagen svg y listo.

Publicidad
<!DOCTYPE html>
<html>
<head>
<title>Donut</title>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Courgette&display=swap" rel="stylesheet">
<link rel="icon" type="image/svg" href="style/Donut.svg">
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h1>Homer Simpson</h1>
<div class="contain-dunut-homer">
<div class= "container-of-container">
<div class="container-donut">
<div class="container-sprinkles position-grid">
<div class="sprinkle sprinkles01"></div>
<div class="sprinkle sprinkles02"></div>
<div class="sprinkle sprinkles03"></div>
<div class="sprinkle sprinkles04"></div>
<div class="sprinkle sprinkles05"></div>
<div class="sprinkle sprinkles06"></div>
<div class="sprinkle sprinkles07"></div>
<div class="sprinkle sprinkles08"></div>
<div class="sprinkle sprinkles09"></div>
<div class="sprinkle sprinkles10"></div>
<div class="sprinkle sprinkles11"></div>
<div class="sprinkle sprinkles12"></div>
<div class="sprinkle sprinkles13"></div>
<div class="sprinkle sprinkles14"></div>
<div class="sprinkle sprinkles15"></div>
<div class="sprinkle sprinkles16"></div>
<div class="sprinkle sprinkles17"></div>
<div class="sprinkle sprinkles18"></div>
<div class="sprinkle sprinkles19"></div>
<div class="sprinkle sprinkles20"></div>
<div class="sprinkle sprinkles21"></div>
<div class="sprinkle sprinkles22"></div>
<div class="sprinkle sprinkles23"></div>
<div class="sprinkle sprinkles24"></div>
<div class="sprinkle sprinkles25"></div>
<div class="sprinkle sprinkles26"></div>
<div class="sprinkle sprinkles27"></div>
<div class="sprinkle sprinkles28"></div>
<div class="sprinkle sprinkles29"></div>
<div class="sprinkle sprinkles30"></div>
<div class="sprinkle sprinkles31"></div>
<div class="sprinkle sprinkles32"></div>
<div class="sprinkle sprinkles33"></div>
<div class="sprinkle sprinkles34"></div>
<div class="sprinkle sprinkles35"></div>
<div class="sprinkle sprinkles36"></div>
<div class="sprinkle sprinkles37"></div>
<div class="sprinkle sprinkles38"></div>
<div class="sprinkle sprinkles39"></div>
<div class="sprinkle sprinkles40"></div>
<div class="sprinkle sprinkles41"></div>
<div class="sprinkle sprinkles42"></div>
</div>
<div class="donut position-grid">
</div>
<div class="glazed position-grid">
<div class="circle"></div>
</div>
</div>
</div>
<div class="homer">
<img src="style/Homer.svg" alt="Homer">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

2. Sprinkles generados con JavasCript

En lugar de crear cada sprinkles darle color y ángulo a mano.

let text="";
let n;
let color="";
colors= ["--Red", "--Blue", "--White", "--Yellow", "--Green", "--Lila", "--Turquoise", "--Orange","--Lila2", "--Green2", "--Pink", "--White", "--LightBlue"];
const elements = document.querySelectorAll("div.sprinkle")
// En lugar de for uso forEach
elements.forEach(element => {
n = Math.floor(Math.random()*361);
text= n.toString();
//console.log(text);
element.style.transform="rotate("+text+"deg)"
color = colors[Math.floor(Math.random()*13)];
//console.log(color);
element.style.background="var("+color+")";
})

3. Dona y Homero del lado CSS

Aquí puede ahorrarme lineas de código dándole a cada sprinkles una  posición con Javascript; pero fui tonta y perezosa y no lo hice.

:root {
    --DarkGray: #4c4c4c;
    --Pink:#ff38a8;
    --Pink2:#ffa4dc;
    --Blue:#3867f4;
    --White:white;
    --Yellow:#ffd61c;
    --Green:#6be848;
    --Lila:#8924c1;
    --Red:#f00;
    --Turquoise:#58f9f3;
    --Orange:#f76a04;
    --Lila2:#c600cc;
    --Green2:#3d9d35;
    --Orange2:#F9A154;
    --LightBlue:#04adff99;
    --Black:#221c21;;

}
body {
    background: var(--DarkGray);
    margin: 0px;
    animation: background-animation linear 5s infinite;
}

h1 {
    color: var(--White);
    font-family: 'Archivo Black', sans-serif;
    font-family: 'Courgette', cursive;
    margin: 0px;
}

@keyframes background-animation {
    100%   {
        background: var(--Black);
    }
    /* 100% { */
    /*     background: var(--DarkGray); */
    /* } */
}

.container {
    display: grid;
    height: 100vh;
    width: 100vw;
    justify-items: center;
    align-items: center;
}

.contain-dunut-homer {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    justify-items: center;
    /* height: 70vh; */
}

.homer {
    display: grid;
    /* background: white; */
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    animation: Homer-animation linear 5s infinite;
}

@keyframes Homer-animation {
    0%   {
        transform: scale(0.1);
    }

    100%{
        transform: scale(1);
    }
}

.position-grid{
    grid-row: 1;
    grid-column: 1;
}

.container-sprinkles{
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    display: grid;
    /* align-items: center; */
    justify-items: center;
    height: 25vw;
    width: 25vw;
}

.container-of-container{
    display: grid;

    /*background: yellow;*/
    justify-items: center;
    align-items: center;
    /* align-self: end; */
}

.container-donut{
    display: grid;
    /*background: yellow;*/
    justify-items: center;
    align-items: center;
    height: 28vw;
    width: 28vw;
    align-self: end;
    animation: Donut-animation linear 5s infinite;
}

.donut{
    display: grid;
    background:var(--Orange2);
    /* clip-path: circle(50% at 50% 50%); */
    height: 27vw;
    width: 27vw;
    /* border: 2px solid black; */
    border-radius: 50%;
}

@keyframes Donut-animation {
    0%   {
        transform: rotate(0deg) scale(0.1);
    }

    100%{
        transform: rotate(180deg) scale(1);
    }
}

.circle{
    display: grid;
    background:var(--DarkGray);
    height:9vw;
    width: 9vw;
    grid-row: 2;
    grid-column: 2;
    border-radius: 100%;
    animation: background-animation linear 5s infinite;
}

.glazed{
    display: grid;
    /* margin: 15px 0px 0px 0px; */
    border-radius: 50%;
    z-index: 0;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    background: var(--Pink2);
    height: 22vw;
    width: 22vw;

}

.sprinkle{
    height: 8px;
    width: 18px;
    background: var(--turquoise);
    border-radius: 50px;
    z-index: 1;
}
.sprinkles01{
    grid-row: 2;
    grid-column: 5;
}

.sprinkles02{
    grid-row: 2;
    grid-column: 6;
}

.sprinkles03{
    grid-row: 3;
    grid-column: 3;
}

.sprinkles04{
    grid-row: 3;
    grid-column: 4;
}

.sprinkles05{
    grid-row: 3;
    grid-column: 5;
}

.sprinkles06{
    grid-row: 3;
    grid-column: 6;
}

.sprinkles07{
    grid-row: 3;
    grid-column: 7;
}

.sprinkles08{
    grid-row: 3;
    grid-column: 8;
}

.sprinkles09{
    grid-row: 4;
    grid-column: 2;
}

.sprinkles10{
    grid-row: 4;
    grid-column: 3;
}

.sprinkles11{
    grid-row: 4;
    grid-column: 4;
}

.sprinkles12{
    grid-row:4;
    grid-column:9;
}

.sprinkles13{
    grid-row: 4;
    grid-column: 8;
}

.sprinkles14{
    grid-row: 4;
    grid-column: 7;

}

.sprinkles15{
    grid-row: 5;
    grid-column: 2;
}

.sprinkles16{
    grid-row: 5;
    grid-column: 3;
}

.sprinkles17{
    grid-row: 5;
    grid-column: 8;
}

.sprinkles18{
    grid-row: 5;
    grid-column: 9;
}

.sprinkles19{
    grid-row: 6;
    grid-column: 2;
}

.sprinkles20{
    grid-row: 6;
    grid-column: 3;
}

.sprinkles21{
    grid-row: 6;
    grid-column: 8;
}

.sprinkles22{
    grid-row: 6;
    grid-column: 9;
}

.sprinkles23{
    grid-row: 7;
    grid-column: 2;
}

.sprinkles24{
    grid-row: 7;
    grid-column: 3;
}

.sprinkles25{
    grid-row: 7;
    grid-column: 8;

}

.sprinkles26{
    grid-row: 7;
    grid-column: 9;
}

.sprinkles27{
    grid-row: 8;
    grid-column: 2;

}

.sprinkles28{
    grid-row: 8;
    grid-column: 3;
}

.sprinkles29{
    grid-row: 8;
    grid-column: 4;
}

.sprinkles30{
    grid-row: 8;
    grid-column: 5;
}

.sprinkles31{
    grid-row: 8;
    grid-column: 6;
}

.sprinkles32{
    grid-row: 8;
    grid-column: 7;
}

.sprinkles33{
    grid-row: 8;
    grid-column: 8;
}

.sprinkles34{
    grid-row: 8;
    grid-column: 9;
}

.sprinkles35{
    grid-row: 9;
    grid-column: 3;
}

.sprinkles36{
    grid-row: 9;
    grid-column: 4;
}

.sprinkles37{
    grid-row: 9;
    grid-column: 5;
}

.sprinkles38{
    grid-row: 9;
    grid-column: 6;
}

.sprinkles39{
    grid-row: 9;
    grid-column: 7;
}

.sprinkles40{
    grid-row: 9;
    grid-column: 8;
}

.sprinkles41{
    grid-row: 10;
    grid-column: 5;
}

.sprinkles42{
    grid-row: 10;
    grid-column: 6;
}


@media (max-width: 360px) {
  img {
   width: 200px;
   height: 200px;
  }

  .sprinkle {
      height: 4px;
      width: 10px;
  }
}

Bien, esto es todo el código también pueden verlo desde github .

Extra: Hubieron detalles que no tenia pesado añadir, también escuche consejos para que esta animación quedara mejor, al final «Homer Simpson and donut» no quedo como yo lo imagine pero me hizo reconsiderar lo mucho que aun me falta por aprender.

Gracias a todas las personas del chat de twirch por sus comentarios y sugerencias y a Kj por ayudarme con el JS y aguantar mi temperamento 😅.

Posdata:

Estoy agotada y me duermo mientras escribo esto en la tarde del 25 de diciembre, si en navidad 🙃; así que gracias por leer goodbye.

Publicidad


Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments