Animated Landing Page Design for Chocolate Shop | Reactapp | Speed Code

105 views Oct 3, 2023
xerrat.com

The video provides a step-by-step guide on how to create a customized animated landing page design using HTML, CSS, and JavaScript in a React app. The landing page is specifically designed for a business that sells delicious pastries and chocolates. By following the instructions in the video, you will be able to create an engaging and visually appealing landing page that showcases the products and services of the business. Whether you're a beginner or an experienced web developer, this video will help you create an impressive landing page that will attract potential customers and generate more sales for your business. The video aims to teach web design and development skills using practical examples and code tricks. To build this landing page, use the NPM packages listed below. 1. AOS: AOS allows you to animate elements as you scroll down and up. If you scroll back to top, elements will animate to its previous state and are ready to animate again if you scroll down. 2. React-CountUp: A configurable React component wrapper around CountUp.js. 3. React-Reveal: React Reveal in an animation framework for React. Its MIT licensed, has a tiny footprint and written specifically for React in ES6. It can be used to create various cool reveal on scroll animation in your application. 4. React-scroll-trigger: React Component that monitors scroll event to trigger callback wen it enters, exits and progresses through the viewport. All callback includes the progress and velocity of the scrolling, in the event you want to manipulate stuff based on those values. 5. react-typed: React-type is a React wrapped for typed.js. 6. Reactjs-popup: Reactjs-popup is a simple react popup component that helps you create simple and complex Modals, tooltips and Menus for your next React App. Source code: https://github.com/MicroBuddy-CEO/dou... follow us on: Facebook: https://www.facebook.com/speedybuddyy/ Instagram: https://www.instagram.com/speedybuddyy/ Twitter: https://twitter.com/MicroBuddy72305