With the 3D transformation feature of CSS3, we can achieve some novel effects by changing elements in 3D space. This article sharesJQueryThe three-dimensional image slider plug-in uses the 3D transforms (Transform) attribute to achieve a variety of effects.
Tip: to ensure the best results, visit modern browsers such as IE10 +, Chrome, Firefox, and Safari.
<Ul id = "sb-slider" class = "sb-slider"> <li> <a href = "#" target = "_ blank"> </a> <div class = "sb-description">
You can also use a DIV with class "sb-description" to add a description for the image. As shown in this example, you can also add an anchor around the image. Then you can call the plug-in:
$('#sb-slider').slicebox();
Slicebox is equipped with a set of options, you can adjust to achieve different types of effects, each option and role is as follows:
$. Slicebox. defaults = {// direction (v) ertical, (h) orizontal or (r) andom orientation: 'V', // The distance from the element to the view, in pixels: perspective: 1200, // slice, number of cubes cuboidsCount: 5, // random cuboidsRandom: false, // maximum number of cubes maxCuboidsCount: 5, disperseFactor: 0, // hide the color of the slider colorHiddenSides: '#222', sequentialFactor: 150, // animation speed: 600, // transition effect easing: 'weight ', // automatic playback autoplay: false, // rotation interval: 3000, // fade-in and fade-out speed fallbackFadeSpeed: 300, // callback function onBeforeChange: function (position) {return false ;}, onAfterChange: function (position) {return false ;}};
Online Demo of source code download
Articles you may be interested in
- Awesome! Amazing page switching animation effects [Download source code]
- Unlimited creativity! A set of webpage sidebar transition animations [download with source code]
- It's really good! 13 very dynamic page loading animation Effects
- Have you ever seen it? 9 superb check box Effects
- Fashion design! Three special grid loading effects (source code download]
Link to this article: jQuery & CSS3 implements 3D image slider via codrops
Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources
This article from [dream sky (http://www.cnblogs.com/lhb25 )]