Build Parallax Website With HTML CSS & Javascript

[@imraninfrarote]

I'm a simple man. I see dev Ed, I click, I become a gorgeous friend of the Internet

[@stonewilliams737]

Hello, any good and secure Bitcoin investment platform I can join now?

[@iJuce]

too bad you copy pasted this and edited it a little bit

[@lorrieuiux5802]

This is great! Also love your content. While I am interested in coding... sometimes it can get a bit boring and I'll start to feel my eyes glazing over. I don't get that when I watch your stuff, you keep it entertaining! ^^ I'm just a beginner when it comes to front-end dev (designer here), but so far I'm doing pretty good with my course that I'm taking. Keep up the great work. :D

[@developedbyed]

Thank you so much! Sending all the positive energy 🙌

[@nathaliebenarroch]

Thanks so much Dev Ed for your wonderful energy and generosity! Loved doing this with a man plunging into the ocean (had a boat instead of your rock! lol)

[@marisaissa17]

Dev Ed, my gorgeous friend! You have done it again. I hope you know you are giving people high paying skills and they are going to be able to change their lives with that. I appreciate your kindness! Thank you

[@prathameshkodgire8642]

welcome

[@AlexTheGreatish]

Hey that mountain range in the image is in my country! It's called the Blyde River Canyon and fun fact it's the 3rd largest canyon in the world :)

[@dancehalllyrics1303]

Where in the world is it, if you do not mind me asking? :)

[@AlexTheGreatish]

@@dancehalllyrics1303 It's in South Africa :)

[@dancehalllyrics1303]

@@AlexTheGreatish, cool!

[@webdevelopete]

Wow, she definitely ‘rocks’! 🤩

[@danisob3633]

If the background image overflows under the black section you can add this line after the .to('.content'...) line: .to('.bg1', {height: '100vh'}) this changes the image height to the height of your screen, so it no more overflows and lets u scroll

[@bassilmohammad7266]

I Was Waiting For This Thank You, Man

[@OWLeong]

He feels cool!

[@Levi-ef7cn]

And in fact he is!

[@bhaskargowda-3955]

Kudoss Sir , Much Love and Respect from India , saw ur prev vdio of editing these images ; n here noww :))

[@samsalem6927]

As much as coding is boring and dry, but I watch your videos I smile and laugh, Thank You for all your efforts, Love your videos

[@m.haque12]

This guys energy makes me feel like everyone else in my family is depressed 😌.

[@leandromiraka7209]

Honestly i love this channel, im learning so much and im not having a single misunderstanding. Thank you so much and keep it going!!!

[@agu4071]

hmm how do i find those links for animations (TweenMax)? cant find them on cloudflare

[@nataliayarysheva7316]

Hi, Ed! Would be great if you add an extended tutorial on how to work with several scenes with ScrollMagic and gsap :D Thanks for your videos! every tutorial is like a diamond:)

[@prophetnozza4150]

Amazing, just used this in my project! Thank you!

[@AM-nb2bs]

On the main-title class, to change transform translate according to the top(position) is a bit of cargo cult. When you translate, you do this based on the elements size, so you changed it to start at top:30%+30% of textHeight (instead of the half). Nice video as always 🔥🔥🔥

[@elhaambasheerch7058]

Watching this guy is so entertaining and informative !

[@pavleta777]

Awesome! ❤️❤️❤️ I am going to try this today on my project website! Thanks millions times! Been looking for that effect too :)

[@hubbahu]

It might be worth using scroll trigger by gsap instead. Its a much more streamlined process that is built for gsap.

[@developedbyed]

Will check it out!

[@princedjangmah]

This video is on point. I love your design taste

[@Daaboo]

this is amazing. never thought of going over to tailwind to skip all the mobile adjustments etc?

[@usmangee4943]

You made the development easier ed...you r the best gorgeous teacher..❤️❤️

[@aks897]

Thanks man, was waiting for this❤️❤️

[@kirkpatrikolis273]

This is what i've been waiting for. Thanks ed

