Having trouble getting my JavaScript to work

<!DOCTYPE html>
<html lang="en-US">

<head>

    <meta charset="utf-8">
    <title>Tastings</title>
    <link rel="stylesheet" href="tastings.css">
    <script src="TiltHoverEffects-master/js/anime.min.js"></script>
 <section class="imgfloat">
        
    <script>
    $(document)new TiltFx(el, [options]);
        
        var options = {
	movement: {

		imgWrapper : {
			translation : {x: 10, y: 10, z: 30},
			rotation : {x: 0, y: -10, z: 0},
			reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
		},
		
		lines : {
			translation : {x: 10, y: 10, z: [0,70]},
			rotation : {x: 0, y: 0, z: -2},
			reverseAnimation : {duration : 2000, easing : 'easeOutExpo'}
		},
		
		caption : {
			rotation : {x: 0, y: 0, z: 2},
			reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
		},
		
		overlay : {
			translation : {x: 10, y: -10, z: 0},
			rotation : {x: 0, y: 0, z: 2},
			reverseAnimation : {duration : 2000, easing : 'easeOutExpo'}
		},
		
		shine : {
			translation : {x: 100, y: 100, z: 0},
			reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
		}}}
        
    </script>
        
    <a href="#" class="tilter tilter--2">
	<figure class="tilter__figure">
		<img class="tilter__image" src="Images/womanwithlogo.png" alt="woman biting a cake" />
		<div class="tilter__deco tilter__deco--shine"><div></div></div>
		<div class="tilter__deco tilter__deco--overlay"></div>
		<figcaption class="tilter__caption">
			<h3 class="tilter__title">Schedule Now!</h3>
			<p class="tilter__description">Spots Fill Up Fast!</p>
		</figcaption>
		<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
			<path d="M20.5,20.5h260v375h-260V20.5z" />
		</svg>
	</figure>
</a>
        
    </section>
.imgfloat {
    float: right;
    padding-right: 200px;
    padding-bottom: 20px;
    position: relative;
}
.tilter {
	position: relative;
	display: block;
	flex: none;
	width: 100%;
	height: 100%;
	margin: 1.5em 2.5em;
	color: #fff;
	perspective: 1000px;
}

.tilter * {
	pointer-events: none;
}

.tilter:hover,
.tilter:focus {
	color: #fff;
	outline: none;
}

.tilter__figure,
.tilter__image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.tilter__figure > * {
	transform: translateZ(0px);
}

.tilter__figure {
	position: relative;
}

.tilter__figure::before {
	content: '';
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	box-shadow: 0 30px 20px rgba(35,32,39,0.5);
}

.tilter__deco {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.tilter__deco--overlay {
	background-image: linear-gradient(45deg, rgba(227, 167, 192, 0.2), rgba(222, 61, 128, 0.2), rgba(182, 6, 79, 0.2));
}

.tilter__deco--shine div {
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
}

.tilter__deco--lines {
	fill: none;
	stroke: #fff;
    width: 400px;
	stroke-width: 2px;
}

.tilter__caption {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 4em;
}

.tilter__title {
    text-shadow: 4px 2px 4px rgba(30, 26, 28, 1);
	font-family: "playfair display";
	font-size: 40px;
	font-weight: normal;
	line-height: 1;
	margin: 0;
}

.tilter__description {
    text-shadow: 4px 2px 4px rgba(30, 26, 28, 1);
    font-family: "playfair display";
	font-size: 18px;
	margin: 1em 0 0 0;
	letter-spacing: 0.15em;
}

This is all of my code for an image that is supposed to tilt and move with the mouse when you hover over it… However, all it does is scroll to the top when it’s clicked… I’ve placed the source in the HTML and called to it… I don’t understand why it’s not working… any thoughts based on the code?

It doesn’t tilt because of the JS parser error => see JS error console.

How do I fix that?

You set the TiltFx object up as documented.

I’m 100% new to this so if you could dumb it down for me, that’d be great… I don’t even know what that means

there is certainly a website, where you got the idea to use TiltFx. And there should be a link to the TiltFx project page. And there you should find its documentation.

I got the idea here… So do I download the source and add it to my folder then call it that way? Or do I link it straight to the url like you do when you add the script source to your html if you just go straight to the Google library?

You could do it either way.

There it says:

new TiltFx(el, [options]);

nothing before on that line. Mind though that the [] here mean “this parameter is optional”, i.e. you can call it as new TiltFx(el) (using the default options) or new TiltFx(el, options) (specifying the options as you like it).

Also note that if you specify option, you must do that before you create the object (otherwise they are ignored because they don’t exist when TiltFx reads them–there is a heading between the two examples on that page!). Additionally, the option list given is the default options, if you want to use them as is there is no need to re-define them.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.