Last update: July 29, 2018

How to add a Tilt effect to your images

The best way to do that is to use your own plugin. Sridhar Katakam has made a plugin that we can customize easily : https://github.com/srikat/my-custom-functionality Download, install and activate the plugin.

Step 1

Edit the plugin.php file and add these two wp_enqueue_script :

add_action( 'wp_enqueue_scripts', 'custom_enqueue_files' );

function custom_enqueue_files() {
	wp_enqueue_script( 'tilt-js', plugin_dir_url( __FILE__ ) . 'assets/js/tilt.jquery.min.js', array('jquery'), '', true );
	wp_enqueue_script( 'supajs-js', plugin_dir_url( __FILE__ ) . 'assets/js/myjs.js', '', '', true );	

Step 2

In the same folder as the plugin ( /wp-content/plugins/my-custom-functionality-master ) add these 2 files :

assets/js/myjs.js (create a new empty file)
assets/js/tilt.jquery.min.js (copy it from https://gijsroge.github.io/tilt.js/ )

Step 3

Edit the myjs.js file and add the following :

(function($) {
    'use strict';
    $(document).on('ready', function() {

	var s = $(".tiltfx .oxy-gallery-item");

		scale: 0.8,
		perspective: 200,
		glare: true,
		maxGlare: 0.5,

		scale: 1.2,
		perspective: 500,

Save the file and that's it. Now go to the Oxygen editor, create a gallery and add the class "tiltfx" to it :

If you want to add a tilt effect to an image, just add the class "tilt" (move over the following image to see the effect) :
You can add this class to whatever you want, a section, a div, a heading...

You can also change the option for the tilt effects (the scale, the perspective and so on). More info here : https://gijsroge.github.io/