Trying to implement the code from this Codepen http://codepen.io/eternalminerals/pen/qdGvMo on my WordPress website at
I understand that since WordPress is in no-conflict mode, I need to change $ to jQuery. I have made this adjustment and ensured that the script is in the header using a JS adder plugin called css-javascript-toolbox. However, the functionality is still not working as expected compared to the Codepen. I tested the Codepen without JavaScript and it behaves similarly to the WordPress page, indicating that the issue lies within the JavaScript code.
<script type='text/javascript'>
StarWars = (function() {
/*
* Constructor
*/
function StarWars(args) {
// Context wrapper
this.el = jQuery(args.el);
// Audio for opening crawl
this.audio = this.el.find('audio').get(0);
// Initiate animation
this.start = this.el.find('.start');
// Animation container
this.animation = this.el.find('.animation');
// Reset animation and display start screen
this.reset();
// Start animation on click
this.start.bind('click', jQuery.proxy(function() {
this.start.hide();
this.audio.play();
this.el.append(this.animation);
}, this));
// Reset animation and show start screen
jQuery(this.audio).bind('ended', jQuery.proxy(function() {
this.audio.currentTime = 0;
this.reset();
}, this));
}
/*
* Resets the animation and shows the start screen.
*/
StarWars.prototype.reset = function() {
this.start.show();
this.cloned = this.animation.clone(true);
this.animation.remove();
this.animation = this.cloned;
};
return StarWars;
})();
new StarWars({
el : '.starwars'
});
</script>
No javascript console errors are displayed on my website page, but it seems like there is no JavaScript controlling the HTML elements like in the Codepen. Any assistance on resolving this issue would be highly appreciated. Thank you!