Get Oxygen


Home Forums Code How to add a Tilt effect to your images

This topic contains 1 reply, has 2 voices, and was last updated by  Simon Jae 6 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #17356


    The best way to do that is to use your own plugin. Sridhar Katakam has made a plugin that we can customize easily :

    Download, install and activate the plugin.

    1/ Edit the plugin.php file and add these 2 wp_enqueue_script (at the end) :

    function custom_enqueue_files() {
    	// if this is not the front page, abort.
    	// if ( ! is_front_page() ) {
    	// 	return;
    	// }
    	// loads a CSS file in the head.
    	// wp_enqueue_style( 'highlightjs-css', plugin_dir_url(__FILE__) . 'assets/css/style.css' );
    	 * loads JS files in the footer.
    	wp_enqueue_script( 'tilt-js', plugin_dir_url(__FILE__) . 'js/tilt.jquery.min.js', array('jquery'), true );
    	wp_enqueue_script( 'myjs-js', plugin_dir_url(__FILE__) . 'js/myjs.js', array('jquery'), true );

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

    js/myjs.js (create a new empty file)
    js/tilt.jquery.min.js (copy it from )

    3/ edit the myjs.js file and add :

    (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 and that's it.

    Now go to the Oxygen editor, create a gallery, then add the class "tiltfx" to it :

    If you want to add a tilt effect to an image, just add the class "tilt" :

    (you can add it 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 :


    Simon Jae

    Any reason this could not be done in CSS (transform)? :

    div.a {
    transform: rotate(20deg);
    transform: skewY(20deg);
    transform: scaleY(1.5);

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Soflyy is proud to offer you Oxygen, our vision for what visual website design can be. We love it, and we think you will too.
More About Us

Stay up to date with Oxygen

© Soflyy 2018
Designed with Oxygen.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram