3D Tilt on Images

Site URL: https://dinosaur-dogfish-arl4.squarespace.com/work

Hello!

My site PW is "food"

I've found this super simple 3D tilt effect: http://gijsroge.github.io/tilt.js/

I want to use the most basic version of it and apply it to my images for my portfolio. I'm using this tool to identify my ID's, but I can't seem to get it to work. Any help would be greatly appreciated!

There will be a few steps to do this.

• This particular js file isn't available on a CDN (content delivery network), so you'll need to download it and upload it yourself to your own site. as its a javascript file the best way to do this is to add a link somewhere on your page and upload the file from there.
• You'll then need to inject the script tag into your website using the javascript source files new location (something like "/s/vanilla-tilt.js"). the way that this library is written (both the jQuery and the vanilla js version) is that they recommend you insert it at the end, so use Settings > Advanced > Code Injection and inject it into the footer.
  • NOTE: if you download the minified version that's vanilla-tit.min.js, you'll need to rename it as Squarespace doesn't like files with multiple dots in, so just go for vanilla-tiltmin.js. 
• The library by default looks for things to tilt declaratively  so you'll need to put the things you want to tilt inside code blocks so you can mark the div up with the "data-tilt" attribute(s).
• If you want to use existing elements to tilt then you'll need to find the relevant IDs and write some code to tilt those elements.

example for doing it declaratively in a code block

<div data-tilt style="text-align:center; background-color:red; color:white; padding:15px; width:300px;">
  Tilt Me
</div>

example for doing it imperatively with code block (using vanilla tilt, I would recommend that over the jquery one)

<div id="someid" style="text-align:center; background-color:red; color:white; padding:15px; width:300px;">
  Tilt Me
</div>
<script>
  document.addEventListener("DOMContentLoaded", (e)=> {
    VanillaTilt.init(document.querySelector("#someid"), {
		max: 25,
		speed: 400
	});  
  })
</script>

@iamdavehart I can't thank you enough for the thorough response! I'm going to try this out today 🙂 You da real MVP my friend 🙌