jQuery creates image rotation effect

I used JQuery to write a picture rotation effect in the depth direction. I will share it with you here and paste a picture to see what the effect is:

The implementation principle is not complicated. Only the sine function is used in mathematics. The production process is roughly as follows:

(1) First define the radius of the picture rotation

(2 ) The process of image rotation requires the use of the setInterval() method to obtain the angle of the position of each image. The angle will gradually change according to time

(3) According to a mathematical formula: x=R* SIN(deg) can get the position of the picture in the X direction

(4) The transparency setting is actually based on the angle when the picture is rotated. The initial setting is 0 degrees when the picture is directly in front. Whether it is rotated clockwise or counterclockwise, when the picture rotation angle is greater than 0 degrees

and less than 180 degrees, the transparency of the picture will gradually decrease. Here, in order to ensure that the picture is in A small calculation formula is added to prevent it from being completely transparent at 180 degrees. The code will be shown below.

(5) The zoom of the picture is also determined according to the rotation angle of the picture, which I believe is easy to understand.

(6) With the X-axis position information, zoom information, and transparency information of the image, the next step is very simple. Just display all the information through CSS styles.

The style of css will be gradually changed through the setInterval() method.

Let’s take a look at the main code:

var thisleft=-(o.radius)*Math.sin((360/imgnum)*$(this).data("index")*(Math.PI*2/360))+(holderwidth/2);
 var thiszindex=360/imgnum*$(this).data("index")>180?360/imgnum*$(this).data("index")-360:-360/imgnum*$(this).data("index");
 var thisopacity=360/imgnum*$(this).data("index")<=180?(180-360/imgnum*$(this).data("index"))/180*1.2:
  (360/imgnum*$(this).data("index")-180)/180*1.2;

The thiszindex in the second line is the depth information of the picture. I added an index attribute to each picture. Save its index value, and the image will calculate the corresponding depth value based on this information.

Thisopacity in the third line is the transparency information of the image.

Each image will be given the following CSS style:

$(this).css({
  "left":thisleft-(o.width*thisopacity)/2+"px",
  "top":(holderheight/2)-o.width*(thisopacity+1)/4,
  "z-index":thiszindex+180,
  "opacity":(thisopacity+0.2)/1.2,
  "width":o.width*(thisopacity+1)/2,
  "height":o.height*(thisopacity+1)/2
  });

The opacity of the fifth line uses a simple formula to prevent it from being completely full at the deepest level transparent.

In terms of function, I added the function of turning left and right. The principle is to convert the positive and negative values ​​​​of the X-axis information of the picture. The code is as follows:

if(dir=='left'){
  thisleft=-(o.radius)*Math.sin(xx*(Math.PI*2/360))+(holderwidth/2);
  }else{
  thisleft=(o.radius)*Math.sin(xx*(Math.PI*2/360))+(holderwidth/2);
  }

Users can customize the parameters in the entire effect:

$.fn.scroll3d.defaults={
 speed:25,
 radius:100,
 width:200,
 height:150,
 direction:'left'
 }

The complete code of the effect is attached below:

(function($) {
 $.fn.scroll3d = function(options) {
 var opts = $.extend({}, $.fn.scroll3d.defaults, options);
 var $this = $(this);
 var o = $.meta ? $.extend({}, opts, $(this).data()) : opts;
 var radius = o.radius;
 var timer = 0;
 var xx = 0;
 var speed = o.speed;
 var dir = o.direction;
 $(this).hide();
 return this.each(function() {
 var $img = $(this).find('img').css({'position': 'absolute'}), num = 0;
 var imgnum = $img.length;
 var holderwidth = $(this).width(),
 holderheight = $(this).height();
 $img.each(function(i) {
 var imgsrc = $(this).attr("src");
 $(this).data({
 "index": i
 });
 $(this).load(function() {
 ++num;
 if (num == imgnum) {
 $this.show();
 }
 }).attr({
 "src": imgsrc
 });
 var thisleft = -(o.radius) * Math.sin((360 / imgnum) * $(this).data("index") * (Math.PI * 2 / 360)) + (holderwidth / 2);
 var thiszindex = 360 / imgnum * $(this).data("index") > 180 ? 360 / imgnum * $(this).data("index") - 360 : -360 / imgnum * $(this).data("index");
 var thisopacity = 360 / imgnum * $(this).data("index") <= 180 ? (180 - 360 / imgnum * $(this).data("index")) / 180 * 1.2 :
 (360 / imgnum * $(this).data("index") - 180) / 180 * 1.2;
 $(this).attr({
 "nowdeg": (360 / imgnum) * $(this).data("index")
 });
 $(this).css({
 "left": thisleft - (o.width * thisopacity) / 2 + "px",
 "top": (holderheight / 2) - o.width * (thisopacity + 1) / 4,
 "z-index": thiszindex + 180,
 "opacity": (thisopacity + 0.2) / 1.2,
 "width": o.width * (thisopacity + 1) / 2,
 "height": o.height * (thisopacity + 1) / 2
 });
 });
 function scrollimg() {
 $img.each(function() {
 var thisdeg = $(this).attr(&#39;nowdeg&#39;);
 var thisleft;
 xx = thisdeg;
 if (dir == &#39;left&#39;) {
 thisleft = -(o.radius) * Math.sin(xx * (Math.PI * 2 / 360)) + (holderwidth / 2);
 } else {
 thisleft = (o.radius) * Math.sin(xx * (Math.PI * 2 / 360)) + (holderwidth / 2);
 }
 var thiszindex = xx > 180 ? xx - 360 : -xx;
 var thisopacity = xx <= 180 ? (180 - xx) / 180 : ($(this).attr(&#39;nowdeg&#39;) - 180) / 180;
 $(this).css({
 "left": thisleft - (o.width * thisopacity) / 2 + "px",
 "top": (holderheight / 2) - o.width * (thisopacity + 1) / 4,
 "z-index": thiszindex + 180,
 "opacity": (thisopacity + 0.2) / 1.2,
 "width": o.width * (thisopacity + 1) / 2,
 "height": o.height * (thisopacity + 1) / 2
 });
 xx++;
 if (xx > 360) xx = 0;
 $(this).attr({
 "nowdeg": xx
 });
 });
 };
 var tt = setInterval(scrollimg, speed);
 $img.hover(function() {
 clearInterval(tt);
 }, function() {
 tt = setInterval(scrollimg, speed);
 });
 
 });
 };
 $.fn.scroll3d.defaults = {
 speed: 25,
 radius: 300,
 width: 200,
 height: 150,
 direction: &#39;left&#39;
 }
 })(jQuery);

In HTML, you only need to have a DIV containing the picture you need to achieve this effect. For example:

<div class="holder" style="width:550px;height:300px;position:relative;">
 <img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"   / alt="jQuery creates image rotation effect" >
 <img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"   / alt="jQuery creates image rotation effect" >
 <img  src="/static/imghw/default1.png"  data-src="img/3.jpg"  class="lazy"   / alt="jQuery creates image rotation effect" >
 <img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"   / alt="jQuery creates image rotation effect" >
 <img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"   / alt="jQuery creates image rotation effect" >
 </div>

The call of the code can be written like this:

$( '.holder').scroll3d();

The writing is a bit messy, I hope you can forgive me!

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope to support the PHP Chinese website!

For more articles related to jQuery creating image rotation effects, please pay attention to the PHP Chinese website!