You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
231 lines
5.1 KiB
231 lines
5.1 KiB
<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>
|
|
|