[@dairoarleygarciavergara373]

Beautiful, I did it until end. Thank you so much.

[@moondogg1e]

Great video, man. I just looked for this effect. Thanks!!

[@plusk343]

You are the only one in the entire world who calls me beautiful

[@itcode_me]

Thank you for this tutorial. Its understanding

[@devsauce]

Are you moving out by any chance ? I could hear the echo in this video which wasn't present before.

[@hishamsomroz6913]

released on time, TBH i was looking for that.

[@emarekica]

Cool, thank you! This was fun! :)

[@serdarmengutay9545]

this guy makes me love software ❤

[@NBA6Fan]

2:31 Got me laughing. You are amazing

[@Asuuri]

YESSSS😍 Cant wait to try it out🔥

[@Uncaught_in_promise]

Absolutely gorgeous

[@nigelvidal7546]

thank you so much! i've learned a lot from you

[@ramyadamarla6951]

Hey my parallax is not working in iphones and iPads could please help to fix it

[@mandalorian99]

Amazing tutorial Ed! As always!

[@rugglez]

Ed, did you try to look at this using smaller screen size? I thought I was doing things wrong trying to integrate your code in to my site, but then checked out your original code and noticed it goes very wrong when viewed on small devices (especially page 2). The parralax effect works, but the nav formatting breaks and text / images on page 2 look weird.

[@hadidwidiantoro5114]

yeah same with me

[@EnqiN991]

This is amazing ❤😁

[@mayainfi]

We are talking like Ed at home now! hahaha and If I get stuck I just say “why you do this to me?” All my frustrations melt away

[@vovabrightside1]

A wonderfully charismatic man from the internet

[@suyashdhumal3]

Where has this guy been for 2 weeks?!?!

[@priyanzhu]

Thank you Sir for this awesome tut!

[@TheCodeAngle]

Looks great. Well done!!

[@iruarostegui]

Love this kind of videos! nice content

[@NocturnalRD]

Great tutorials man!

[@bitemynut5521]

What text editor does he use ?

[@rishabhsinghrawat9731]

I love the way you teach, even the most tough concepts in easy words Give me a heart now😂😂

[@igorskyflyer]

He can't... he only has one. 😰

[@afrsab5994]

hello dev Ed i have a little question about my project i want to build a website portal and back office where the user have acces to a group of file depending on their role and this file have to be saved to some remote server do you have for me suggestion about which language programing to use and stockage server to use(i heard about minio but not sure about it) the server will stock video image ,document ,text,pdf and maybe some .exe file . Thanks in advance for your work it give me courage and motivation to continue in my career as a developper

[@Acyoade-i4v]

I always love your videos!

[@vrk4052]

Hello Ed, I have a generic question. I have made a website which has a news section which needs to be updated weekly by a client. Would I create a backend with an Admin Login that leads to an Admin page which allows them to create 'news cards' that update the on the news section of the web page. Or I have to somehow attach my website to a CMS or re-create my website through a CMS , I'm really not sure what is generally done in this case? Thank you.

[@patrik3403]

thank you for for wisdom eddie

[@going_dark]

Good evening my gorgeous teacher on the internet.

[@dsy9578]

Thanks for your cool and very learning video I just enjoy the way you teach

[@john51656]

How to add an image upload form in this Below Explore?

[@elveyo9106]

Seriously, I love you man!

[@shreyasphadnis5550]

awesome video! just a doubt how to remove the small portion of container image in content at the bottom. I wanted to add a third page below content and somehow it has made it idk unsmooth with a third page(idk the word) . Is parralax website a strict two page website?

[@snehalambatkar9910]

When will you upload the next vid

[@AlejandroVivas]

We love you, Ed.

[@karlo-o2z]

why is tweenmax and scrollmagic not available on cdnjs in my case ????

[@AkashVerma-yg3zj]

Hi, can anyone help me with my design. I have divided body into two parts into left and right. I want to change the color of text relative to it's background. Let the left part is red and right part is blue. If the text lies in left part i.e. red then the text should be blue and if the text lies in right part i.e. blue the text should be red. Please help me. I want javascript code.

