<html>
<head>
<meta charset="UTF-8" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<title>Intersection Observer API : Demo</title>
<style type="text/css">
body {
margin: 0;
height: 3000px;
font-family: Roboto;
}
#target-container {
margin: 1000px auto;
width: 300px;
height: 300px;
background-color: #336699;
line-height: 300px;
color: white;
font-weight: 700;
text-align: center;
text-transform: uppercase;
}
#message {
position: fixed;
background-color: #f1c40f;
padding: 10px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
box-sizing: border-box;
width: 100%;
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
<div id="message">
<p id="msg1">Click the button to wait 3 seconds, then alert "Hello".</p>
<p id="msg2">After clicking away the alert box, an new alert box will appear in 3 seconds. This goes on forever...</p>
</div>
<div id="target-container"></div>
<script type="text/javascript">
var observer = new IntersectionObserver(function(entries) {
console.log(entries);
if (entries[0]['isIntersecting'] === true) {
if (entries[0]['intersectionRatio'] === 1)
if (!navigator.onLine) {
document.getElementById("msg1").innerHTML = "Tem de efetuar a ligação da sua Internet";
return;
} else {
setInterval(function(){ document.getElementById("msg1").innerHTML = "Hello";; }, 1000); setInterval(function(){ document.getElementById("msg2").innerHTML = "World";; }, 1000);
}
}
}, {
threshold: [0, 0.5, 1]
});
observer.observe(document.querySelector("#target-container"));
</script>
</body>
</html>
Sem comentários:
Enviar um comentário