You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
216 lines
7.4 KiB
HTML
216 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js" integrity="sha512-odNmoc1XJy5x1TMVMdC7EMs3IVdItLPlCeL5vSUPN2llYKMJ2eByTTAIiiuqLg+GdNr9hF6z81p27DArRFKT7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
<title>Harvesting the Net</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Loading gif -->
|
|
<div id="loading" class="animate__animated">
|
|
<img src="https://shortpixel.com/img/spinner2.gif" alt="">
|
|
</div>
|
|
|
|
<!-- Here is where the text is rendered -->
|
|
<!-- <div id="text">
|
|
<p class="marquee">
|
|
|
|
</p>
|
|
</div> -->
|
|
|
|
<img id="pic" src="">
|
|
<div class="viewport">
|
|
<div id="view" class="scene3D-container animate__animated">
|
|
<div class="scene3D">
|
|
<!-- Here is where the pics are rendered -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
var findMe = document.querySelectorAll('.element');
|
|
var picsBeforeScroll = 20
|
|
var fetchInterval = 4000 //3200
|
|
var scrollTime = 80
|
|
var end
|
|
let n = 0
|
|
let scrollVal = 0
|
|
|
|
// Automate scrolling
|
|
function pageScroll(scroll) {
|
|
window.scrollBy(0, scroll);
|
|
scrolldelay = setTimeout(pageScroll, scrollTime, scroll);
|
|
|
|
|
|
}
|
|
|
|
|
|
// ViewPort check
|
|
var notInViewport = function(elem) {
|
|
var distance = elem.getBoundingClientRect();
|
|
return (distance.bottom < 0)
|
|
};
|
|
|
|
|
|
// Fetch data from a json read by Flask
|
|
function getData() {
|
|
|
|
url = "/api/datapoint";
|
|
|
|
// Random value function
|
|
function r(x) {
|
|
return Math.floor(Math.random() * 300 + x)
|
|
}
|
|
|
|
axios.get(url)
|
|
.then(function(response) {
|
|
findMe.forEach(element => {
|
|
if (notInViewport(element)) {
|
|
|
|
if (element.id == end) {
|
|
pageScroll(0)
|
|
setTimeout(() => {
|
|
document.getElementById('view').classList.add('animate__bounceOut');
|
|
}, 3000);
|
|
} else {
|
|
element.remove()
|
|
let currentDeleted = element.id
|
|
// document.getElementById(currentDeleted).style.display = "none"
|
|
}
|
|
}
|
|
});
|
|
|
|
if (response.data.pics[String(n)]) {
|
|
if (response.data.pics[String(n)].endsWith('.')) {
|
|
// Inject the last sentence to view
|
|
document.querySelector('.scene3D').innerHTML += `<div><h1>${response.data.pics[String(n)]}</h1></div>`
|
|
} else {
|
|
if (n >= picsBeforeScroll) {
|
|
// pageScroll(0)
|
|
document.querySelector('.scene3D').innerHTML += `<div><img class="element" id="num${String(n)}" style='margin:${r(1)}% ${r(2)}% ${r(3)}% -${r(4)}%' src=${response.data.pics[String(n)]}></div>`
|
|
pageScroll(2)
|
|
} else {
|
|
document.querySelector('.scene3D').innerHTML += `<div><img class="element" id="num${String(n)}" style='margin:${r(1)}% ${r(2)}% ${r(3)}% -${r(4)}%' src=${response.data.pics[String(n)]}></div>`
|
|
}
|
|
}
|
|
|
|
n++
|
|
findMe = document.querySelectorAll('.element');
|
|
|
|
} else {
|
|
end = `num${n-5}`
|
|
}
|
|
})
|
|
|
|
.catch(function(error) {
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// Loading gif for 15 seconds
|
|
// then start to scroll after 7 seconds
|
|
|
|
setTimeout(() => {
|
|
document.getElementById('loading').classList.add('animate__fadeOut')
|
|
var intervalID = window.setInterval(getData, fetchInterval);
|
|
}, 5000); //TODO: rimettere 15s
|
|
|
|
|
|
|
|
// Delete passed pictures
|
|
|
|
// document.addEventListener('scroll', function() {
|
|
// findMe.forEach(element => {
|
|
// if (notInViewport(element)) {
|
|
|
|
// if (element.id == end) {
|
|
// pageScroll(0)
|
|
// setTimeout(() => {
|
|
// document.getElementById('view').classList.add('animate__bounceOut');
|
|
// }, 3000);
|
|
// } else {
|
|
// element.remove()
|
|
// let currentDeleted = element.id
|
|
// // document.getElementById(currentDeleted).style.display = "none"
|
|
// }
|
|
// }
|
|
// });
|
|
// })
|
|
|
|
|
|
|
|
// 3D stuff
|
|
|
|
var numberOfItems = 280;
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
window.addEventListener("scroll", moveCamera);
|
|
window.addEventListener("mousemove", moveCameraAngle);
|
|
setSceneHeight();
|
|
})
|
|
|
|
function moveCamera() {
|
|
document.documentElement.style.setProperty("--cameraZ", window.pageYOffset);
|
|
}
|
|
|
|
function setSceneHeight() {
|
|
|
|
const itemZ = parseFloat(
|
|
getComputedStyle(document.documentElement).getPropertyValue("--itemZ")
|
|
);
|
|
const scenePerspective = parseFloat(
|
|
getComputedStyle(document.documentElement).getPropertyValue(
|
|
"--scenePerspective"
|
|
)
|
|
);
|
|
const cameraSpeed = parseFloat(
|
|
getComputedStyle(document.documentElement).getPropertyValue("--cameraSpeed")
|
|
);
|
|
|
|
const height =
|
|
window.innerHeight +
|
|
scenePerspective * cameraSpeed +
|
|
itemZ * cameraSpeed * numberOfItems;
|
|
|
|
document.documentElement.style.setProperty("--viewportHeight", height);
|
|
}
|
|
|
|
function moveCameraAngle(event) {
|
|
const xGap =
|
|
(((event.clientX - window.innerWidth / 2) * 100) /
|
|
(window.innerWidth / 2)) *
|
|
-1;
|
|
const yGap =
|
|
(((event.clientY - window.innerHeight / 2) * 100) /
|
|
(window.innerHeight / 2)) *
|
|
-1;
|
|
// const newPerspectiveOriginX =
|
|
// perspectiveOrigin.x + (xGap * perspectiveOrigin.maxGap) / 100;
|
|
// const newPerspectiveOriginY =
|
|
// perspectiveOrigin.y + (yGap * perspectiveOrigin.maxGap) / 40;
|
|
|
|
// document.documentElement.style.setProperty(
|
|
// "--scenePerspectiveOriginX",
|
|
// newPerspectiveOriginX
|
|
// );
|
|
// document.documentElement.style.setProperty(
|
|
// "--scenePerspectiveOriginY",
|
|
// newPerspectiveOriginY
|
|
// );
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |