Amazing Digital Clock In HTML< CSS < JavaScript | Project Series Day - 9 | Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made an Overlay which is following Mouse with the help of HTML, CSS, and Javascript | It is Project Series Day 10. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this Overlay For Mouse step by step
Video Preview of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS and javascript, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
<div class="circle"></div>
In HTML, we just have to make a div and give it a class circle. the circle is the overlay we want to follow the mouse. Let's start CSS coding.
CSS 🎈( step - 2)
* {
background: #1c2b36;
}
.circle {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin: -40px 0 0 -40px;
background: #0d9eff;
border-radius: 80%;
backface-visibility: hidden;
}
In CSS, we just have to design the div. We have shaped the overflow to look like a circle. You can make anything. Now, let us start Javascript Coding.
Javascript 🎈( step - 3)
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>First, you have to import the above code and put this in your <head> tag!
var $circle = $('.circle');
function moveCircle(e) {
TweenLite.to($circle, 0.12, {
css: {
left: e.pageX,
top: e.pageY
}
});
}
$(window).on('mousemove', moveCircle);
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.
Deep right it able least hospital. Thus direction social. Economy cause yard exactly any scene though.world-news
ReplyDelete