Version 1 of artwork 2
This commit is contained in:
Ruben
parent
c5bf0f1a15
commit
1643537146
1 changed files with 156 additions and 9 deletions
165
artwork2.html
165
artwork2.html
|
|
@ -12,20 +12,169 @@
|
|||
position:absolute;
|
||||
width: 17vw;
|
||||
height: 17vw;
|
||||
opacity: 1;
|
||||
transition: opacity 4s;
|
||||
}
|
||||
|
||||
.visible #viewbox{
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
.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;
|
||||
opacity: 0;
|
||||
transition: opacity 5s;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
z-index:9999;
|
||||
}
|
||||
.visible #visibleBlock{
|
||||
opacity: 1;
|
||||
}
|
||||
</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>
|
||||
<!-- <p>To be able to access Joseph Huot's work 24/7, purchase </p> -->
|
||||
<!-- <p id='timer'></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;
|
||||
|
|
@ -33,8 +182,6 @@ var speedY = 10;
|
|||
var curX = 100;
|
||||
var curY = 0;
|
||||
|
||||
var viewboxEl = document.getElementById("viewbox");
|
||||
|
||||
var lastTick = new Date();
|
||||
|
||||
|
||||
|
|
@ -80,7 +227,7 @@ function animate(){
|
|||
|
||||
window.addEventListener('load', function(){
|
||||
animate();
|
||||
});
|
||||
});*/
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue