momin-riyadh/jsanimation.html

## jsanimation.html
<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<title>js-animation</title>
<link href="https://fonts.googleapis.com/css?family=Spectral+SC:400,400i,500,500i,600|Trykker" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
	.cb{
		display: inline-block;
		width: 12px;
		height: 12px;
		background: #eee;
		border: 1px solid #999;
		border-radius: 1px;
		transition: background 0.2s linear;
		cursor: pointer;
	}
	#box1{
		width: 100px;
		height: 100px;
		background: red;
	}
	#object1 {
		width: 100px;
		height: 100px;
		border-radius: 100%;
		background: deepskyblue;
		/* animation-name: animation1;
		animation-duration: 2s;
		animation-timing-function: linear;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-play-state: running;
		animation-delay: 0s;
		animation-fill-mode: forwards; */

	}
	@keyframes animation1{
		0% { transform: translateX(0px); }
		33% { transform: translateX(100px); }
		66% { transform: translateX(200px) translateY(200px); }
		100% { transform: translateX(300px) translateY(300px); }
	}
	@keyframes animation2{
		0% { border-radius: 100%; background: red; }
		100% { border-radius: 0%; background: yellow; }
	}


div#topbar{
	background:-webkit-linear-gradient(#666, #000);
	background:linear-gradient(#666, #000);
	height:60px;
}
div#topbar > #logo{
	float:left;
	width:140px;
	height:35px;
	margin:8px 0px 0px 30px;
	font-size:36px;
	color:#999;
}
div#topbar > #sections_btn_holder{
	float:left;
	width:144px;
	height:46px;
	padding-top:16px;
}
div#topbar > #sections_btn_holder > button{ background:#F90;}
div#topbar > #sections_panel{
	position:absolute;
	height:0px;
	width:550px;
	background:#000;
	top:100%;
	left:160px;
	border-radius:0px 0px 8px 8px;
	overflow:hidden;
	z-index:10000;
	transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > div{
	background:#333;
	padding:20px;
	height:238px;
	margin:10px;
	color:#FC0;
}
div#peekaboo{
    position:fixed;
    bottom:0px;
    right:-352px;
    background: #C4E6FF;
    padding:25px;
    width:300px;
    height:200px;
    font-size:48px;
}
</style>

</head>
<body style="height: 2000px">
<!-- <div class="container">

		<div class="cb" id="cb1" data-checked="0" onclick="toggleCB(this)"></div> cb1
		<br>
		<br>
		 <div class="cb" id="cb2" data-checked="0" onclick="toggleCB(this)"></div> cb2
		 <br>
		 <br>
		 <button type="submit" class="btn btn-success btn-lg" onclick="submitValues()">click</button>
<hr>
<div id="box1"></div>
<p>
	width: <input type="number" step="10" onchange="box1.style.width=this.value+'px'">
</p>

<div id="object1"></div>
<button class="btn btn-warning btn-lg" onclick='object1.style.animation = "animation1 2.5s ease infinite, animation2 .5s ease 3"'> animation</button>


<hr>
<div id="topbar">
  <div id="logo">LOGO</div>
  <div id="sections_btn_holder">
    <button class="btn btn-danger btn-sm" onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">&#9662;</span></button>
  </div>
  <div id="sections_panel">
    <div>
      Try adding things like more child div containers, links, buttons, menus, pictures, paragraphs, videos, etc... This area can display way more than just menu buttons or links. You will see a lot of modern sites even adding graphics, icons, animations and images to their drop down menus nowadays. So get creative partner.
    </div>
  </div>
</div>
<hr>

  <h2>Scroll Bottom Y Handler Function</h2>

 <p style="height:1600px; font-size:18px;">
    Scroll to the bottom of the page to see a Peekaboo box effect &darr;
  </p> -->
  <div id="peekaboo">Peekaboo!</div>


<!-- <hr> -->
<!-- <svg width="400px" height="200px" style="border:1px solid black;">
	<rect id="rect1" x="0" y="0" width="50" height="50" fill="yellow" transform="rotate(45)">
	</rect>
</svg>
 -->

