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