const hover = function(element, isHovering) {
if (element.tagName.toUpperCase() === "A") {
const targetId = element.getAttribute("data-target");
if (targetId) {
const targetDiv = document.getElementById(targetId);
if (targetDiv) targetDiv.classList.toggle("show", isHovering)
}
}
};
document.querySelector(".menu")
.addEventListener("mouseover",function(event) { hover(event.target,true) })
document.querySelector(".menu")
.addEventListener("mouseout",function(event) { hover(event.target) })
/* GRAIN JAVASCRIPT START */
var viewWidth,
viewHeight,
canvas = document.getElementById("canvas"),
context;
// change these settings
var patternSize = 64,
patternScaleX = 1,
patternScaleY = 1,
patternRefreshInterval = 4,
patternAlpha = 25; // int between 0 and 255,
var patternPixelDataLength = patternSize * patternSize * 4,
patternCanvas,
patternContext,
patternData,
frame = 0;
window.onload = function() {
initCanvas();
initGrain();
requestAnimationFrame(loop);
};
// create a canvas for rendering the grain
function initCanvas() {
viewWidth = canvas.width = canvas.clientWidth;
viewHeight = canvas.height = canvas.clientHeight;
context = canvas.getContext('2d');
context.scale(patternScaleX, patternScaleY);
}
// create a canvas to be used as a pattern
function initGrain() {
patternCanvas = document.createElement('canvas');
patternCanvas.width = patternSize;
patternCanvas.height = patternSize;
patternContext = patternCanvas.getContext('2d');
patternData = patternContext.createImageData(patternSize, patternSize);
}
// fill every pixel of the pattern with a random shade of gray
function update() {
var value;
for (var i = 0; i < patternPixelDataLength; i += 4) {
value = (Math.random() * 255) | 0;
patternData.data[i] = value;
patternData.data[i + 1] = value;
patternData.data[i + 2] = value;
patternData.data[i + 3] = patternAlpha;
}
patternContext.putImageData(patternData, 0, 0);
}
// fill the canvas using the pattern
function draw() {
context.clearRect(0, 0, viewWidth, viewHeight);
context.fillStyle = context.createPattern(patternCanvas, 'repeat');
context.fillRect(0, 0, viewWidth, viewHeight);
}
function loop() {
if (++frame % patternRefreshInterval === 0) {
update();
draw();
}
requestAnimationFrame(loop);
}
/* GRAIN JAVASCRIPT END */
/* LEAF JAVASCRIPT START */
let leafVisible = false;
const toggleLeaf = () => {
if (!leafVisible) {
document.querySelector(".scale-in-hor-left").style.display = "block";
leafVisible = true;
} else {
document.querySelector(".scale-in-hor-left").style.display = "none";
leafVisible = false;
}
}
document.querySelector("#menuleaf").addEventListener("click", toggleLeaf);
/* LEAF JAVASCRIPT END */