Tristran-code by @fabiana - Codewith.it

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

References

<b>Formatta il testo in grassetto
<canvas>Tag per disegnare grafica dinamica su pagine web.
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio

Users

Log in to search for users

Explore

Find inspiration

Promo Weber 2025

landing il colibri\\

"esercitazione5.html”

programma di x,y,z

alt from filename 2

Neon Flux - Visual Design in Motio

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>