Being new to CSS and jQuery, I am currently delving into various animations. My current focus is on creating an animation similar to the one on domain.me.
For this project, I am utilizing jQuery's scrolltop() to track scroll position and using console.log to display the values in the console. I manually implemented if statements and addClass() based on the scroll position. Below is the complete code (both style and script are in the same file).
$(window).scroll(example);
function example() {
var tempScrollTop = $(window).scrollTop();
console.log("Scroll from Top: " + tempScrollTop.toString());
if (tempScrollTop > 20 && tempScrollTop < 50) {
$("#div1").addClass("slide");
$("#div2").addClass("slider");
}
if (tempScrollTop > 50 && tempScrollTop < 100) {
$("#div1").addClass("slide1");
$("#div2").addClass("slider1");
}
if (tempScrollTop > 100 && tempScrollTop < 200) {
$("#div1").addClass("slide2");
$("#div2").addClass("slider2");
}
if (tempScrollTop > 200 && tempScrollTop < 300) {
$("#div1").addClass("slide2");
}
};#mainbord {
border: 5px solid black;
height: 100%;
width: 100%;
background-image: url("2.jpg");
}
.divv {
border: 1px solid black;
width: 200px;
height: 200px;
margin-top: 300px;
margin-left: 500px;
border-radius: 50%;
}
.div2 {
border: 1px solid black;
width: 400px;
height: 50px;
margin-left: 400px;
}
.div3 {
border: 1px solid black;
width: 500px;
height: 500px;
margin-top: 200px;
}
.div4 {
border: 1px solid black;
width: 500px;
height: 500px;
margin-top: 200px;
}
.slide {
background-color: green;
border: 1px solid black;
width: 180px;
height: 180px;
margin-top: 250px;
margin-left: 420px;
-moz-transform: scale(0.2);
transition: all 600ms ease-in;
*/
}
.slide1 {
background-color: red;
border: 1px solid black;
width: px;
height: 160px;
margin-top: 160px;
margin-left: 400px;
transition: all 600ms ease-in;
}
.slide2 {
background-color: blue;
border: 1px solid black;
width: 100px;
height: 100px;
margin-top: 200px;
margin-left: 350px;
-moz-transform: scale(0.2);
transition: all 600ms ease-in;
}
.slider {
margin-left: 550px;
margin-top: background-color:green;
transition: all 600ms ease-in;
width: 300px;
}
.slider1 {
margin-left: 700px;
background-color: red;
transition: all 600ms ease-in;
width: 250px;
}
.slider2 {
margin-left: 730px;
background-color: blue;
transition: all 600ms ease-in;
width: 250px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div id="mainbord">
<div id="div1" class="divv">
<img src="1.png" width=100%,height=100%/>
</div>
<div id="div2" class="div2"></div>
</div>
<div class="div3"></div>
<div class="div4"></div>