🔥Build awesome 3D landing page for Apple iPhone using ReactJS + ThreeJS + GSAP

Опубликовано: 13 Сентябрь 2022
на канале: CodeBucks

30,792

Tutorial😇 to create Apple iPhone 14 landing page using ThreeJs + ReactJS

Demo Link🖤: https://apple-iphone14.vercel.app/
-----------------------------------------------
Need Web Development or AI Solutions Services? 🚀
Let's bring your ideas to life!
Contact Me From Here: https://tally.so/r/wdlj0N
-----------------------------------------------
Blog📖: https://devdreaming.com

Hi there 👋,

In this video,
We are going to create cool landing page for Apple iPhone 14 Pro Max where we will render 3D model using ThreeJs and add scrolling animations using GSAP.
Here I have used different libraries to render 3D model in a React application and made a unique design, You can check the demo link.

For this project, we're going to use,
▶️ React JS (CRA)
▶️ GSAP for scrolling animations
▶️ styled-components for styling
▶️ react-three-fiber and react-three-drei to render 3D model

-----------------------------------------------------------------------------------------------------------
Starter CODE:
➡ Link 💚: https://github.com/codebucks27/Apple-...

Final CODE:
➡ Link 💚: https://github.com/codebucks27/3D-Lan...
-----------------------------------------------------------------------------------------------------------

Don't forget to watch the whole video, we're going to learn a lot of stuff like,
▶️ How to render 3D model in ReactJS applications
▶️ How to create Scrolling effects using Gsap
▶️ How we can leverage the advantages of Context API
▶️ How to use ThreeJS in React JS

Timestamp⌛:
Channel Intro @00:00:00
Intro + Demo @00:00:10
Setup @00:06:00
Adding Basic Styles @00:09:32
Quote Section @00:15:25
Hero Section @00:31:45
Rendering 3D Model @00:40:15
Adding Animation Using GSAP @00:56:00
Design Section @01:17:15
Display Section @01:29:30
Processor Section @01:44:10
Battery Section @01:56:00
Color Section @02:08:05
Animating 3D Model @02:26:20
Camera Section @02:44:00
Pricing Section @02:58:55
Using Context API @03:20:47
Adding Loading Screen @03:36:35
Making Website Responsive @03:40:50
Final touch @04:19:20

Watch the full video to understand, so that you can easily build and customize your own website.

[𝐈 𝐬𝐭𝐫𝐨𝐧𝐠𝐥𝐲 𝐬𝐮𝐠𝐠𝐞𝐬𝐭 𝐲𝐨𝐮 𝐭𝐨 𝐰𝐫𝐢𝐭𝐞 𝐜𝐨𝐝𝐞 𝐚𝐥𝐨𝐧𝐠 𝐰𝐢𝐭𝐡 𝐦𝐞 𝐬𝐨 𝐲𝐨𝐮 𝐜𝐚𝐧 𝐥𝐞𝐚𝐫𝐧 𝐭𝐡𝐞 𝐟𝐥𝐨𝐰 𝐨𝐟 𝐜𝐫𝐞𝐚𝐭𝐢𝐧𝐠 𝐭𝐡𝐢𝐬]

𝗙𝗼𝗹𝗹𝗼𝘄 𝗺𝗲 𝗼𝗻 👇 𝘄𝗵𝗲𝗿𝗲 𝗜'𝗺 𝘀𝗵𝗮𝗿𝗶𝗻𝗴 𝗹𝗼𝘁'𝘀 𝗼𝗳 𝘂𝘀𝗲𝗳𝘂𝗹 𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀!
Twitter🐤 :   / code_bucks
LinkedIn 🔗:   / codebucks
Instagram 📫:   / code.bucks
Email 📧: [email protected]

In upcoming videos, I'm going to create lots of cool stuff with JavaScript and React so make sure to subscribe.

Like, Sub🥂 & Share! ♥

Learn More About,

🔥Build a Stunning Fashion Studio Website with React JS [ Locomotive Scroll + GSAP + Framer Motion ]
   • 🔥Build a Stunning Fashion Studio Webs...

🔥Create an NFT Collection Website Landing page with React JS [Mobile Responsive]
   • 🔥Create an NFT Collection Website Lan...

🔥Build a Stunning Portfolio Website with React JS [ Framer-motion + Styled-components ]
   • 🔥Build a Stunning Portfolio Website w...

Build Responsive website with ReactJS, Styled-Components & GSAP❣️:
   • React Website🤩 : Build Responsive web...

Build Devto Clone in React:
   • Build Dev.to Clone in React

Build Awesome stuff with ReactJs (Playlist) :
   • Build with ReactJs

React Advanced Topic (Playlist) :
   • React Advanced Concepts | Every React...

If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below.

Thank You for watching! 😉

Buy me a coffee and Support this channel🥰:
https://www.buymeacoffee.com/CodeBucks

Where else you can find me:
Twitter🐤 :   / code_bucks
LinkedIn 🔗:   / codebucks
Instagram 📫:   / code.bucks
Email 📧: [email protected]

Disclaimer:
All videos are for educational purposes only, please use them wisely.

#AppleIphoneLandingPage
#landingpage
#reactjs