I've added some JavaScript files into my assets folder and linked them in a new HTML file I created under templates. The scripts seem to be linking correctly with the HTML file when I view the page source, but they do not run when I open the page. However, they do work from the local file I have saved on my computer so I know there are no errors in the code.
I've tried linking them in theme.liquid, placing them in the <head> section of the HTML, attempting different ways of linking the sources, and added defer or async tags but still no luck.
I thought maybe it was an issue with the timing in loading the page, whereas the JavaScript files are being loaded prior to the HTML for some reason, but I do not know how to add that into the code if that is the case.
HTML (both enterwebsiteapp.js and cloudflare.com sources seem to be linked properly when I check the 'view page source' but do not work when I open the page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Enter Website Page</title>
<link rel='stylesheet' type='text/css' media='screen' href='{{ 'enterwebsitestyle.css' | asset_url }}'>
</head>
<!-- ENTER WEBSITE BUTTON -->
<body>
<header class="hide">
<nav>
<a href="https://freakthecompany.com/"><img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/logo.png?v=1699035027" alt="enter website" class="button" width=200px height=200px></a>
</nav>
</header>
<!-- BACKGROUND IMAGES (KEEP IN SAME ORDER AS LAYERS OF PHOTOSHOP FILE FROM BOTTOM TO TOP) -->
<main>
<div class="vignette hide"></div>
<img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/background.png?v=1699035034" data-speedx="0.2" data-speedy="0.26" data-speedz="0" data-rotation="0" data-distance="-200" class="parallax backgroundimage"width=200px height=200px>
<img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/eye.png?v=1699035027" data-speedx="0.024" data-speedy="0.01" data-speedz="0.53" data-rotation="0.2" data-distance="-300" class="parallax eye"width=200px height=200px>
<img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/stage.png?v=1699035028" data-speedx="0.02" data-speedy="0.06" data-speedz="0.08" data-rotation="0.03" data-distance="2000" class="parallax stage"width=200px height=200px>
<img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/people_shadow.png?v=1699035027" data-speedx="0.04" data-speedy="0.08" data-speedz="0.12" data-rotation="0.05" data-distance="2300" class="parallax peopleshadow"width=200px height=200px>
<img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_1.png?v=1699035027" data-speedx="0.070" data-speedy="0.1" data-speedz="0.03" data-rotation="0.06" data-distance="2600" class="parallax layer1"width=200px height=200px>
<img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_2.png?v=1699035027" data-speedx="0.065" data-speedy="0.07" data-speedz="0.05" data-rotation="0.08" data-distance="2800" class="parallax layer2"width=200px height=200px>
<img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_3.png?v=1699035028" data-speedx="0.065" data-speedy="0.10" data-speedz="0.07" data-rotation="0.08" data-distance="3000" class="parallax layer3"width=200px height=200px>
<img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_4.png?v=1699035028" data-speedx="0.065" data-speedy="0.11" data-speedz="0.10" data-rotation="0.08" data-distance="3200" class="parallax layer4"width=200px height=200px>
<img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_5.png?v=1699035035" data-speedx="0.065" data-speedy="0.13" data-speedz="0.12" data-rotation="0" data-distance="3500" class="parallax layer5"width=200px height=200px>
<img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_6.png?v=1699035028" data-speedx="0.059" data-speedy="0.2" data-speedz="0.06" data-rotation="0.12" data-distance="3800" class="parallax layer6"width=200px height=200px>
<img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_7.png?v=1699035028" data-speedx="0.059" data-speedy="0.12" data-speedz="0.12" data-rotation="0.15" data-distance="4000" class="parallax layer7"width=200px height=200px>
<img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_8.png?v=1699035028" data-speedx="0.065" data-speedy="0.15" data-speedz="0.10" data-rotation="0.1" data-distance="4200" class="parallax layer8"width=200px height=200px>
<img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_9.png?v=1699035028" data-speedx="0.06" data-speedy="0.13" data-speedz="0.11" data-rotation="0.17" data-distance="4400" class="parallax layer9"width=200px height=200px>
<img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/black_shadow.png?v=1699035027" class="shadow hide"width=200px height=200px> <!-- does not have parallax class as it needs to stay static -->
</main>
<script type='text/javascript' ref='{{ 'enterwebsiteapp.js' | asset_url }}' defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js" defer></script>
</body>
</html>
JavaScript of enterwebsiteapp.js
var parallax_el = document.querySelectorAll(".parallax");
var main = document.querySelector("main");
var splashScreen = document.getElementById('splashScreen');
splashScreen.addEventListener('click', function () {
splashScreen.style.opacity = 0;
setTimeout(function () {
splashScreen.classList.add('hidden');
}, 610);
});
// PARALLAX EFFECT
var xValue = 0,
yValue = 0;
var rotateDegree = 0;
function update(cursorPosition) {
parallax_el.forEach(function (el) {
var speedx = el.dataset.speedx;
var speedy = el.dataset.speedy;
var speedz = el.dataset.speedz;
var rotateSpeed = el.dataset.rotation;
var isInLeft = parseFloat(getComputedStyle(el).left) < window.innerWidth / 2 ? 1 : -1;
var zValue = (cursorPosition - parseFloat(getComputedStyle(el).left)) * isInLeft * 0.1;
el.style.transform =
'perspective(2300px) translateZ(' + zValue * speedz + 'px) ' +
'rotateY(' + rotateDegree * rotateSpeed + 'deg) ' +
'translateX(calc(-50% + ' + -xValue * speedx + 'px)) ' +
'translateY(calc(-50% + ' + yValue * speedy + 'px))';
});
}
update(0);
window.addEventListener("mousemove", function (e) {
xValue = e.clientX - window.innerWidth / 2;
yValue = e.clientY - window.innerHeight / 2;
rotateDegree = xValue / (window.innerWidth / 2) * 20;
update(e.clientX);
});
// SCENERY WIDTH ADJUSTMENT
/*
if (window.innerWidth >= 725) {
main.style.maxHeight = window.innerWidth * 0.6 + "px";
} else {
main.style.maxHeight = window.innerWidth * 1.6 + "px";
}
*/
// GSAP ANIMATION SCENERY
Array.prototype.slice.call(parallax_el).filter(function (el) {
return !el.classList.contains("eye");
}).forEach(function (el) {
var timeline = gsap.timeline();
timeline.from(el, { top: el.offsetHeight / 2 + +el.dataset.distance + "px", duration: 3.2, ease: "power3.out" });
});
Any help would be greatly appreciated, thank you!
