Thursday 13 April 2017

Hover effect on button (effect#2)



<html>
<head>
   <title>demo</title>
   <style>
      .outer{position: relative;transition: 2s all ease;max-width: 400px;margin:200px auto;}
      .outer img{width: 100%;}
      .outer:hover .over5{transform: scale(2);transition: 1.5s all ease;opacity: 0.1;}
      .circle{width:150px;height:150px;border-radius: 50%;border:2px solid ;}

      .over1 {
    position: absolute;
    text-align: center;
    z-index: 10;
    background-color: transparent;
    opacity: 1;
    border: 1px solid #b7985b;
    border-radius: 100%;
    animation: pulseplaybutton 4s linear infinite;
    animation-delay:0ms;
    width: 150px;
    height: 150px;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 7px -3px #000;
}
.over2 {
    position: absolute;
    text-align: center;
    z-index: 10;
    background-color: transparent;
    opacity: 1;
    border: 1px solid #b7985b;
    border-radius: 100%;
    animation: pulseplaybutton 4s linear infinite;
    animation-delay: 1000ms;
    width: 150px;
    height: 150px;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 7px -3px #000;
}
.over3 {
    position: absolute;
    text-align: center;
    z-index: 10;
    background-color: transparent;
    opacity: 1;
    border: 1px solid #b7985b;
    border-radius: 100%;
    animation: pulseplaybutton 4s linear infinite;
    animation-delay: 2s;
    width: 150px;
    height: 150px;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 7px -3px #000;
}
.over4 {
    position: absolute;
    text-align: center;
    z-index: 10;
    background-color: transparent;
    opacity: 1;
    border: 1px solid #b7985b;
    border-radius: 100%;
    animation: pulseplaybutton 3s linear infinite;
    animation-delay: 1000ms;
    width: 150px;
    height: 150px;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 7px -3px #000;
}
.over5 {
    position: absolute;
    text-align: center;
    z-index: 10;
    background-color: transparent;
    opacity: 1;
    border: 0.5px solid #b7985b;
    border-radius: 100%;
    width: 150px;
    height: 150px;
    top: 0px;
    left: 0px;
    transition: 0s all ease;
    transform: scale(1);
    box-shadow: 0 0 7px -3px #000;
 }


      @keyframes pulseplaybutton {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; }
  25% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
    opacity: 0.3; }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2); } }
   </style>
</head>
   <body>
      <div class="outer">
         <div class="circle"></div>
         <div class="over over1"></div>
         <div class="over over2"></div>
         <div class="over over3"></div>
         <div class="over over4"></div>
         <div class="over over5"></div>
      </div>
   </body>
</html>
Posted by at No comments:

Wednesday 12 April 2017

Hover effect on image (effect#1)

<html>
<head>
   <title>demo</title>
   <style>
      .outer{position: relative;overflow: hidden;transition: 0.5s all ease;max-width: 400px;margin:0 auto;}
      .outer img{width: 100%;}
      .over{position: absolute;width: 0;height: 0;background-color: rgba(255,255,255,0.5);transition: 0.5s all ease;opacity: 1;}
      .over1{left:0;top: 0;}
      .over2{right:0;top: 0;}
      .over3{left:0;bottom: 0;}
      .over4{right:0;bottom: 0;}
      .outer:hover .over{width: 100%;height: 100%;transition: 0.5s all ease;opacity: 0.5;}
   </style>
</head>
   <body>
      <div class="outer">
         <img src="image/bitcoin1.jpg">
         <div class="over over1"></div>
         <div class="over over2"></div>
         <div class="over over3"></div>
         <div class="over over4"></div>
      </div>
   </body>
</html>
Posted by at No comments:

Thursday 6 April 2017

How to use jquery to toggle class for 1 second every 5 seconds 

setInterval(function(){ 
   // toggle the class every five second
   $('#maindiv').toggleClass('activeclass');  
   setTimeout(function(){
     // toggle back after 1 second
     $('#maindiv').toggleClass('activeclass');  
   },1000);

},5000);
Posted by at No comments:

jQuery scroll to anchor (minus set amount of pixels)

<script>
jQuery(function() {
  jQuery('.tabbing > a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        jQuery('html,body').animate({
          scrollTop: target.offset().top-100
        }, 1000);
        return false;
      }
    }
  });
});
</script>
Posted by at No comments:

Tuesday 4 April 2017

How to change three classes one by one continuously

<script>
    $(document).ready(function(){      
        function show_first(){
            $("#Fire").addClass("fire1");
            $("#Fire").removeClass("fire0");
            setTimeout(show_second,50);
        }
        function show_second(){
            $("#Fire").addClass("fire2");
            $("#Fire").removeClass("fire1");
            setTimeout(show_third,50);
        }
        function show_third(){
            $("#Fire").addClass("fire0");
            $("#Fire").removeClass("fire2");
            setTimeout(show_first,50);
        }
        setTimeout(show_first,50);
    });
</script>
Posted by at No comments:
Subscribe to: Posts (Atom)