Modificare cod Animated musical notes

Coduri intrebari, probleme legate de HTML, XHTML si CSS
Avatar utilizator
Anghell
Mesaje:17

Modificare cod Animated musical notes

Fiindca astazi suntem in 31 decembrie 2020, va doresc un sincer La multi ani si toate cele bune in 2021. :)

Sincer sa fiu,"am imprumutat" un cod de pe CodePen. Link code - codepen.io/affurida/pen/gOMbNjK
Deocamdata n-am facut nimic concret cu acest cod. Astept raspunsul vostru.

Codul:

Cod: Selectaţi tot

<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: black;
  color: white;
}

.muzieknootjes {
  display: block;
  margin: auto;
  position: relative;
  width: 50%;
  min-width: 300px;
  height: 200px;
  border: 0px solid #000;
}

.noot-1,
.noot-2,
.noot-3,
.noot-4 {
  position: absolute;
  animation: notes 2s infinite linear;
  font-size: 35px;
  opacity: 0;
}

.noot-1 {
  top: 60px;
  left: 0;
  animation-delay: 0.5s;
}

.noot-2 {
  top: 30px;
  left: 30%;
  animation-delay: 1s;
}

.noot-3 {
  top: 90px;
  left: 60%;
  animation-delay: 1.5s;
}

.noot-4 {
  top: 40px;
  left: 90%;
  animation-delay: 2s;
}

@keyframes notes {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: scale(1.5) translate(50%, -50%);
  }
  80% {
    opacity: 0;
    transform: scale(1.5) translate(100%, -100%);
  }
  100% {
    transform: scale(1.5) translate(100%, -100%);
    opacity: 0;
  }
}
</style>

<div class="muzieknootjes">
  <div class="noot-1">
  &#9835; &#9833;
</div>
<div class="noot-2">
  &#9833;
</div>
<div class="noot-3">
  &#9839; &#9834;
</div>
<div class="noot-4">
  &#9834;
</div>
</div>
Ce vreau sa fac?
a. Vreau sa modific notele muzicale simfonice, cu cifre sau eventual cu nume de orase din Romania.
b. Eventual daca se poate, sa adaug un sunet (cred eu), de pe un alt site poate special.
c. Totusi, am impresia ca vreau mult si cunosc putin. :x

Multumesc anticipat! :)
o1 ianuarie 2020 - 31 decembrie 2020

MarPlo
Parerea mea e ca ar trebui sa studiezi mai mult HTML si CSS daca vrei sa faci ceva in acest domeniu.

Pentru sunet, cauta pe interneet "Adaugare sunet in pagina html" , si vezi ce gasesti.
Pentru modificarle notelor cu cifre sau nume, modifici datele din codul html, dintre Div-uri.
Exemplu:

Cod: Selectaţi tot

<style>
#body_notes {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
}

.muzieknootjes {
  display: block;
  margin: auto;
  position: relative;
  width: 50%;
  min-width: 300px;
  height: 200px;
  border: 0px solid #000;
}

.noot-1,
.noot-2,
.noot-3,
.noot-4 {
  position: absolute;
  animation: notes 2s infinite linear;
  font-size: 35px;
  opacity: 0;
}

.noot-1 {
  top: 60px;
  left: 0;
  animation-delay: 0.5s;
}

.noot-2 {
  top: 30px;
  left: 30%;
  animation-delay: 1s;
}

.noot-3 {
  top: 90px;
  left: 60%;
  animation-delay: 1.5s;
}

.noot-4 {
  top: 40px;
  left: 90%;
  animation-delay: 2s;
}

@keyframes notes {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: scale(1.5) translate(50%, -50%);
  }
  80% {
    opacity: 0;
    transform: scale(1.5) translate(100%, -100%);
  }
  100% {
    transform: scale(1.5) translate(100%, -100%);
    opacity: 0;
  }
}
</style>

<div id='body_notes'>
<div class='muzieknootjes'>
  <div class='noot-1'>EU</div>
<div class='noot-2'>Viata</div>
<div class='noot-3'>Visare</div>
<div class='noot-4'>Trezire</div>
</div>
</div>
Demo:
EU
Viata
Visare
Trezire

Anghell
Multumesc pentru raspuns si pentru solutia de cod.
o1 ianuarie 2020 - 31 decembrie 2020