Tristran-code by @fabiana - Codewith.it

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

References

<h2>Titolo di intestazione di secondo livello
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
<object>Incorpora risorse varie nella pagina web.
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<tbody>Definisce il contenuto principale di una tabella.
sizeDetermina le dimensioni dell'elemento in base al valore contenuto

Users

Log in to search for users

Explore

Find inspiration

Esempio Gestione del testo

test js coinmarketcap

Esercitazione 1

Piano Distruzione pianeta terra

Ximena\'s hamburger

Generador de Internos

La Ghigliottina | Matteo Greco &

Quiz ristrutturazione

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>