Orologio

Tutorials of (Orologio) by Clara decortes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Orologio</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="tutto">
<h1 id="home"><a href="file:///Users/nat/Desktop/HTML.GIUSTO/pagina/index.html"> home </a></h1>  <div id="Testo">A che ora Wei </br> arriva al tempio?</div>
<div id="ferma"> STOP </div>
<div class="orologio">
    <div>
    <div class="ore"></div>
    <div class="minuti"></div>
    </div>
  <div>
    <span class="h3">3</span>
    <span class="h6">6</span>
    <span class="h9">9</span>
    <span class="h12">12</span>
  </div>
</div>
<div id="msg"></div>
<div class="section" id="s1"> <a id="scelta" href="file:///Users/nat/Desktop/HTML.GIUSTO/tardi/index.html">
  Tardi </a>
</div>
<div class="section" id="s2"> <a id="scelta" href="file:///Users/nat/Desktop/HTML.GIUSTO/molto-presto/index.html">
  Presto </a>
</div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body { width:1300px;
height:750px;
  max-width:1300px;
  max-height:750px;
background-color: #f9ebd2;
  position:absolute;
  overflow:hidden	;
} 

.orologio { top:20px;
  background: #ececec;
  width: 300px;
  height: 300px;
  margin: 8% auto 0;
  border-radius: 50%;
  border: 14px solid #333;
  position: relative;
  box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,0.8);
}

.section {
  display:none;
}

.ore {
  position: absolute;
  z-index: 5;
  width: 4px;
  height: 65px;
  background: #333;
  top: 79px;
  transform-origin: 50% 72px;
  left: 50%;
  margin-left: -2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.minuti {
  position: absolute;
  z-index: 6;
  width: 4px;
  height: 100px;
  background: #666;
  top: 46px;
  left: 50%;
  margin-left: -2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform-origin: 50% 105px;
}
span {
  display: inline-block;
  position: absolute;
  color: #333;
  font-size: 22px;
  font-family: 'Estilo';
  font-weight: 700;
  z-index: 4;
}

.h12 {
  top: 10px;
  left: 50%;
  margin-left: -11px;
}
.h3 {
  top: 140px;
  right: 10px;
}
.h6 {
  bottom: 10px;
  left: 50%;
  margin-left: -5px;
}
.h9 {
  left: 10px;
  top: 140px;
}
#ferma {position:absolute;
  top:500px;
  left:615px;
text-align:center;

   font-family: 'Estilo Pro';
float:center;
  font-size:30pt;
  color:#f9ebd2;
  animation: glow 3s ease-in-out infinite;
  filter: drop-shadow:0 0 20px ##b30000;

  
}
#msg {color:#f9ebd2;}
 
#s1 {font-family:"Estilo Pro";
font-size:20pt;
color:#b30000;}
#s2 {font-family:"Estilo Pro";
font-size:20pt;
color:#b30000;
float:right;}


@keyframes glow 
{
  50% { text-shadow: 0 0 20px #b30000;background: linear-gradient(270deg, $colorA, $colorB);
  }
}
@keyframes glow 
{
  50% { text-shadow: 0 0 20px #b30000;background: linear-gradient(270deg, $colorA, $colorB);
  }
}



h1{
  position:absolute;
  font-size:40px;
  color:#f9ebd2;
  animation: glow 3s ease-in-out infinite;
  filter: drop-shadow:0 0 20px ##b30000;
  }
#home{top:550px;
  left:635px;
  font-family:estilo pro;
  font-size:30px;
}
#scelta {color: #b30000;
animation: glow 3s ease-in-out infinite;
  filter: drop-shadow:0 0 20px ##b30000;}
a:link {
    color:#f9ebd2;
}

a:visited {
  color: #f9ebd2;}
#Testo {position:absolute;
  text-align:center;
  top:00px;
  left:400px;
  float: right;
    width: 500px;
 padding: 10px;
font-family:Estilo;
   font-size:30pt; 
color:#b30000;}





/* Downloaded from https://www.codeseek.co/ */
var x = 100;
var y= 50
var vx = 1;
var attrito = false;

function disegna() {
  $(".minuti").css({
    transform: "rotate("+ x + "deg)"
   })
   $(".ore").css({
    transform: "rotate("+ y + "deg)"
   })
  $("#msg").text(Math.floor(x%10))
}

disegna()

function muovi() {
  if(attrito) {
    vx = 0.99* vx;
  }
  y = y + vx;
   if(attrito) {
    vx = 0.99* vx;
  }
  x = x + vx;
  y=y + vx;
 
 
}

$("#ferma").click(function() {
  attrito = true;
  if((y % 360) >180 && (y % 360) < 360) {
    $("#s1").css({display: "block"})
  } else {
    $("#s2").css({display: "block"})
  }
})
setInterval(muovi, 10)
setInterval(disegna, 10)

This awesome code ( Orologio ) is write by Clara Decortes, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Clara Decortes