Jump to content

MVakili

Recommended Posts

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

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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>

 

  • Like 1
Link to comment
Share on other sites

  • MVakili changed the title to Share your visual effects
  • 1 month later...

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

image.png.b895ec01da2749e8871c8b592f1e593b.png

 

<!DOCTYPE html> 
<html lang="en">
  
<head>
    <style>


body {
	background-color: #0000ffff ;
	text-align: center;
	color: #0000ffff ;
	font-family: 'Poppins', sans-serif;
	overflow: hidden;
}

canvas {
	
	width: 100%;
	Height: 100%;
	margin: 0px auto;
	display: block;
}

a {
	color: #0000ffff ;
	transition: linear 0.3s;
}

a:hover {
	opacity: 0.8;
}

    </style>
</head>
<body>
<canvas id="canvas"></canvas><br>
		


<script>
const ctx = canvas.getContext('2d');


const threePIByTwo = (3 * Math.PI) / 2;

console.log(threePIByTwo);

let amOrPm = 'AM';

const canvasBg = '#0000ffff';

// Define colors for hour, minute and second hand
const hourActiveColor = '#FFF0BE',
	minuteActiveColor = '#FFD340',
	secondActiveColor = '#FFE48A';

// Define inactive colors for hour, minute and second hand
const hourInactiveColor = '#0000ffff ',
	minuteInactiveColor = '#0000ffff ',
	secondInactiveColor = '#0000ffff ';

const timerBg = '#0000ffff ';

function init()
{
	canvas.width = document.documentElement.clientWidth - 35;
	canvas.height = document.documentElement.clientHeight - 45;

	// This calls the draw function repeatedly at a rate of 60 times per second
	window.requestAnimationFrame(draw);	
}

function draw()
{
	// Finding center point of canvas
	const centerX = canvas.width / 2,
		centerY = canvas.height / 2;

	const date = new Date();

	let hr = date.getHours();
	let min = date.getMinutes();
	let sec = date.getSeconds();
	let ms = date.getMilliseconds();

	if(hr > 12)
	{
		amOrPm = 'PM';
		hr -= 12;
	}

	/* Defines how much radians each hand should move */
	let radH = 0.000008333 * ( ( hr * 60 * 60 * 1000 ) + ( min * 60 * 1000 ) + ( sec * 1000 ) + ms );
	let radM = 0.0001 * ( ( min * 60 * 1000 ) + ( sec * 1000 ) + ms );
	let radS = 0.006 * ( ( sec * 1000 ) + ms );


	// Draw Canvas
	drawRect(0, 0, canvas.width, canvas.height, canvasBg);

	// Hour Hand
	drawCircle(centerX, centerY, 110, 0, 360 , false, hourInactiveColor, 'stroke', 90);
	drawCircle(centerX, centerY, 110, threePIByTwo, rad(radH) + threePIByTwo, false, hourActiveColor, 'stroke', 90);

	// Minute Hand
	drawCircle(centerX, centerY, 180, 0, 360, false, minuteInactiveColor, 'stroke', 50);
	drawCircle(centerX, centerY, 180, threePIByTwo, rad(radM) + threePIByTwo, false, minuteActiveColor, 'stroke', 50);

	// Second Hand
	drawCircle(centerX, centerY, 220, 0, 360, false, secondInactiveColor, 'stroke', 30);
	drawCircle(centerX, centerY, 220, threePIByTwo, rad(radS) + threePIByTwo, false, secondActiveColor, 'stroke', 30);

	// Digital Timer
	drawCircle(centerX, centerY, 90, 0, 360, false, timerBg, 'fill', '50');
	drawText(`${hr.toString().padStart(2, "0")}:${min.toString().padStart(2, "0")} ${amOrPm}`, canvas.width / 2 - 60, canvas.height / 2 + 15, '#ffffff', '28px');

	window.requestAnimationFrame(draw);
}

init();

// Convert degree to radians
function rad(deg){
	return  (Math.PI / 180) * deg;
}

