Forum Discussion
3d Parallax Effect using Javascript
Thank you Phil for your answer!
I used this code in the trigger (-When the timeline starts on the slide), and I did not download any additional file in story_content, or change the HTML file.
var myElement = document.querySelectorAll("[data-acc-text~='rec']");
var myCode = function() {
$('.myElement').tilt({
maxTilt:25,
perspective:1000,
easing:"cubic-bezier(.03,.98,.52,.99)",
scale:1.1,
speed:300,
transition:true,
disableAxis:null,
reset:true,
glare:false,
maxGlare:1
})
}
if (window.$ != null) { // If jQuery has already loaded, run myCode.
myCode();
} else { // Else, load jQuery and then run myCode.
var jQueryLoader = document.createElement("script");
jQueryLoader.src = "https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js";
jQueryLoader.onload = function() {
jQueryLoader.onload = null;
myCode();
}
document.head.appendChild(jQueryLoader);
}
I'm unsure whether I should choose a specific element in my slide, such as a rectangle with the accessibility attribute "rec.", or not. I find the specifications of .tilt function in another website. Since my JavaScript knowledge is limited, I could really use some assistance. Thank you in advance for any guidance!