<script>
	var rect1 = document.getElementById("rect1");
	var reqID, x = 0;
	function animate() {
		x++;
		rect1.setAttribute( 'x', x );
		reqID = window.requestAnimationFrame(animate);
	}
	reqID = window.requestAnimationFrame(animate);
</script>


<hr>

<!--
<svg width="500" height="300" style="border:1px solid gray;">
	<path id="motionpath1" d="M70,100 C 0,300 300,300 400,200 C 520,70 120,-40 70,100" fill="none" stroke="silver" stroke-width="2"  />
	<path d="M-12,12 h48 v-24 h-48 z" fill="red" >
		<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
			<mpath xlink:href="#motionpath1"/>
		</animateMotion>
	</path>
</svg> -->

<!-- </div> -->

<!-- pikaboo popup-->
<script>
function yScrollHandler(){
    var win = document.getElementById("peekaboo");
    if((window.pageYOffset + window.innerHeight) >= document.body.offsetHeight){
	//win.style.webkitTransition = "right 0.7s ease-in-out 0s";
	win.style.transition = "right 0.7s ease-in-out 0s";
	win.style.right = "50" + "%";
	win.style.transform = "translateX(-50%)";
    } else {
	win.style.transition = "right 0.1s ease-in-out 0s";
	win.style.right = "-452px";
    }
}
window.onscroll = yScrollHandler;
</script>


<script>
function toggleNavPanel(x){
    var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
    if(panel.style.height == maxH){
        panel.style.height = "0px";
        navarrow.innerHTML = "&#9662;";
    } else {
        panel.style.height = maxH;
        navarrow.innerHTML = "&#9652;";
    }
}
</script>

<script>
	function toggleCB(cb) {
		if (cb.dataset.checked == 0) {
			cb.style.background = "#89D814";
			cb.dataset.checked = 1;
		}
		else {
			cb.style.background = "#eee";
			cb.dataset.checked = 0;
		}
	}
	function submitValues(){
		alert("cb1 = "+cb1.dataset.checked+"  cb2 = "+cb2.dataset.checked);
	}
	var box1 = document.getElementById("box1");
	box1.style.transition = "width 1s ease-in 0s";
</script>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<title>js-animation</title>
	<link href="https://fonts.googleapis.com/css?family=Spectral+SC:400,400i,500,500i,600\|Trykker" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
	<style>
	.cb{
	display: inline-block;
	width: 12px;
	height: 12px;
	background: #eee;
	border: 1px solid #999;
	border-radius: 1px;
	transition: background 0.2s linear;
	cursor: pointer;
	}
	#box1{
	width: 100px;
	height: 100px;
	background: red;
	}
	#object1 {
	width: 100px;
	height: 100px;
	border-radius: 100%;
	background: deepskyblue;
	/* animation-name: animation1;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-play-state: running;
	animation-delay: 0s;
	animation-fill-mode: forwards; */

	}
	@keyframes animation1{
	0% { transform: translateX(0px); }
	33% { transform: translateX(100px); }
	66% { transform: translateX(200px) translateY(200px); }
	100% { transform: translateX(300px) translateY(300px); }
	}
	@keyframes animation2{
	0% { border-radius: 100%; background: red; }
	100% { border-radius: 0%; background: yellow; }
	}


	div#topbar{
	background:-webkit-linear-gradient(#666, #000);
	background:linear-gradient(#666, #000);
	height:60px;
	}
	div#topbar > #logo{
	float:left;
	width:140px;
	height:35px;
	margin:8px 0px 0px 30px;
	font-size:36px;
	color:#999;
	}
	div#topbar > #sections_btn_holder{
	float:left;
	width:144px;
	height:46px;
	padding-top:16px;
	}
	div#topbar > #sections_btn_holder > button{ background:#F90;}
	div#topbar > #sections_panel{
	position:absolute;
	height:0px;
	width:550px;
	background:#000;
	top:100%;
	left:160px;
	border-radius:0px 0px 8px 8px;
	overflow:hidden;
	z-index:10000;
	transition: height 0.3s linear 0s;
	}
	div#topbar > #sections_panel > div{
	background:#333;
	padding:20px;
	height:238px;
	margin:10px;
	color:#FC0;
	}
	div#peekaboo{
	position:fixed;
	bottom:0px;
	right:-352px;
	background: #C4E6FF;
	padding:25px;
	width:300px;
	height:200px;
	font-size:48px;
	}
	</style>

	</head>
	<body style="height: 2000px">
	<!-- <div class="container">

	<div class="cb" id="cb1" data-checked="0" onclick="toggleCB(this)"></div> cb1
	<br>
	<br>
	<div class="cb" id="cb2" data-checked="0" onclick="toggleCB(this)"></div> cb2
	<br>
	<br>
	<button type="submit" class="btn btn-success btn-lg" onclick="submitValues()">click</button>
	<hr>
	<div id="box1"></div>
	<p>
	width: <input type="number" step="10" onchange="box1.style.width=this.value+'px'">
	</p>

	<div id="object1"></div>
	<button class="btn btn-warning btn-lg" onclick='object1.style.animation = "animation1 2.5s ease infinite, animation2 .5s ease 3"'> animation</button>


	<hr>
	<div id="topbar">
	<div id="logo">LOGO</div>
	<div id="sections_btn_holder">
	<button class="btn btn-danger btn-sm" onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">▾</span></button>
	</div>
	<div id="sections_panel">
	<div>
	Try adding things like more child div containers, links, buttons, menus, pictures, paragraphs, videos, etc... This area can display way more than just menu buttons or links. You will see a lot of modern sites even adding graphics, icons, animations and images to their drop down menus nowadays. So get creative partner.
	</div>
	</div>
	</div>
	<hr>

	<h2>Scroll Bottom Y Handler Function</h2>

	<p style="height:1600px; font-size:18px;">
	Scroll to the bottom of the page to see a Peekaboo box effect ↓
	</p> -->
	<div id="peekaboo">Peekaboo!</div>


	<!-- <hr> -->
	<!-- <svg width="400px" height="200px" style="border:1px solid black;">
	<rect id="rect1" x="0" y="0" width="50" height="50" fill="yellow" transform="rotate(45)">
	</rect>
	</svg>
	-->

	<script>
	var rect1 = document.getElementById("rect1");
	var reqID, x = 0;
	function animate() {
	x++;
	rect1.setAttribute( 'x', x );
	reqID = window.requestAnimationFrame(animate);
	}
	reqID = window.requestAnimationFrame(animate);
	</script>


	<hr>

	<!--
	<svg width="500" height="300" style="border:1px solid gray;">
	<path id="motionpath1" d="M70,100 C 0,300 300,300 400,200 C 520,70 120,-40 70,100" fill="none" stroke="silver" stroke-width="2" />
	<path d="M-12,12 h48 v-24 h-48 z" fill="red" >
	<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
	<mpath xlink:href="#motionpath1"/>
	</animateMotion>
	</path>
	</svg> -->

	<!-- </div> -->

	<!-- pikaboo popup-->
	<script>
	function yScrollHandler(){
	var win = document.getElementById("peekaboo");
	if((window.pageYOffset + window.innerHeight) >= document.body.offsetHeight){
	//win.style.webkitTransition = "right 0.7s ease-in-out 0s";
	win.style.transition = "right 0.7s ease-in-out 0s";
	win.style.right = "50" + "%";
	win.style.transform = "translateX(-50%)";
	} else {
	win.style.transition = "right 0.1s ease-in-out 0s";
	win.style.right = "-452px";
	}
	}
	window.onscroll = yScrollHandler;
	</script>



	<script>
	function toggleNavPanel(x){
	var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
	if(panel.style.height == maxH){
	panel.style.height = "0px";
	navarrow.innerHTML = "▾";
	} else {
	panel.style.height = maxH;
	navarrow.innerHTML = "▴";
	}
	}
	</script>

	<script>
	function toggleCB(cb) {
	if (cb.dataset.checked == 0) {
	cb.style.background = "#89D814";
	cb.dataset.checked = 1;
	}
	else {
	cb.style.background = "#eee";
	cb.dataset.checked = 0;
	}
	}
	function submitValues(){
	alert("cb1 = "+cb1.dataset.checked+" cb2 = "+cb2.dataset.checked);
	}
	var box1 = document.getElementById("box1");
	box1.style.transition = "width 1s ease-in 0s";
	</script>


	</body>
	</html>