Tristran-code by @fabiana - Codewith.it

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

References

requiredRende obbligatorio un campo di input
<a>Inserisce link e collegamenti ipertestuali
minlengthDetermina il numero minimo di caratteri per un elemento input
<h4>Titolo di intestazione di quarto livello
<caption>Definisce didascalie all'interno di una tabella
<iframe>Crea un frame all'interno di una pagina HTML.

Users

Log in to search for users

Explore

Find inspiration

Image Comparison Slider

ECOVACS GOAT A1600 LiDAR PRO

Un Giorno a Napoli: Itinerario Det

Calcolatrice Pitagora

Estrazione Casuale Studenti

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>