line trigger and intersectionObserver test
commit
e95aa3e137
@ -0,0 +1,61 @@
|
|||||||
|
|
||||||
|
var boxes = document.querySelectorAll(".box")
|
||||||
|
|
||||||
|
//line trigger for the carillon
|
||||||
|
|
||||||
|
let line = document.createElement("div")
|
||||||
|
line.id = "line"
|
||||||
|
line.style.position = "fixed"
|
||||||
|
line.style.top = "0"
|
||||||
|
line.style.width ="100%"
|
||||||
|
line.style.height = "10px"
|
||||||
|
line.style.backgroundColor ="green"
|
||||||
|
line.style.opacity ="0.5"
|
||||||
|
line.style.zIndex ="9999999999999999"
|
||||||
|
|
||||||
|
document.body.appendChild(line)
|
||||||
|
|
||||||
|
// some space at the bottom to be able to scroll all the elements of the page
|
||||||
|
let finale = document.createElement("div")
|
||||||
|
finale.style.height = "100vh"
|
||||||
|
document.body.appendChild(finale)
|
||||||
|
|
||||||
|
let observer = new IntersectionObserver(
|
||||||
|
entries => {
|
||||||
|
console.log(entries);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
root: line,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
//inbuild funct
|
||||||
|
boxes.forEach((box)=>{
|
||||||
|
observer.observe(box);
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// following code relates to the test html page
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
boxes.forEach((box) => {
|
||||||
|
let randomCol = '#'+(Math.floor(Math.random()*16777215).toString(16));
|
||||||
|
box.style.backgroundColor = randomCol;
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// sound?
|
||||||
|
//upload as webextension
|
||||||
|
|
||||||
|
//web audio API to do synthesis
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script src="carillon.js" defer></script>
|
||||||
|
<link rel="stylesheet" href="style.css" type="text/css">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="box"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
|
||||||
|
"manifest_version": 2,
|
||||||
|
"name" : "Carillon",
|
||||||
|
"version" : "1.0",
|
||||||
|
|
||||||
|
"description": "Carillon for webpages",
|
||||||
|
|
||||||
|
"icons" : {
|
||||||
|
"48": "icons/carillon.png"
|
||||||
|
},
|
||||||
|
|
||||||
|
"content_scripts": [
|
||||||
|
{
|
||||||
|
"matches": ["*://*.mozilla.org/*"],
|
||||||
|
"js": ["carillon.js"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue