Share your visual effects

MVakili · May 6

If you like, share your visual effects in this thread
This will cause that
1- Newbies should be encouraged
2- Professionals can check the problems of your work

MVakili · May 6

1- put (or create at runtime) a htmlframe and insert this code to make a simple analog clock

image.png.267055bb1e8b8c395cc131b2069ef229.png


<!DOCTYPE html> 


    <style>
 html {
  
  text-align: center;
  font-size: 10px;
}

body {
  margin: 0;
height:100%

}

.clock {
  width: 30rem;
  height: 30rem;
  border:  #282828;
  
  border-radius: 50%;
  margin: 50px auto;
  position: Center;
  
 
}

.outer-clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  
  
 
  overflow: hidden;
}



.inner-clock-face::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 16px;
  border-radius: 18px;
  margin-left: -9px;
  margin-top: -6px;
  background: #D5A502;
  z-index: 11;
  
}

.hand {
  width: 50%;
  right: 50%;
  height: 6px;
  background: #D5A502;
  position: absolute;
  top: 50%;
  
  transform-origin: 100%;
  
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.hand.hour-hand {
  width: 20%;
  z-index: 3;
}

.hand.min-hand {
  height: 3px;
  z-index: 10;
  width: 35%;
}

.hand.second-hand {
  background: #D5A502;
  width: 45%;
  height: 1px;

}
    </style>
</head>
<body>
    <div class="clock">
        <div class="outer-clock-face">
          <div class="marking marking-one"></div>
          <div class="marking marking-two"></div>
          <div class="marking marking-three"></div>
          <div class="marking marking-four"></div>
          <div class="inner-clock-face">
            <div class="hand hour-hand"></div>
            <div class="hand min-hand"></div>
            <div class="hand second-hand"></div>
          </div>
        </div>
      </div>
  <script>
 
 const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

  const hour = now.getHours();
  const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(setDate, 1000);

setDate();
  </script>

</body>
</html>

MVakili · May 6

1- put (or create at runtime) a htmlframe and insert this code to make a matrix text

image.png.dec8e331bb5b2814a14df5aeb351a7a2.png

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
</head>
<body>
<canvas id=q>

<script language="javascript">

const s = window.screen;
const w = (q.width = s.width);
const h = (q.height = s.height);
const ctx = q.getContext("2d");

const p = Array(Math.floor(w / 10) + 1).fill(0);

const random = (items) => items[Math.floor(Math.random() * items.length)];

const hex = "تحلیلگر      سپاهان      مدیران".split("    ");

setInterval(() => {
  ctx.fillStyle = "rgba(0,0,0,.05)";
  ctx.fillRect(0, 0, w, h);
  ctx.fillStyle = "#8BF";
  p.map((v, i) => {
    ctx.fillText(random(hex), i * 50, v);
    p[i] = v >= h || v > 200 + 10000 * Math.random() ? 0 : v + 10;
  });
}, 2000 / 30);
</script>

</body>
</html>

Sign In

Share your visual effects

Recommended Posts

MVakili

Link to comment

Share on other sites

MVakili

Link to comment

Share on other sites

MVakili

Link to comment

Share on other sites

Join the conversation

Browse

Activity