Tristran-code by @fabiana - Codewith.it

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

Referenze

<embed>Tag per l'incorporamento di contenuti multimediali
<ol>Crea liste ordinate o numerate.
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<p>Serve a definire paragrafi di testo
_selfApre collegamenti ipertestuali nella stessa pagina del browser
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Research Profiles

Lola Harrel Project 2

Costruzione di tabella con html5

JS Istruzioni condizionali es3

99 Bottles of Beer

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<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>