How to Use tilt.js JQuery CDN | Tilt JS with Example
In this article we will learn how to use tilt js using JQuery CDN . We will see tilt js with example by using tilt js on an image . JQuery makes almost every complicated things much easier .So let's see how can you use tilt js in your project .
You can also read how to use data-time picker using JQuery
You can also read how to use data-time picker using JQuery
Step 1 - CDN Links :
Add these following JQuery CDN links inside your " <head> " tag .
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Step 2 - Custom js File :
Make a custom js file named " tilt.jqyery.js " and link it with your document and copy paste the codes given below inside the " tilt.jquery.js "
<script src="tilt.jquery.js" type="text/javascript"></script>
tilt.jquery.js :
Copy paste the following codes in your tilt.juery.js file
'use strict'; var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; (function (factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['jquery'], factory); } else if ((typeof module === 'undefined' ? 'undefined' : _typeof(module)) === 'object' && module.exports) { // Node/CommonJS module.exports = function (root, jQuery) { if (jQuery === undefined) { // require('jQuery') returns a factory that requires window to // build a jQuery instance, we normalize how we use modules // that require this pattern but the window provided is a noop // if it's defined (how jquery works) if (typeof window !== 'undefined') { jQuery = require('jquery'); } else { jQuery = require('jquery')(root); } } factory(jQuery); return jQuery; }; } else { // Browser globals factory(jQuery); } })(function ($) { $.fn.tilt = function (options) { /** * RequestAnimationFrame */ var requestTick = function requestTick() { if (this.ticking) return; requestAnimationFrame(updateTransforms.bind(this)); this.ticking = true; }; /** * Bind mouse movement evens on instance */ var bindEvents = function bindEvents() { var _this = this; $(this).on('mousemove', mouseMove); $(this).on('mouseenter', mouseEnter); if (this.settings.reset) $(this).on('mouseleave', mouseLeave); if (this.settings.glare) $(window).on('resize', updateGlareSize.bind(_this)); }; /** * Set transition only on mouse leave and mouse enter so it doesn't influence mouse move transforms */ var setTransition = function setTransition() { var _this2 = this; if (this.timeout !== undefined) clearTimeout(this.timeout); $(this).css({ 'transition': this.settings.speed + 'ms ' + this.settings.easing }); if (this.settings.glare) this.glareElement.css({ 'transition': 'opacity ' + this.settings.speed + 'ms ' + this.settings.easing }); this.timeout = setTimeout(function () { $(_this2).css({ 'transition': '' }); if (_this2.settings.glare) _this2.glareElement.css({ 'transition': '' }); }, this.settings.speed); }; /** * When user mouse enters tilt element */ var mouseEnter = function mouseEnter(event) { this.ticking = false; $(this).css({ 'will-change': 'transform' }); setTransition.call(this); // Trigger change event $(this).trigger("tilt.mouseEnter"); }; /** * Return the x,y position of the mouse on the tilt element * @returns {{x: *, y: *}} */ var getMousePositions = function getMousePositions(event) { if (typeof event === "undefined") { event = { pageX: $(this).offset().left + $(this).outerWidth() / 2, pageY: $(this).offset().top + $(this).outerHeight() / 2 }; } return { x: event.pageX, y: event.pageY }; }; /** * When user mouse moves over the tilt element */ var mouseMove = function mouseMove(event) { this.mousePositions = getMousePositions(event); requestTick.call(this); }; /** * When user mouse leaves tilt element */ var mouseLeave = function mouseLeave() { setTransition.call(this); this.reset = true; requestTick.call(this); // Trigger change event $(this).trigger("tilt.mouseLeave"); }; /** * Get tilt values * * @returns {{x: tilt value, y: tilt value}} */ var getValues = function getValues() { var width = $(this).outerWidth(); var height = $(this).outerHeight(); var left = $(this).offset().left; var top = $(this).offset().top; var percentageX = (this.mousePositions.x - left) / width; var percentageY = (this.mousePositions.y - top) / height; // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value var tiltX = (this.settings.maxTilt / 2 - percentageX * this.settings.maxTilt).toFixed(2); var tiltY = (percentageY * this.settings.maxTilt - this.settings.maxTilt / 2).toFixed(2); // angle var angle = Math.atan2(this.mousePositions.x - (left + width / 2), -(this.mousePositions.y - (top + height / 2))) * (180 / Math.PI); // Return x & y tilt values return { tiltX: tiltX, tiltY: tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle: angle }; }; /** * Update tilt transforms on mousemove */ var updateTransforms = function updateTransforms() { this.transforms = getValues.call(this); if (this.reset) { this.reset = false; $(this).css('transform', 'perspective(' + this.settings.perspective + 'px) rotateX(0deg) rotateY(0deg)'); // Rotate glare if enabled if (this.settings.glare) { this.glareElement.css('transform', 'rotate(180deg) translate(-50%, -50%)'); this.glareElement.css('opacity', '0'); } return; } else { $(this).css('transform', 'perspective(' + this.settings.perspective + 'px) rotateX(' + (this.settings.disableAxis === 'x' ? 0 : this.transforms.tiltY) + 'deg) rotateY(' + (this.settings.disableAxis === 'y' ? 0 : this.transforms.tiltX) + 'deg) scale3d(' + this.settings.scale + ',' + this.settings.scale + ',' + this.settings.scale + ')'); // Rotate glare if enabled if (this.settings.glare) { this.glareElement.css('transform', 'rotate(' + this.transforms.angle + 'deg) translate(-50%, -50%)'); this.glareElement.css('opacity', '' + this.transforms.percentageY * this.settings.maxGlare / 100); } } // Trigger change event $(this).trigger("change", [this.transforms]); this.ticking = false; }; /** * Prepare elements */ var prepareGlare = function prepareGlare() { var glarePrerender = this.settings.glarePrerender; // If option pre-render is enabled we assume all html/css is present for an optimal glare effect. if (!glarePrerender) // Create glare element $(this).append('<div class="js-tilt-glare"><div class="js-tilt-glare-inner"></div></div>'); // Store glare selector if glare is enabled this.glareElementWrapper = $(this).find(".js-tilt-glare"); this.glareElement = $(this).find(".js-tilt-glare-inner"); // Remember? We assume all css is already set, so just return if (glarePrerender) return; // Abstracted re-usable glare styles var stretch = { 'position': 'absolute', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' }; // Style glare wrapper this.glareElementWrapper.css(stretch).css({ 'overflow': 'hidden', 'pointer-events': 'none' }); // Style glare element this.glareElement.css({ 'position': 'absolute', 'top': '50%', 'left': '50%', 'background-image': 'linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)', 'width': '' + $(this).outerWidth() * 2, 'height': '' + $(this).outerWidth() * 2, 'transform': 'rotate(180deg) translate(-50%, -50%)', 'transform-origin': '0% 0%', 'opacity': '0' }); }; /** * Update glare on resize */ var updateGlareSize = function updateGlareSize() { this.glareElement.css({ 'width': '' + $(this).outerWidth() * 2, 'height': '' + $(this).outerWidth() * 2 }); }; /** * Public methods */ $.fn.tilt.destroy = function () { $(this).each(function () { $(this).find('.js-tilt-glare').remove(); $(this).css({ 'will-change': '', 'transform': '' }); $(this).off('mousemove mouseenter mouseleave'); }); }; $.fn.tilt.getValues = function () { var results = []; $(this).each(function () { this.mousePositions = getMousePositions.call(this); results.push(getValues.call(this)); }); return results; }; $.fn.tilt.reset = function () { $(this).each(function () { var _this3 = this; this.mousePositions = getMousePositions.call(this); this.settings = $(this).data('settings'); mouseLeave.call(this); setTimeout(function () { _this3.reset = false; }, this.settings.transition); }); }; /** * Loop every instance */ return this.each(function () { var _this4 = this; /** * Default settings merged with user settings * Can be set trough data attributes or as parameter. * @type {*} */ this.settings = $.extend({ maxTilt: $(this).is('[data-tilt-max]') ? $(this).data('tilt-max') : 20, perspective: $(this).is('[data-tilt-perspective]') ? $(this).data('tilt-perspective') : 300, easing: $(this).is('[data-tilt-easing]') ? $(this).data('tilt-easing') : 'cubic-bezier(.03,.98,.52,.99)', scale: $(this).is('[data-tilt-scale]') ? $(this).data('tilt-scale') : '1', speed: $(this).is('[data-tilt-speed]') ? $(this).data('tilt-speed') : '400', transition: $(this).is('[data-tilt-transition]') ? $(this).data('tilt-transition') : true, disableAxis: $(this).is('[data-tilt-disable-axis]') ? $(this).data('tilt-disable-axis') : null, axis: $(this).is('[data-tilt-axis]') ? $(this).data('tilt-axis') : null, reset: $(this).is('[data-tilt-reset]') ? $(this).data('tilt-reset') : true, glare: $(this).is('[data-tilt-glare]') ? $(this).data('tilt-glare') : false, maxGlare: $(this).is('[data-tilt-maxglare]') ? $(this).data('tilt-maxglare') : 1 }, options); // Add deprecation warning & set disableAxis to deprecated axis setting if (this.settings.axis !== null) { console.warn('Tilt.js: the axis setting has been renamed to disableAxis. See https://github.com/gijsroge/tilt.js/pull/26 for more information'); this.settings.disableAxis = this.settings.axis; } this.init = function () { // Store settings $(_this4).data('settings', _this4.settings); // Prepare element if (_this4.settings.glare) prepareGlare.call(_this4); // Bind events bindEvents.call(_this4); }; // Init this.init(); }); }; /** * Auto load */ $('[data-tilt]').tilt(); return true; }); //# sourceMappingURL=tilt.jquery.js.map
Step 3 - Link your Element :
The final step is to give a class attribute on your html element to use tilt effect on it and add the following script code just before the closing " </body> " tag . By using this script code you will be able to controll the tilt effect on your html element .
<div class="element" data-tilt></div>
<script> $(document).ready(function(){ $('.tilt').tilt({ maxTilt:25, perspective:1000, easing:"cubic-bezier(.03,.98,.52,.99)", scale:1.1, speed:300, transition:true, disableAxis:null, reset:true, glare:false, maxGlare:1 }) }) </script>
Example :
<!DOCTYPE html> <html> <head> <title> Tilt Js Example </title> <!-- Bootstrap css CDN --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous"> <!-- Bootstrap JS CDN --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script> <!-- Tilt js CDN --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Make a custom Js file named tilt.jquery.js and link it --> <script src="tilt.jquery.js" type="text/javascript"></script> </head> <body> <div class="row mt-5"> <div class="col-12 text-center"> <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="tilt" height="500" width="400" data-tilt> </div> </div> <!-- Tilt Controls --> <script> $(document).ready(function(){ $('.tilt').tilt({ maxTilt:25, perspective:1000, easing:"cubic-bezier(.03,.98,.52,.99)", scale:1.1, speed:300, transition:true, disableAxis:null, reset:true, glare:false, maxGlare:1 }) }) </script> </body> </html>
Output :
Thank you for reading this article 😊
For any query do not hesitate to comment 💬
