mvp2/artwork2.html

232 lines
5.1 KiB
HTML
Raw Normal View History

<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;
2017-12-15 16:52:36 +01:00
width: 17vw;
height: 17vw;
2017-12-15 17:29:25 +01:00
opacity: 1;
transition: opacity 4s;
2017-12-15 16:52:36 +01:00
}
2017-12-15 17:29:25 +01:00
.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;*/
}
2017-12-15 18:05:14 +01:00
/*
2017-12-15 17:29:25 +01:00
.visible #ad{
display:none;
2017-12-15 18:05:14 +01:00
}*/
2017-12-15 17:29:25 +01:00
#visibleBlock{
background: white;
2017-12-15 22:09:09 +01:00
transition: width 5s;
2017-12-15 17:29:25 +01:00
position:absolute;
left:0;
top:0;
2017-12-15 22:09:09 +01:00
width:0%;
2017-12-15 17:29:25 +01:00
height:100%;
z-index:9999;
}
.visible #visibleBlock{
opacity: 1;
2017-12-15 22:09:09 +01:00
width:100%;
}
</style>
2017-12-15 16:52:36 +01:00
<body class=''>
2017-12-15 17:29:25 +01:00
<div id='wrapper'>
<div id='viewbox'>
</div>
2017-12-15 17:29:25 +01:00
</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>
2017-12-15 16:52:36 +01:00
<script type="text/javascript">
2017-12-15 17:29:25 +01:00
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();
});
/*
2017-12-15 16:52:36 +01:00
// 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();
2017-12-15 17:29:25 +01:00
});*/
2017-12-15 16:52:36 +01:00
</script>
</body>
</html>