LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS
#mouse {
  border: 0.2em solid #eee;
  border-radius: 1.5em;
  display: block;
  height: 3em;
  margin: 0px auto;
  position: relative;
  width: 1.5em;
}
#mouse::before {
  content: '';
  display: block;
  width: 0.2em;
  height: 0.2em;
  border-radius: 0.2em;
  background: #eee;
  opacity: 1;
  position: absolute;
  left: 0.65em;
  top: 0.4em;
  -webkit-transition: all ease-in-out 0.2s;
  -moz-transition: all ease-in-out 0.2s;
  -o-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
}

.scrolling::before {
  opacity: 1 !important;
  height: 0.8em !important;
}

.doneScrolling::before {
  opacity: 0.5 !important;
  height: 0.2em !important;
  top: 1.2em !important;
}

.preScrolling::before {
  opacity: 0 !important;
  top: 1.2em !important;
}

.hideScrolling::before {
  opacity: 0 !important;
  display: none !important;
  top: 0.4em !important;
}

.startScrolling::before {
  opacity: 1 !important;
  top: 0.4em !important;
}

body {
  margin: 5em;
  background: #e83e39;
}
JS
$(document).ready( function() {
    //definition of the functions to fire in reverse chronological order
  function startscroll(){
      $("#mouse").removeClass("hideScrolling");
      $("#mouse").addClass("startScrolling");
    }
  function hidescroll(){
      $("#mouse").removeClass("preScrolling");
      $("#mouse").addClass("hideScrolling");
      setTimeout(startscroll, 200);
    }
    function prescroll(){
      $("#mouse").removeClass("doneScrolling");
      $("#mouse").addClass("preScrolling");
      setTimeout(hidescroll, 200);
    }
  
  function unscroll(){
      $("#mouse").removeClass("scrolling");
      $("#mouse").addClass("doneScrolling");
    setTimeout(prescroll, 300);
    }
    function scroll(){
      $("#mouse").removeClass("startScrolling");
      $("#mouse").addClass("scrolling");
      setTimeout(unscroll, 500);
    }

    //begin sequence, read code backwards
    setInterval(scroll, 3000);
});
Host Instantly Drag and Drop Website Builder

 

Description

Cute little scrolling mouse made with Css and jQuery, no images.
Term
Wed, 11/29/2017 - 11:19

Related Codes

Pen ID
Pen ID
Pen ID