Tristran-code by @fabiana - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<em>Formatta il testo in corsivo/italico enfatizzato
animationDefinisce i parametri dell'animazione di un elemento o selettore
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)

Users

Log in to search for users

Explore

Find inspiration

sito_donne_afghane

Pagina di esempio

Esercizi di Riepilogo (3)

spotify dashboard

Stuff and Things

esercizio form 2

copia dicountdownfineanno

console elements(2)

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<style type="text/css">::-webkit-scrollbar {
     background: #000000;
     width: 0px;
     cursor: s-resize;
     padding: 0;
}
  #bg-container {
    position: relative;
    display: flex;
    margin: 0 auto;
    align-items: center;
    width: 485px;
    height: 530px;
    overflow: hidden;
  }

  #vinyl {
    position: relative;
    right: -170px;
    width: 315px;
    height: 315px;
    transition: transform 1.5s ease-in-out;
  }
  
  #cover {
    position: absolute;
    width: 340px;
    height: 340px;
  }
  
  #text-container {
    position: absolute;
    opacity: 0;
    z-index: 1;
    background-color: #e9e4e2;
    width: 340px;
    height: 340px;
    padding: 2em;
    transition: opacity 2s ease-in-out 0s;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  #text-container p {
    font-family: Verdana;
    font-size: 10px;
    line-height: 14px; 
    letter-spacing: 1.25px;
  }
  
  #text-title {
    color: #494949; 
    text-align: center; 
    font-weight: bold;
  }
  
  #text {
     color: #494949; 
     text-align: justify;
  }
  
  .em {
     font-style: italic;
  }
  
  .b {
    font-weight: bold;
  }
  
  .u {
    border-bottom: 1px solid;
  }
  
  a {
    font-weight: bold;
    color: #993333;
    text-decoration: none;
  }
  
  .shadows {
     box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075),
      0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075),
      0 16px 16px hsl(0deg 0% 0% / 0.075)
    ;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
<div id="bg-container">
<div id="text-container">
<p id="text-title">Abbiamo sempre vissuto nel castello.</p>

<p id="text">Il castello di <a href="http://lazvard.altervista.org/Tristran/songstone.html"><span class="u">Son</span>g<span class="u">stone</span></a> era il suo primo amore, un&#39;infatuazione cominciata durante la sua infanzia solitaria e cresciuta come il muschio ostinato nelle crepe del cortile. Qualunque cosa il maniero esigesse, lui sapeva che gliel&#39;avrebbe data. Era stato avventato con quel luogo che affermava di amare e non poteva pi&ugrave; permettere che fosse la sua <span class="em">negligenza</span> a dettarne il futuro.</p>

<p id="text">Songstone era molte cose per lui: una gran dama che richiedeva un corteggiamento costante, un vecchio mago scontroso che rifiutava aiuto per orgoglio, e pi&ugrave; spesso una scopa con il Malocchio che, quanto pi&ugrave; Tristran cercava di domare, tanto pi&ugrave; cercava di <span class="em">disarcionarlo.</span></p>
</div>
<img id="vinyl" src="https://i.imgur.com/pFxcOpi.png" /> <img class="shadows" id="cover" src="https://i.imgur.com/6WmF9Yx.gif" /></div>

<div>
<audio id="hover-audio" src="http://lazvard.altervista.org/Passacaglia_della_vita.mp3">&nbsp;</audio>
<script>
  const vinyl = document.getElementById("vinyl");
  const textContainer = document.getElementById("text-container");
  const audio = document.getElementById("hover-audio");
  let currentRotation = 0;

  const getCurrentRotation = () => {
    const computedStyle = window.getComputedStyle(vinyl);
    const matrix = computedStyle.transform;

    if (matrix !== "none") {
      const values = matrix.split("(")[1].split(")")[0].split(",");
      const a = parseFloat(values[0]);
      const b = parseFloat(values[1]);
      const angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
      return angle < 0 ? angle + 360 : angle;
    }
    return 0;
  };
  
  const startRotate = () => {
    audio.play();
    vinyl.style.animation = "spin 2s linear infinite";
  };

  const stopRotate = () => {
    currentRotation = getCurrentRotation();
    vinyl.style.animation = "none";
    vinyl.style.transform = `rotate(${currentRotation}deg)`;
    pauseAudio();

    setTimeout(() => {
      vinyl.style.transition = "transform 2.5s ease-in-out";
      vinyl.style.transform = `rotate(0deg)`;
    }, 10);

  };
  
    const playAudio = () => {
    audio.play();
    startRotate();
  }

  const pauseAudio = () => {
    audio.pause();
    // audio.currentTime = 0; 
  }
  
  const showText = () => {
    textContainer.style.opacity = 1;
  }
  
  const hideText = () => {
    textContainer.style.opacity = 0;
  }

  vinyl.addEventListener("mouseover", startRotate);
  vinyl.addEventListener("mouseout", stopRotate);
  textContainer.addEventListener("mouseover", showText)
  textContainer.addEventListener("mouseout", hideText)

</script></div>

</div>
</div>
</div>
<div id="content-bottom"></div>

</div>
</div>
</body>
</html>