Рет қаралды 15,021
In this tutorial we will learn to implement how to add smooth scrolling with parallax effect in Next.js!🤩
Demo Link🖤: smooth-scroll-next-js.vercel....
Blog📖: devdreaming.com
-----------------------------------------------------------------------------------------------------------
Final CODE:
➡ Link 💚(Give ⭐ to the repo): github.com/codebucks27/Smooth...
-----------------------------------------------------------------------------------------------------------
Hey there 👋,
In this tutorial, we'll learn to implement smooth scrolling website
Here's what you'll learn in this tutorial:
🌟 How to add smooth scroll in Next.js project
🌟 How to implement parallax effect with this smooth scroll using GSAP
🌟 How to add parallax effect on different elements
🌟 How to use events like onScroll in smooth scroll
For this project, we're going to use:
🌟 Next.js
🌟 Lenis Scroll
🌟 GSAP
Whether you're a complete beginner or an experienced web developer, this next.js tutorial will teach you everything you need to know implement smooth scroll in your next.js website.
Like, Sub🥂 & Share! ♥
Follow me on 👇:
Twitter🐤 : / code_bucks
LinkedIn 🔗: / codebucks
Instagram 📫: / code.bucks
Email 📧: codebucks27@gmail.com
Learn More About,
⭐ • Next.js Blog Tutorial:...
⭐ • How to Create a Stunni...
⭐ • React Website Tutorial...
⭐ • 🔥Build a Stunning Fash...
⭐ • 🔥Create an NFT Collect...
⭐ • 🔥Build a Stunning Port...
⭐ • Build Websites Using N...
⭐ • Build Websites with Re...
Timestamps⌛:
Intro + Demo @00:00:00
Setup & Installation @00:02:24
Adding Lenis smooth scroll @00:04:20
Add Images @00:06:56
Adding Parallax Effect @00:13:10
Implement scrollTo method @00:25:15
Disclaimer:
All videos are for educational purposes only, please use them wisely.
#gsap
#parallaxeffect
#nextjstutorial