Day 16 | Demo Animation Scroll

Sử dụng HTML , CSS, JS  thiết kế chức năng mượt mà với Animation Scroll Browser

học lập trình frontend, fullstack hà nội, 48
học lập trình frontend, fullstack hà nội, 48
học lập trình frontend, fullstack hà nội, 48
				
					  <body>
    <section id=home class=full-height>
      <div>
        <h1 class="left-to-right show-on-scroll"><span class=ez-toc-section id=Nodemy></span>Nodemy<span class=ez-toc-section-end></span></h1>
        <p class="left-to-right show-on-scroll">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
          recusandae sed illo sit, saepe laboriosam ea fugit, architecto quis
          quia
        </p>
      </div>
    </section>
    <section id=about class=full-height>
      <div class="box show-on-scroll left-to-right">
        <h2><span class=ez-toc-section id=Title></span>Title<span class=ez-toc-section-end></span></h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur,
          eveniet sequi. Nobis, dolorum culpa doloribus adipisci ut ab iure non
          voluptates vel exercitationem explicabo nam, sunt maxime error nemo
          assumenda.
        </p>
      </div>
      <div class="box show-on-scroll right-to-left">
        <h2><span class=ez-toc-section id=Title-2></span>Title<span class=ez-toc-section-end></span></h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur,
          eveniet sequi. Nobis, dolorum culpa doloribus adipisci ut ab iure non
          voluptates vel exercitationem explicabo nam, sunt maxime error nemo
          assumenda.
        </p>
      </div>
    </section>
    <div id=team class=full-height>
      <div class="person show-on-scroll zoom">
        <h3><span class=ez-toc-section id=Person_1></span>Person 1<span class=ez-toc-section-end></span></h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. In
          repudiandae sequi, ad cum aperiam odit eius earum molestiae voluptatem
        </p>
      </div>
      <div class="person show-on-scroll zoom">
        <h3><span class=ez-toc-section id=Person_2></span>Person 2<span class=ez-toc-section-end></span></h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. In
          repudiandae sequi, ad cum aperiam odit eius earum molestiae voluptatem
        </p>
      </div>
      <div class="person show-on-scroll zoom">
        <h3><span class=ez-toc-section id=Person_3></span>Person 3<span class=ez-toc-section-end></span></h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. In
          repudiandae sequi, ad cum aperiam odit eius earum molestiae voluptatem
        </p>
      </div>
    </div> <script src=app.js></script> </body>
				
			
				
					* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}
body {
	overflow-x: hidden;
}
.full-height {
	height: 100vh;
}
.left-to-right {
	transform: translateX(-150%);
}
.left-to-right.start {
	transition: 0.7s ease-in-out;
	transform: translateX(0);
}
.right-to-left {
	transform: translateX(150%);
}
.right-to-left.start {
	transition: 0.7s ease-in-out;
	transform: translateX(0);
}
.zoom {
	transform: scale(0);
}
.zoom.start {
	transition: 0.5s ease-in-out;
	transform: unset;
}
#home {
	background-image: linear-gradient(to right, #4daf54, #3d8880);
	color: white;
	display: flex;
	align-items: center;
	padding-left: 80px;
}
#home h1 {
	font-size: 50px;
	margin-bottom: 20px;
}
#home p {
	font-size: 20px;
	width: 700px;
	transition-delay: 0.2s;
}
#about {
	display: flex;
	align-items: center;
	justify-content: center;
}
.box {
	background-color: #242628;
	width: 500px;
	border-radius: 10px;
	margin: 0 20px;
	padding: 20px;
	color: white;
}
.box h2 {
	margin-bottom: 15px;
}
#team {
	background: linear-gradient(180deg, #017c2c 50%, #fff 50%);
	display: flex;
	align-items: center;
	justify-content: center;
}
#team .person {
	width: 200px;
	padding: 20px;
	margin: 0 25px;
	background-color: #fff;
	box-shadow: 0 0 5px #2e363a;
	border-radius: 10px;
}
.person h3 {
	color: #017c2c;
	font-size: 22px;
	margin-bottom: 20px;
}

				
			
				
					let elToShow = document.querySelectorAll('.show-on-scroll')
let isElInViewPort = (el) => {
	let rect = el.getBoundingClientRect()
	// some browsers support innerHeight, others support documentElement.clientHeight
	let viewHeight = window.innerHeight || document.documentElement.clientHeight
	return (
		(rect.top <= 0 && rect.bottom >= 0) ||
		(rect.bottom >= viewHeight && rect.top <= viewHeight) ||
		(rect.top >= 0 && rect.bottom <= viewHeight)
	)
}
function loop() {
	elToShow.forEach((item) => {
		if (isElInViewPort(item)) {
			item.classList.add('start')
		} else {
			item.classList.remove('start')
		}
	})
}
window.onscroll = loop
loop()
				
			
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :

HTML : HTML căn bản cho người mới bắt đầu

CSS : CSS căn bản cho người mới bắt đầu

JS: Javascript cho người mới bắt đầu 

 
 
 

Leave a Reply

Your email address will not be published. Required fields are marked *