function drawText(text, x, y, color, size) {
	ctx.font = `${size} "Poppins"`;
	ctx.fillStyle = color;
	ctx.fillText(text, x, y);
}

function drawRect(x, y, width, height, color) {
	ctx.fillStyle = color;
	ctx.fillRect(x, y, width, height);
}

function drawArc(x, y, radius, start, end, clockwise)
{
	ctx.beginPath();
	ctx.arc(x, y, radius, start, end, clockwise);
}

function drawCircle(x, y, radius, start, end, clockwise, color, type, thickness) {
	switch (type) {
		case 'fill':
			ctx.fillStyle = color;
			drawArc(x, y, radius, start, end, clockwise)
			ctx.fill();
			break;
		case 'stroke':
			ctx.strokeStyle = color;
			ctx.lineWidth = thickness;
			drawArc(x, y, radius, start, end, clockwise)
			ctx.stroke();
			break
	}
}

</script>

</body>
</html>

 

Link to comment
Share on other sites

  • 3 weeks later...

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

image.png.31ac65386257d5ad21432b3aceec01ae.png

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ANALOG CLOCK</title>
	<style>
		body {
			background-color: midnightblue;
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 10vh;
		}
		.clock {
			position: relative;
			overflow: hidden;
			background-color: inherit;
			height: 30vmin;
			width: 30vmin;
			border-radius: 50%;
			box-shadow: 0 -12px 12px rgba(255,255,255,.1),
						inset 0 -12px 12px rgba(255,255,255,.1),
						0 12px 12px rgba(0,0,0,.1),
						inset 0 12px 12px rgba(0,0,0,.1);
		}
			.clock div {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				background-color: transparent;
			}
				.clock div div {
					left: 50%;
					width: 0;
				}
			.clock span {
				position: absolute;
				font-family: Arial;
				font-size: 5vmin;
				font-weight: bold;
				color: lime;
			}
			.clock .h12 {
				left: 50%;
				top: 3%;
				transform: translateX(-50%);
			}
			.clock .h12::before {
				content: "12";
			}
			.clock .h3 {
				left: 97%;
				top: 50%;
				transform: translate(-100%, -50%);
			}
			.clock .h3::before {
				content: "3";
			}
			.clock .h6 {
				left: 50%;
				top: 97%;
				transform: translate(-50%, -100%);
			}
			.clock .h6::before {
				content: "6";
			}
			.clock .h9 {
				left: 3%;
				top: 50%;
				transform: translateY(-50%);
			}
			.clock .h9::before {
				content: "9";
			}
			.clock .ctr {
				width: 3%;
				height: 3%;
				border-radius: 50%;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: wheat;
			}

		#div-hour div {
			top: 20%;
			height: 30%;
			border-left: 3px solid wheat;
			margin-left: -1px;
		}

		#div-minute div {
			top: 10%;
			height: 40%;
			border-left: 3px solid wheat;
			margin-left: -1px;
		}

		#div-second div {
			top: 5%;
			height: 65%;
			border-left: 2px solid red;
		}
	</style>
	<script type="text/javascript">
		function setClock() {
			var time = new Date();
			var hd = 360.0 * time.getHours() / 12 + 30.0 * time.getMinutes() / 60;
			var md = 360.0 * time.getMinutes() / 60 + 6.0 * time.getSeconds() / 60;
			var sd = 360.0 * time.getSeconds() / 60 + 6.0 * time.getMilliseconds() / 1000;
			document.getElementById("div-hour").style.transform = "rotate(" + hd + "deg)";
			document.getElementById("div-minute").style.transform = "rotate(" + md + "deg)";
			document.getElementById("div-second").style.transform = "rotate(" + sd + "deg)";
		}
		window.onload = function () {
			setClock();
			setInterval(function () {
				setClock();
			}, 10);
		};
	</script>
</head>
<body>
	<div class="clock">
		<div id="div-hour"><div></div></div>
		<div id="div-minute"><div></div></div>
		<div id="div-second"><div></div></div>
		<span class="ctr"></span>
	</div>
</body>
</html>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...