jQuery addClass example

Change class name on click in jQuery

by Lalji Tadhani

HTML

<div class="block">
      <div class="cerchio_uno">
          <div class="inner"></div>
          
        </div>
        <div class="sfondo"></div>
          <div class="cerchio">
            <div class="inner"></div>
          </div>
        </div>

CSS

body {
        background: #fff;
        font-family: "Open Sans", serif;
        margin:0;
        padding:0;
        overflow: hidden;
        
      }
.cerchio {
        margin: auto;
               /* border: solid 1px rgba(255, 255, 255,0.15);*/
                border-radius: 50%;
                width: 200px;
                height: 200px;
                overflow: hidden;
               /* display: none;*/
               border: 1px solid #fff;
                
        
        
       
        }
.cerchio_uno {
        margin: auto;
               /* border: solid 1px rgba(255, 255, 255,0.15);*/
                border-radius: 50%;
                width: 400px;
                height: 400px;
                overflow: hidden;
                margin-top:0px;
                background: rgba(0,0,0, 0.2);
       /* display: none;*/
        
       
        }
.cerchio_uno .inner{
 
              transition: all 0.5s ease;
              width:400px;
              height:400px;
             
}
.cerchio .inner{
  
              transition: all 0.5s ease;
              width:200px;
              height:200px;
             
}
.sfondo{
  background:#fff;
  width: 400px;
                height: 400px;
                background:#000;
                opacity:0.25;
                margin-top:0px;
                border-radius:50%;
}
.block{
  background:lightgray;
  zoom: 1;
height: 100vh;
display: table;
width: 100%;
background: url(https://linkbookmarking.com/wp-content/uploads/2018/08/high_quality_wallpaper_HD_1080_IDS_1160538-1200x750.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        /*display:none;*/
    }

JavaScript

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
    return this;
}

$.fn.animateRotate = function(startAngle, endAngle, duration, easing, complete){
    return this.each(function(){
        var elem = $(this);

        $({deg: startAngle}).animate({deg: endAngle}, {
            duration: duration,
            easing: easing,
            step: function(now){
                elem.css({
                  '-moz-transform':'rotate('+now+'deg)',
                  '-webkit-transform':'rotate('+now+'deg)',
                  '-o-transform':'rotate('+now+'deg)',
                  '-ms-transform':'rotate('+now+'deg)',
                  'transform':'rotate('+now+'deg)'
                });
            },
            complete: complete || $.noop
        });
    });
};

$('.cerchio').center();
    var p = 60;
    
    $('.cerchio_uno').center();
    $('.sfondo').center();
     $('.cerchio').fadeIn(300).animateRotate(-90,0,600,'swing');
    $('.cerchio_uno').fadeIn(300).animateRotate(-110,0,700,'swing');
    $('.block').fadeIn(300).animateRotate(-120,0,700,'swing');