Get Oxygen

Forums

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

This topic contains 0 replies, has 1 voice, and was last updated by  Mike 1 week, 3 days ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #17356

    Mike
    Participant

    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.

    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 https://gijsroge.github.io/tilt.js/ )

    3/ edit the myjs.js file and add :

    (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 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 : https://gijsroge.github.io/tilt.js/

Viewing 1 post (of 1 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
© Soflyy 2018
Designed with Oxygen.
Legal
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram