Animation on scroll

TITLE : Animate On Scroll | One line Code | AOS Library | AOS.js | Coding for Beginners

Source Code :

HTML :

<html>

<head>

<title>

Animate On Scroll

</title>

</head>

<body>

<p>Scroll Down</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

AOS.init();

</script>

</body>

</html>

CSS :

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: Futura Md BT;

}

body {

width:100%;

background-color: #f1f1f1;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

.header{

width:100%;

height: 100vh;

background: linear-gradient(to right,#333,#ff4860);

display: flex;

justify-content: center;

align-items: center;

}

.header p{

font-size: 8em;

color:#fff;

}

.blockContainer {

width:100%;

display: flex;

justify-content: center;

align-items: flex-start;

flex-direction: column;

}

.block {

width:50%;

height: 50vh;

display: flex;

justify-content: center;

align-items: center;

margin: 50px;

border:10px solid #ff4860;

background-color: #333;

}

.block p{

color:#fff;

font-size:5em;

}

.block:nth-child(odd){

display: flex;

align-self: flex-end;

border:10px solid #333;

background-color: #ff4860;

}