JS Script in Laytheme
-
Hello I am trying to add this js to the theme. I've loaded it in the script and added a canvas tag in the html but it's not working
<script> window.laytheme.on("newpageshown", function(layoutObj, type, obj){ if(type == "main" && obj.id == 311){ // Put all of your js, without document ready inside here const canvasTag = document.querySelector("canvas"); canvasTag.width = window.innerWidth * 2 canvasTag.height= window.innerHeight * 2 canvasTag.style.width = window.innerWidth + "px" canvasTag.style.height = window.innerHeight + "px" const context = canvasTag.getContext("2d") context.scale(2, 2) let aimX = null let aimY = null let currentX = null let currentY = null let i = 0 const images = ["http://emidiobattipaglia.com/wp-content/uploads/2020/09/image1.jpg", "http://emidiobattipaglia.com/wp-content/uploads/2020/09/image2.jpg", "http://emidiobattipaglia.com/wp-content/uploads/2020/09/image3.jpg", "http://emidiobattipaglia.com/wp-content/uploads/2020/09/image4.jpg"].map(src =>{ const image = document.createElement("img") image.src= src return image }) document.addEventListener("mousemove",function() { aimX = event.pageX aimY = event.pageY if (currentX === null) { currentX = event.pageX currentY = event.pageY } }) canvasTag.addEventListener("click",function () { i = i + 1 if(i >= images.length) { i=0 } }) const draw = function() { if(currentX) { if(images[i].complete) { context.drawImage(images[i], currentX -200, currentY -300, 400, 600) } currentX = currentX + (aimX - currentX) * 0.05 currentY = currentY + (aimY - currentY) * 0.05 } requestAnimationFrame(draw) } draw() } }); </script>
-
Dear @emidio
I apologise that a reply to your thread has not come sooner, I wanted to check in and see of you found a solution to your issue?
Also, is it possible to post a link to your website with page in question?
Best wishes & thank you for using Lay Theme.
Sincerely
Richard
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it
Online Users
Forgot your key, lost your files, need a previous Lay Theme or Addon version?
Go to www.laykeymanager.com