[@vibecheck2650]

thank you so much for the tutorial!

[@nextprogrammerbd]

can you please let me know the model of your microphone which is using this video. Thank you

[@khaledfarghly6480]

you'r always so cool Deved

[@theillyri8339]

how do i get rid of the image sticking out at the very bottom, very cool tutorial btw .

[@branme3506]

Actually, when I see videos, I get motivated to continue, especially in JavaScript

[@akhmadmuliawan7623]

Ed's love dungeon 😂

[@ranaarchitect5101]

which extension u are using in visual studio for html editing?

[@jakubvorel8855]

That's what I have been waiting for ❤️

[@vidyasagar3802]

where do I get this type of image?😊

[@windevchannel]

deved.. is cool he makes he laugh with his little jokes :) great humor

[@moenesma9415]

Love it man, thank u 🔥♥️

[@kempueu5555]

ooo, 620k :) well done Edi

[@OmarIdhamouch]

Please tell us how to build landing pages? Thanks

[@CodeRCreatives]

Hey! great video man😀😀

[@Shou06]

i just love that parallax

[@Mwtorres89]

why when i copy your github code it doesnt work? :(

[@huzaifa5361]

Thanks for the video❤

[@jmora7101]

h4 and then h2!!?? what about semantic html? by the way, your videos are very helpful.

[@josspa2605]

omg it´s perfect :3 thank you!!

[@karangujrati679]

Is anybody else having a problem that when you scroll at the bottom of the whole section and then scroll even more, the content class srcolls a bit above and then you can see the background image peaking at the bottom?

[@MaxMaxx-tb6nz]

Make .content{ height: 110vh; }

[@varunagarwal1756]

Did anybody notice the Spotify logo in the sidebar of vscode?. Anyone have an idea how to get it?

[@knackebrot102]

Just search for a Spotify plug in in visual studio code

[@rahulgawale]

Which extention you use to autocomplete .class to div with class?

[@GauravKumar-ue7nz]

Emmett, It is Built into VS Code.

[@GauravKumar-ue7nz]

kzbin.info/www/bejne/e5m1gZeLq5aNqKM

[@rahulgawale]

@@GauravKumar-ue7nz thanks buddy, for some reason its not working for me. Thanks for sharing the video its very useful.

[@GauravKumar-ue7nz]

@@rahulgawale Which code editor?

[@rahulgawale]

@@GauravKumar-ue7nz vs code only, I think something is wrong in config, I need to check

[@terrificPlaysgames]

great vid! im new to webdev and for me this only works when i start a local server but not when i just open the html file? is this normal?

[@nishadmm5508]

Awesome.... From kerala : )

[@avneet12284]

So amazing !

[@Will-le8yj]

thank you for this

[@stephenzerospace2864]

how would you make this responsive?

[@arwahsapi]

Programming aside, as a Romanian your English is so good

[@ALBDev]

Black Darkness Depression All the good stuff. LOL

[@suhaskamble2320]

Awesome Dude

[@quentinb9273]

Beegey ! Thanks Ed !

[@kevintech2442]

Where I work our website which is fully in English it asks us too if we want to translate it to Latin idk why :))

[@ahraz708]

Amazing Bro 👍

[@dancehalllyrics1303]

What icon library are you using for your files in VS Code? :)

[@JoelJospeh]

U made my Day🤗☺😄

[@n.n.1279]

Thanks for the cool tutorial!! Do all these scroll libraries anything else than more or less getting the window.pageYOffset and set the div.style.backgroundPositionY to that value multiplied by a factor like this: let offsetY = window.pageYOffset; my_div.style.backgroundPositionY = offsetY * 0.7 + 'px'; But Firefox is telling me this: This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; You are also gorgeous ;-)

[@xFaull]

hi, i would love to be a web dev one day but i really enjoy the coding part. but most people just use wordpress, is it even worth coding it if you're doing it for an income?