232 lines
5.1 KiB
HTML
232 lines
5.1 KiB
HTML
<html>
|
|
<head>
|
|
<title>Joseph Huot's limited edition by Ruben van de Ven</title>
|
|
</head>
|
|
<style type='text/css'>
|
|
body{
|
|
background: black;
|
|
margin:0;
|
|
}
|
|
#viewbox{
|
|
background:white;
|
|
position:absolute;
|
|
width: 17vw;
|
|
height: 17vw;
|
|
opacity: 1;
|
|
transition: opacity 4s;
|
|
}
|
|
|
|
.visible #wrapper{
|
|
width:100%;
|
|
height:100%;
|
|
left:0;
|
|
top:0;
|
|
}
|
|
|
|
#wrapper{
|
|
position: absolute;
|
|
left:5vw;
|
|
top: 5vw;
|
|
width: 90vw;
|
|
height: calc(100% - 10vw);
|
|
}
|
|
|
|
#viewbox.gone {
|
|
opacity:0;
|
|
}
|
|
|
|
#ad{
|
|
position: absolute;
|
|
bottom:10em;
|
|
left: 2em;
|
|
/*left:20%;*/
|
|
/*top: 50%;
|
|
width:100%;*/
|
|
/*text-align: right;*/
|
|
transform: rotate(90deg);
|
|
color:#ccc;
|
|
font-family:sans-serif;
|
|
width: 21em;
|
|
font-size:80%;
|
|
}
|
|
#ad h1{
|
|
color: #ff7474;
|
|
/*text-align: center;*/
|
|
}
|
|
/*
|
|
.visible #ad{
|
|
display:none;
|
|
}*/
|
|
|
|
#visibleBlock{
|
|
background: white;
|
|
transition: width 5s;
|
|
position:absolute;
|
|
left:0;
|
|
top:0;
|
|
width:0%;
|
|
height:100%;
|
|
z-index:9999;
|
|
}
|
|
.visible #visibleBlock{
|
|
opacity: 1;
|
|
width:100%;
|
|
}
|
|
</style>
|
|
<body class=''>
|
|
<div id='wrapper'>
|
|
<div id='viewbox'>
|
|
</div>
|
|
</div>
|
|
<div id='ad'>
|
|
<h1>preview mode</h1>
|
|
<p>This is a limited edition. To purchase the full version, with 24/7 access to Joseph Huot's work, contact Ruben van de Ven.</p>
|
|
</div>
|
|
<div id='visibleBlock'>
|
|
</div>
|
|
<script type="text/javascript">
|
|
|
|
var percentageDisabled = 30; // disabled 30/100 -> ±18 minuten per uur
|
|
var minInterval = 10 * 60; // seconds: 10 minutes
|
|
var maxInterval = 2 * 60 * 60; // seconds: 2 hours
|
|
|
|
var viewboxEl = document.getElementById("viewbox");
|
|
var wrapperEl = document.getElementById("wrapper");
|
|
var timerEl = document.getElementById("timer");
|
|
|
|
let box = viewboxEl.getBoundingClientRect();
|
|
var wrapBox = wrapperEl.getBoundingClientRect();
|
|
|
|
var posX = Math.random() * (wrapBox['width'] - box['width']);
|
|
var posY = Math.random() * (wrapBox['height'] - box['height']);
|
|
|
|
function fade() {
|
|
let box = viewboxEl.getBoundingClientRect();
|
|
let wrapBox = wrapperEl.getBoundingClientRect();
|
|
|
|
posX = Math.random() * (wrapBox['width'] - box['width']);
|
|
posY = Math.random() * (wrapBox['height'] - box['height']);
|
|
|
|
viewboxEl.classList.add('gone');
|
|
setTimeout(fadeIn, 5000);
|
|
setTimeout(fade, 20000);
|
|
}
|
|
|
|
function fadeIn(){
|
|
viewboxEl.style.left = posX +"px";
|
|
viewboxEl.style.top = posY +"px";
|
|
viewboxEl.classList.remove('gone');
|
|
}
|
|
|
|
var toggleEnabled = function() {
|
|
let isHidden = !document.body.classList.contains('visible');
|
|
|
|
var nextIntervalPercentage = isHidden ? 100 - percentageDisabled : percentageDisabled;
|
|
|
|
// choose a random interval between min & max, independent of whether it's hidden.
|
|
let currentInterval = minInterval + Math.random() * (maxInterval - minInterval);
|
|
// now determine the used interval by taking the percentage
|
|
let useInterval = currentInterval * (nextIntervalPercentage / 100);
|
|
// random spreads evenly, so taking percentage will give us (over time) an even spread of the enabled/disabled according to percentageDisabled
|
|
// useInterval /= 300;
|
|
setTimeout(toggleEnabled, useInterval * 1000);
|
|
console.log(useInterval);
|
|
|
|
if(isHidden) {
|
|
// sliderEl.style.transitionDuration = Math.floor(useInterval * 0.5) + "s";
|
|
// // sliderEl.style.transitionDelay = Math.floor(useInterval * 0.5) + "s";
|
|
document.body.classList.add('visible');
|
|
} else {
|
|
// sliderEl.style.transitionDuration = Math.floor(useInterval * 0.5) + "s";
|
|
// // sliderEl.style.transitionDelay = Math.floor(useInterval * 0.5) + "s";
|
|
document.body.classList.remove('visible');
|
|
startTimer(useInterval);
|
|
}
|
|
}
|
|
|
|
// countdown timer
|
|
// var interval = null;
|
|
// function startTimer(duration) {
|
|
// var timer = duration, minutes, seconds;
|
|
// if(interval != null) {
|
|
// clearInterval(interval);
|
|
// }
|
|
// interval = setInterval(function () {
|
|
// minutes = parseInt(timer / 60, 10)
|
|
// seconds = parseInt(timer % 60, 10);
|
|
|
|
// minutes = minutes < 10 ? "0" + minutes : minutes;
|
|
// seconds = seconds < 10 ? "0" + seconds : seconds;
|
|
|
|
// timerEl.textContent = minutes + ":" + seconds;
|
|
|
|
// if (--timer < 0) {
|
|
// timer = duration;
|
|
// }
|
|
// }, 1000);
|
|
// }
|
|
|
|
|
|
window.addEventListener('load', function(){
|
|
fade();
|
|
toggleEnabled();
|
|
});
|
|
|
|
/*
|
|
// speed per sec
|
|
var speedX = 10;
|
|
var speedY = 10;
|
|
|
|
var curX = 100;
|
|
var curY = 0;
|
|
|
|
var lastTick = new Date();
|
|
|
|
|
|
function animate(){
|
|
let currentTime = new Date();
|
|
|
|
// time difference in ms
|
|
let timeDiff = currentTime - lastTick;
|
|
// strip the ms
|
|
timeDiff /= 1000;
|
|
// let secondsPassed = Math.round(timeDiff % 60);
|
|
|
|
let dX = speedX * timeDiff;
|
|
let dY = speedY * timeDiff;
|
|
|
|
curX += dX;
|
|
curY += dY;
|
|
|
|
let box = viewboxEl.getBoundingClientRect();
|
|
|
|
if(curX + box['width'] >= window.innerWidth){
|
|
speedX *= -1;
|
|
curX = window.innerWidth - box['width'];
|
|
} else if(curX <= 0) {
|
|
speedX *= -1;
|
|
curX = 0;
|
|
}
|
|
|
|
if(curY + box['height'] >= window.innerHeight){
|
|
speedY *= -1;
|
|
curY = window.innerHeight - box['height'];
|
|
} else if (curY <= 0) {
|
|
speedY *= -1;
|
|
curY = 0;
|
|
}
|
|
|
|
viewboxEl.style.left = curX + "px";
|
|
viewboxEl.style.top = curY + "px";
|
|
|
|
lastTick = currentTime;
|
|
window.requestAnimationFrame(animate);
|
|
}
|
|
|
|
window.addEventListener('load', function(){
|
|
animate();
|
|
});*/
|
|
</script>
|
|
</body>
|
|
</html>
|