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

				
					  <body>
    <section id="home" class="full-height">
      <div>
        <h1 class="left-to-right show-on-scroll">Nodemy</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>Title</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>Title</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>Person 1</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>Person 2</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>Person 3</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 *