html structure draft and first try of js time laps
This commit is contained in:
Bachir Soussi Chiadmi
@@ -0,0 +1,60 @@
|
||||
html, body {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
#root {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
#header {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
#pictures {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; }
|
||||
#pictures .frame {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0;
|
||||
transition: opacity 100 ease-in-out; }
|
||||
#pictures .frame.current {
|
||||
opacity: 1; }
|
||||
|
||||
#timeline {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 67%;
|
||||
margin: 1% 0 1% 32%;
|
||||
height: 3em;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 5px; }
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 30%;
|
||||
margin: 1%;
|
||||
height: 40%;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 5px; }
|
||||
@@ -1,23 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Hehe rover - lot explorer</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
|
||||
<section id="pictures">
|
||||
<!-- add timelapse pictures -->
|
||||
</section>
|
||||
<section id="timeline">
|
||||
<!-- add viz.js here -->
|
||||
</section>
|
||||
<section id="map">
|
||||
<!-- add leaflet map here -->
|
||||
<!-- or a striped map https://bl.ocks.org/veltman/3ad474e52925d007b292eefbe676174d -->
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Hehe rover - lot explorer</title>
|
||||
|
||||
<link rel="stylesheet" href="bower_components/normalize-css/normalize.css" media="screen" charset="utf-8">
|
||||
<link rel="stylesheet" href="css/styles.css" media="screen" charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<header id="header">
|
||||
<h1>Lot Explorer</h1>
|
||||
</header>
|
||||
<section id="pictures">
|
||||
<!-- add timelapse pictures -->
|
||||
<!-- <img src="pictures/hehe-20160612-175853.jpg" alt="" /> -->
|
||||
<?php include('timelaps.inc.php') ?>
|
||||
</section>
|
||||
<section id="timeline">
|
||||
<!-- add viz.js here -->
|
||||
</section>
|
||||
<section id="map">
|
||||
<!-- add leaflet map here -->
|
||||
<!-- or a striped map https://bl.ocks.org/veltman/3ad474e52925d007b292eefbe676174d -->
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="bower_components/jquery/dist/jquery.min.js" charset="utf-8"></script>
|
||||
<script src="js/script.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,32 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
var fps = 2, now, then = Date.now(), interval = 1000/fps, delta;
|
||||
|
||||
function init(){
|
||||
console.log("Init");
|
||||
// preload all pictures before launching
|
||||
|
||||
setTimeout(function(){
|
||||
play();
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
function play(millis){
|
||||
requestAnimationFrame(play);
|
||||
|
||||
now = Date.now();
|
||||
delta = now - then;
|
||||
|
||||
if(delta > interval){
|
||||
$(".frame.current", "#pictures").toggleClass('current').next().toggleClass('current');
|
||||
|
||||
then = now -(delta % interval);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
init();
|
||||
|
||||
});
|
||||
Executable
+4
@@ -0,0 +1,4 @@
|
||||
#!/bin/sh
|
||||
|
||||
|
||||
ffmpeg -r 6 -i pictures/hehe-%04d-%04d.jpg -an -vcodec copy timelaps.avi
|
||||
@@ -0,0 +1,57 @@
|
||||
html, body{
|
||||
position: relative;
|
||||
margin: 0; padding: 0;
|
||||
overflow: hidden;
|
||||
width:100%; height:100%;
|
||||
}
|
||||
|
||||
#root{
|
||||
position: relative;
|
||||
width:100%; height:100%;
|
||||
}
|
||||
|
||||
#header{
|
||||
position: absolute; z-index: 10;
|
||||
top:0; left:0;
|
||||
}
|
||||
|
||||
#pictures{
|
||||
position: relative; z-index: 5;
|
||||
width:100%; height:100%;
|
||||
overflow: hidden;
|
||||
// border: 1px solid blue;
|
||||
|
||||
.frame{
|
||||
position:absolute; top:0; left:0;
|
||||
width: 100%; height:100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
// background-clip: border-box;
|
||||
// background-color: green;
|
||||
|
||||
// border: 1px solid red;
|
||||
// background-image: url();
|
||||
opacity: 0;
|
||||
transition: opacity 100 ease-in-out;
|
||||
&.current{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#timeline{
|
||||
position: absolute; z-index: 9;
|
||||
bottom:0; left:0; width:67%; margin:1% 0 1% 32%; height:3em;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
#map{
|
||||
position: absolute; z-index: 9;
|
||||
bottom:0; left:0; width:30%; margin:1%; height:40%;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 5px;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<?php
|
||||
|
||||
$imgs = glob("pictures/*.jpg");
|
||||
|
||||
foreach ($imgs as $key => $value):
|
||||
$class = "frame frame-$key";
|
||||
if($key == 0) $class .= " current";
|
||||
?>
|
||||
|
||||
<div class="<?php print $class; ?>" style="background-image:url('<?php print $value ?>');" alt="" /></div>
|
||||
|
||||
<?php endforeach;
|
||||
Reference in New Issue
Block a user