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");
	s.addClass("tiltgal");

	$('.tiltgal').tilt({
		scale: 0.8,
		perspective: 200,
		glare: true,
		maxGlare: 0.5,
	});

	$('.tilt').tilt({
		scale: 1.2,
		perspective: 500,
	});	
	
    });
}(jQuery));

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