This Cool JavaScript Effect Will Make Your Website 3D !

Learn how to create an amazing 3d parallax effect from scratch.

-- JavaScript Effects Tutorial --

Today, we got a special tutorial, we're going to learn how to create an awesome parallax effect on mouse move that will turn our website into a 3D landscape. I'm gonna walk you through that process from scratch. We're gonna start first by cutting the images and editing them in photoshop, after that we're going to be using HTML and CSS to create the website markup and do the stylings, then we're going to move to JavaScript to make the parallax effect.

You think that's it ? No, in addition to all of this, we're also going to create a reveal animation, so when the website gets loaded, all different elements of the page will be coming from bottom in a beautiful and smooth way.

Wait, did I tell you that this is responsive as well? Actually it is responsive on all devices including tablets and mobiles. At the end, I'm going to show you how you can make the website responsive, and we're going to make sure that the parallax effect still works perfectly on smaller screens.

This is a good tutorial for you, especially if you’re a beginner, because it’s gonna help you to get familiar with JavaScript basics and increase your programming skills.

💚 Get Project Source Code

💚 Get Project Source Code by Paypal

👍 Now if you find this video valuable, please make sure to leave a like, and subscribe to the channel, this is the best way you can support me to make more videos like this.

🛎 Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.

💖 Please feel free to support my channel. Your donation will motivate me and push me to keep making more of these tutorials.

📁 Assets

💻 Start project from scratch (Images and files used in this tutorial)

⏱ Timestamps:
0:00 - Intro
1:20 - Preparing the assets (Photoshop)
8:17 - Project Setup
9:23 - Navbar
17:32 - Assembling the background layers
24:30 - Parallax Effect
41:10 - Reveal Animation
50:53 - Making things Responsive

[AkiraMeow]

The dude just taught us Photoshop better than an actual photoshop tutorial. 10/10

[KalpeshPanchal]

I'm a developer myself and I must say you designed, developed and explained this responsive parallax so well. 👏 Keep it up!

[arNar]

voice over ☑
no loud music☑
great explanation☑
awesome design☑
thank you for this masterpiece
❤

[jitesharyan]

This is hands-down one of the best tutorials I've come across .... excellent explanation with great visuals 👌

[franzpeterdiaz]

This is the first time I watched a coding tutorial that didn't make me feel sleepy! I love how you explain things clearly and adding some humor. With that, you've earned a new subscriber!

[mr_clean]

What I think is so valuable about this tutorial is not how to create the actual parallax effect, but the description of your whole process. You explain what tools you use and how you use them, what certain syntax means, hotkeys, explanations of different values and aspects of CSS, HTML, and Javascript. How to insert icons and use libraries with CDNs. You're even teaching people how to speed up development with Emmet abbreviations and live server extensions. Fantastic.

[chadelz]

The jokes and memes throughout this video are hilarious, coupled with clear and precise explanations of every little detail and the video editing emphasizing said details, dude this video is ridiculously good. Nice work my man.

[Drop_cat]

I really appreciate the effort to make your tutorials beginner friendly! Thank you.

[rivvelmusic]

8 minutes in and Im shocked you managed to edit like this for an hour long video. Great work, this is a fantastic tutorial.

[evanz]

Awesome tutorial, you can't imagine how long I've been looking for a paralax toturial like this... you also added responsivity.... so amazing!🐒. You definitely deserve coffee and more subscribers! 🔥🔥🔥

[loicleray]

Dude, this video is criminally underrated. The whole production is next level. Very impressed. Gonna buy you a coffee now. Well done! and thank you!

[zizak]

This tutorial is a career maker! You explain everything so nice, I understood basics of js I used to take for granted. Thank you really 🎉

[julianklumpers]

This video/tutorial is amazing! I really enjoyed watching it! Nice editing and not to annoying :)

[matthewward]

I'm not a web designer, but I'll be using this for my animation website for sure! Thank you so much!

[Flipbug_The_Whimsical]

I'm hugely grateful for the inclusion of the Photoshop tricks and the thorough THOROUGH explanation of all the code. I feel like i knew much of it already but i learned through painful trial and error. Wish I'd seen this video years ago! Huge effort. Thank you so much!

[dienazty]

Great video and super helpful! I like how you used position: absolute for the <header> - I've also solved the 100vh scrollbar issue by setting a --header-height: in :root, then assigning the height for <header> to var(--header-height) and assigning height for <main> to calc(100vh - var(--header-height)). Thanks again!

[zizak]

A tip for easy overlapping layers I always use: parent{display:grid} parent >*{grid-column: 1 / -1; grid-row: 1 / -1;} and just make all images are same width height and position elements in layer in photoshop as you like. The just use order: 1 ….2, 3…and so on to stack them as you like

[sweatygoose]

This guys videos have taught me more than any other tutorial on youtube, hope to see more in the future, such as the advanced calculator tutorial that u once said you would do

[legendsj]

Your editing, explanation and coding skills are so awesome that I don't even realise it's a video of an hour first I was thinking it's a 10 to 15 min longer 😂❤

[cerberusdarck]

What a fantastic walkthrough, thank you so much for the hole effort and share this knowledge!😍