Skip to content

Instantly share code, notes, and snippets.

@DevShahidul

DevShahidul/Custom mouse pointer function.html

Created January 18, 2018 14:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DevShahidul/f2197988594622e2d5bac15cd2c1ae85 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DevShahidul/f2197988594622e2d5bac15cd2c1ae85 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Custom mouse pointer function.html
<html !DOCTYPE html>
<head>
<style>
/* Animated cursor style */
.animated-cursor{cursor: none;}
.mood_circle{width: 60px; height: 60px; border-radius: 50%; pointer-events: none; -webkit-transform-origin: center; transform-origin: center; z-index: 99; opacity: 0; transition: .5s opacity ease; transition: .5s opacity ease; position: absolute; display: block;}
.start-event .mood_circle{opacity: .9;}
.mood_circle__inner{position: absolute; top: 0; left: 0; width: 100%; border-radius: 50%; height: 100%; background-color: #40d1bd; transition: .5s -webkit-transform cubic-bezier(.165, .84, .44, 1); transition: .5s transform cubic-bezier(.165, .84, .44, 1); -webkit-transform: scale(0); transform: scale(0) }
.start-event .mood_circle__inner{-webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1);}
</style>
</head>
<body>
<a href="<?php echo get_the_permalink(); ?>" class="pipeline-item animate animate-from-bottom animated-cursor">
<figure>
<?php the_post_thumbnail(); ?>
</figure>
<figcaption class="figure-title">
<p><?php the_title(); ?><span><?php foreach((get_the_category()) as $category) {echo $category->cat_name . ' ';}?></span></p>
</figcaption>
</a>
<!-- Custom animated cursor pointer
===================================== -->
<figure class="mood_circle cursor" id="cursor">
<div class="mood_circle__inner"></div>
</figure>
<!-- //End Custom animated cursor pointer -->
</body>
</html>
<script>
$('.animated-cursor').each(function(){
$(this).mouseenter(function(){
$('body').addClass('start-event');
$('body').mousemove(function(e){
/*('#cursor').css({
'top' : event.pageY + 'px',
'left' : event.pageX + 'px'
});*/
var cursor = $('#cursor'),
ancho = cursor.width(),
alto = cursor.height(),
W = ancho/2,
H = alto/2,
Y = (e.pageY - W),
X = (e.pageX - H);
cursor.css(
'transform', 'translateY(' + Y + 'px) translateX(' + X + 'px)'
);
/*cursor.css({
'top' : Y + 'px', 'left' : X + 'px'
});*/
});
})
$(this).mouseleave(function(){
$('body').removeClass('start-event');
})
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment