Based on jQuery and CSS3, 3D rotating slide effects of cool images, jquerycss3

Last Update:2015-05-07 Source: Internet

Author: User

Tags in degrees

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Based on jQuery and CSS3, 3D rotating slide effects of cool images, jquerycss3

Download Online Preview source code

IPresenter is a very cool jQuery and CSS3 3D rotating slide special effect plug-in. You can use it to create product presentations, image galleries, or various slides and slideshow effects. This slide plug-in has the following features:

Compatible with jQuery.
Highly flexible and customizable.
Flexible user interface design.
Multiple instances are allowed on a single HTML page.
You can customize the easing effect of each slider.
Multi-language support.
It can work normally on iOS and Android.
You can choose automatic playback mode to stop the slides when you hover your mouse over them.
It is very easy to adjust the size.
Compatible with external fonts (such as Google fonts ).
A progress bar for pre-loading is displayed.
Supports keyboard control.
Supports mobile touch screens.
You can use CSS to customize styles.
The configuration is easy to use.
The effect of transition is not limited.
You can customize the transition configuration and the transition timing function (easing ).
You can use the Cubic-bezr function.
Customizes the time of each slide.
Displays a thumbnail with tooltip.
You can navigate through thumbnails or dot navigation buttons.
It can work in all modern browsers that support CSS3.

Method of use: HTML Structure

The HTML structure of the slide can use a simple HTML5 structure:

<!DOCTYPE html>
With this slide plug-in, we can create smooth transition effects for various slide switching. Plug-insdivSet differentdataPropertiesdataThe property is converted to the real CSS 3 animation effect. Below are all availabledataAttribute:

 
 
  Data-easing: easing timing function (you can also receive cubic-bezr functions ). 
    
    Linear 
    Bytes 
    Callback-in 
    Timed-out 
    Memory-in-out 
    Outbound-out-in 
    EaseInQuad 
    EaseOutQuad 
    EaseInOutQuad 
    EaseInCubic 
    EaseOutCubic 
    EaseInOutCubic 
    EaseInQuart 
    EaseOutQuart 
    EaseInOutQuart 
    EaseInQuint 
    EaseOutQuint 
    EaseInOutQuint 
    EaseInSine 
    EaseOutSine 
    EaseInOutSine 
    EaseInExpo 
    EaseOutExpo 
    EaseInOutExpo 
    EaseInCirc 
    EaseOutCirc 
    EaseInOutCirc 
    EaseInBack 
    EaseOutBack 
    EaseInOutBack 
   
 
  Data-pausetime: How long will slide be displayed.
 
  Data-x, data-y, and data-z: Move the slides in 3D on the screen.
 
  Data-rotate, data-rotate-x, data-rotate-y, data-rotate-z: rotate elements along the specified axis, in degrees.
 
  Data-scale: Zoom In or out the slides.
 
  Data-thumbnail: the url of the thumbnail.

 
The sample code is as follows:
<!-- The first slide retains its default position. We could omit the data attributes --><div id="intro" class="step" data-x="0" data-y="0">        CSS style
This slide plug-in contains two main CSS style files, one isstyles.cssThis style table is used to generate general styles of pages, such as fonts and links. The second style table corresponding to each demo is divideddemo1.cssAnddemo2.cssTo specify the style for the two demos:
/* === Preloader Section === */      div#ipresenter div#preloader {        some styles    }      div#ipresenter div#preloader div {        some styles    }  /* === Steps Section === */          div#ipresenter div.step {        some styles    }      /* === Control Navigation Section === */      /* = General = */    a.ipresenter_stepsNav {        some styles    }      /* = Next Button = */    a#ipresenter_nextStep {        some styles    }      /* = Previous Button = */    a#ipresenter_prevStep {        some styles    }      /* = Pagination Buttons Container = */    div.ipresenter-controlNav {        some styles    }      /* = Pagination Previous Buttons = */    div.ipresenter-controlNav a.ipresenter-controlPrevNav {        some styles    }      /* = Pagination Next Button = */    div.ipresenter-controlNav a.ipresenter-controlNextNav {        some styles    }      /* = Pagination Number Button = */    div.ipresenter-controlNav a.ipresenter-control {        some styles    }      /* = Pagination Tooltip = */    div.ipresenter-controlNav div.ipresenter-tooltip {        some styles    }      div.ipresenter-controlNav div.ipresenter-tooltip div {        some styles    }      div.ipresenter-controlNav div.ipresenter-tooltip img {        some styles    }      /* === Playback === */      /* = General = */    #ipresenter-timer {        some styles    }      /* = When its playing = */    #ipresenter-timer.play {        some styles    }      /* = When its paused = */    #ipresenter-timer.pause {        some styles    }     
All available parameters of the slide plug-in are listed below:
$(document).ready(function(){    $('#ipresenter').iPresenter({        easing: 'ease-in-out', // Easing timing (custom cubic-bezier function is acceptable)        autoPlay: true, // To Enable or Disable the autoplay        replay: true, // To repeat all steps from beginning        animSpeed: 1000, // To set the speed of the switch animation (Microsecond)        pauseTime: 5000, // To set the time of the pause between steps (Microsecond)        directionNav: true, // Next & Previous navigation        directionNavHoverOpacity: 0.6, // Fade on hover        controlNav: true, // 1,2,3,4... navigation        controlNavNextPrev: true, // previous,next navigation        controlNavHoverOpacity: 0.6, // Navigation fade on hover        controlNavThumbs: false, // Show thumbs navigation        controlNavTooltip: true, // Show thumbs Tooltip        keyboardNav: true, // To Enable or Disable the keyboard navigation        pauseOnHover: false, // To Enable or Disable the slideshow when mouse come over it        itemsOpacity: 0.4, // To set the value of the opacity for the steps        randomStart: false, // Start on a random step        startStep: 0, // Set starting Step (0 index)        timer: 'Pie', // Timer style: "Pie", "360Bar" or "Bar"        timerBg: '#000', // Timer background        timerColor: '#EEE', // Timer color        timerOpacity: 0.5, // Timer opacity        timerDiameter: 30, // Timer diameter        timerPadding: 4, // Timer padding        timerStroke: 3, // Timer stroke width        timerBarStroke: 1, // Timer Bar stroke width        timerBarStrokeColor: '#EEE', // Timer Bar stroke color        timerBarStrokeStyle: 'solid', // Timer Bar stroke style        timerPosition: 'top-right', // Timer position (top,middle,bottom)-(left-center-right) set like: 'middle-center'        nextLabel: "Next", // To set the string of the next button (Multilanguage use)        previousLabel: "Previous", // To set the string of the previous button (Multilanguage use)        playLabel: "Play", // To set the string of the play button (Multilanguage use)        pauseLabel: "Pause", // To set the string of the pause button (Multilanguage use)        onBeforeChange: function(){}, // Triggers before a step change        onAfterChange: function(){}, // Triggers after a step change        onLastStep: function(){}, // Triggers when last step is shown        onAfterLoad: function(){}, // Triggers when slider has loaded        onPause: function(){}, // Triggers when slider has paused        onPlay: function(){} // Triggers when slider has played    });});           
Via: http://www.w2bc.com/Article/36204

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More