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;
|
position:absolute;
|
||||||
width: 17vw;
|
width: 17vw;
|
||||||
height: 17vw;
|
height: 17vw;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.visible #viewbox{
|
.visible #wrapper{
|
||||||
top: 0 !important;
|
width:100%;
|
||||||
left: 0 !important;
|
height:100%;
|
||||||
width: 100% !important;
|
left:0;
|
||||||
height: 100% !important;
|
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>
|
</style>
|
||||||
<body class=''>
|
<body class=''>
|
||||||
|
<div id='wrapper'>
|
||||||
<div id='viewbox'>
|
<div id='viewbox'>
|
||||||
</div>
|
</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">
|
<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
|
// speed per sec
|
||||||
var speedX = 10;
|
var speedX = 10;
|
||||||
var speedY = 10;
|
var speedY = 10;
|
||||||
|
|
@ -33,8 +182,6 @@ var speedY = 10;
|
||||||
var curX = 100;
|
var curX = 100;
|
||||||
var curY = 0;
|
var curY = 0;
|
||||||
|
|
||||||
var viewboxEl = document.getElementById("viewbox");
|
|
||||||
|
|
||||||
var lastTick = new Date();
|
var lastTick = new Date();
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -80,7 +227,7 @@ function animate(){
|
||||||
|
|
||||||
window.addEventListener('load', function(){
|
window.addEventListener('load', function(){
|
||||||
animate();
|
animate();
|
||||||
});
|
});*/
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue