Commit 75970df6 authored by Benjamin Gallois's avatar Benjamin Gallois

Add looming and main page

parent f4bacd84
......@@ -24,3 +24,10 @@ body.addEventListener("wheel", function (event) {
circle.style.left = parseFloat(circle.style.left) - x*0.5 + 'px';
circle.style.top = parseFloat(circle.style.top) - x*0.5 + 'px';
});
body.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 27) {
window.location.href = 'main.html';
}
});
#circle {
width: 200px;
height: 200px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: white;
position: relative;
cursor: none;
/* cursor: none; */
}
body {
background-color: black;
color: white;
width: 100%;
height: 100%;
}
<html>
<head>
<meta charset="UTF-8">
<title>Looming fête de la science</title>
<link rel="stylesheet" type="text/css" href="looming.css">
</head>
<body id="body">
<div id="circle"></div>
<script src="looming.js" type="text/javascript"></script>
</body>
</html>
var circle = document.getElementById('circle');
var body = document.getElementById('body');
var zoom = 0;
body.addEventListener("mousemove", function (event) {
var x = event.clientX;
var y = event.clientY;
var a = circle.offsetWidth;
circle.style.left = x - a/2 + 'px';
circle.style.top = y - a/2 + 'px';
});
function loom(){
zoom ++;
var a = circle.offsetWidth;
circle.style.width = a + zoom + 'px';
circle.style.height = a + zoom + 'px';
circle.style.left = parseFloat(circle.style.left) - zoom*0.5 + 'px';
circle.style.top = parseFloat(circle.style.top) - zoom*0.5 + 'px';
if (zoom > 30){
zoom = 0;
circle.style.width = 100 + 'px';
circle.style.height = 100 + 'px';
circle.style.left = parseFloat(circle.style.left) + 465*0.5 + 'px';
circle.style.top = parseFloat(circle.style.top) + 465*0.5 + 'px';
clearInterval(looming);
}
}
body.addEventListener("click", function (event) {
looming = setInterval(loom, 50);
});
body.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 27) {
window.location.href = 'main.html';
}
});
<html>
<head>
<meta charset="UTF-8">
<title>Phototaxis fête de la science</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="photo.css">
</head>
<body id="body">
<div id="circle"></div>
<h1><center>Etude comportementale de la larve de poisson zèbre</center></h1>
<ul>
<li> <a href="photo.html"> Experience de phototaxis</a>
<li> <a href="stripe.html"> Experience de réponse opto-moteur</a>
<li> <a href="looming.html"> Experience de looming</a>
<script src="app.js" type="text/javascript"></script>
</ul>
</body>
</html>
#circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: white;
position: relative;
cursor: none;
}
body {
background-color: black;
color: white;
width: 100%;
height: 100%;
}
/* unvisited link */
a:link {
color: white;
text-decoration: none;
font-size: 200%;
}
/* visited link */
a:visited {
color: white;
text-decoration: none;
font-size: 200%;
}
/* mouse over link */
a:hover {
color: white;
text-decoration: none;
font-size: 200%;
}
/* selected link */
a:active {
color: white;
text-decoration: none;
font-size: 200%;
}
<html>
<head>
<meta charset="UTF-8">
<title>Phototaxis fête de la science</title>
<link rel="stylesheet" type="text/css" href="photo.css">
</head>
<body id="body">
<div id="circle"></div>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
......@@ -3,6 +3,7 @@ var body2 = document.getElementById('body2');
var x = 0;
var x2 = - window.innerWidth;
function move(){
x ++;
x2++;
......@@ -15,6 +16,14 @@ function move(){
body.style.left = x + 'px';
body2.style.left = x2 + 'px';
}
body.addEventListener("click", function (event) {
moveCircle = setInterval(move, 10);
moveInterval = setInterval(move, 20);
});
window.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 27) {
window.location.href = 'main.html';
}
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment