Join discord here: discord.com/invite/8jf6bkqSGF

html{ height: 100%; overflow: hidden; } body{ color: #fff; margin: 0; padding: 0; perspective: 1px; transform-style: preserve-3d; height: 100%; overflow-y: scroll; overflow-x: hidden; font-family: "Luna"; } header{ box-sizing: border-box; min-height: 100vh; padding: 30vw 0 5vw; position: relative; transform-style: inherit; width: 100vw; } header h1 { margin-top: -100px; } header, header:before{ background: 50% 50% / cover; } header::before{ bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; display: block; background-image: url(1.jpg); background-size: cover; transform-origin: center center 0; transform: translateZ(-1px) scale(2); z-index: -1; min-height: 100vh; } header * { font-weight: normal; letter-spacing: 0.2em; text-align: center; margin: 0; padding: 1em 0; }

This is more enjoyable when you write codes while watching this video :) Brilliant tutorial for me as a junior web developer, thank you!

CSS3 has become so powerful and I LOVE IT!

Activate your windows

OMYGOSH I'VE BEEN LOOKING FOR THIS THANK YOU!!

Great tutorial and taste in music. Clozee is so sweet!!

Can u please tell me how can I add sticky nav bar ( from ur sticky nav video) in this parallax effect... I tried to merge the code but the nav bar is not becoming sticky. Please help me

De los mejores videos que he visto en mucho tiempo, sigue subiendo vídeos de este tipo porfavor.

awesome tutorial ,by the way, I like the background music

Это было круто! Спасибо, дружище!

How to add paragraph lines in bottom, as you showed at 1st

The transform - translateZ / scale is a neat trick - very nicely done!

THANK YOU! first code I could actually get working on my site!

Lmao “Activate you’re windows” same as me)))

This is Beautiful! Thank you!

How do you put text in the whitespace after the effect? I have been trying using footers but they move when scrolling...

Hi thanks for the tutorial; is there a way to change the background image using Liquid? Trying to apply this using a Jekyll layout

Thanks for the helpful tutorial. I have never used CSS before so will need to learn it. Until then is there a way to create parallax scrolling in CSS in Design View?

how did you put the color of your tag in blue? My atom is red.

friggin sick intro!!

i made this perfectly, but the issue started when i wanted to put a div with isometric cards below this, in the same file. the isometric cards just get out of shape. how do i make them both work on the same page?

I've been having an issue where any text below the header is still drifting upwards during scrolling, so there's clearly some code-tweaking I need to work on before I continue with the website.

El efecto del comienzo del video es más notorio que el que quedó al final, gracias saludos

Good tips. I dont like themes that use that, but it's neat work. I enjoy working with as much HTML as possible. Always have.

How to add some text after this effect because the text scroll with the header so i can't add other text in the bottom of the header

Thank for sharing this kind of thing,hope god blesses you .

anyone know how I would continue the parallax with another picture, for reference look at the end of the video where he shows what he made 5:00 in the white area I am trying to continue the scroll with another picture, and so on, any help?

what does the header, header:before attribute-address address/ which function has the header:before (shouldn't it also be"header::before"?)?

What effect did you use for the video intro?

What theme are you using for Atom?

hello, how can you put a hyperlink in there ? i tried combining them but doesnt work?

I loved the introduction! can you teach how you did this glitch/computer/code effect?

Nice effect Nice background music Good stuf.

Amazing. I've to try this

I cant only remove the text, the background will also delete, i just want a black background at the bottom how to fix.

In the intro version works, in the final version only works the text, the image don't has the parallax effect.

I really like this style alot but I'm confused on the part on where he got the img and lorem ipsum I don't see it on html file?

Thank you for instructing and sharing!

I got this to work, great video thank you

I put a section with a div underneath and styled it with z-index:2 . Why does it go under the image when I scroll ?

Your level of Front End is awesome! Good Video... Like and new suscriber, waited more.

Thanks dude! I love the entitlement displayed in the comments. I thank you for taking your time to share your knowledge to all of us for free. I hope YT gives you a little bit of ROI of your time.

what theme are you using? i really want to get the teal element color on my text editor!

Parallax has been my single fav site design flavor for years but I’m not a coder. Where do we get this CSS and is it mobile friendly?

thank you very much. it comes in handy

Hey, My page is not scrolling down with the same code. Please if someone can help that would be great.Thank you so much.

mate you are the best!

Hi Codegrid im loving your vids!! keep it up!! but I have 1 question what you use for coding? Sublime?

How can you add a sticky nav to this? I have already built the complete page and want to animate it with this....

Hi thanks for that great tutorial! Is anyone else having the problem where when they scroll a white square appears in the background image? Thanks

can you give the background image link ...??

Does anyone have same problem as me? I get white space left of an header image. I found that perspective in css is doing that but don't know how to fix it. It shows when I scroll left/right.

Love it!

my visual studio IDE is showing an error in the stylesheet part here ..... header * {

Great job! What is that text editor theme?

Any tips on how to add another section of content below that would scroll OVER the parallax landing page? I️’m trying to create a continuous scroll style page with parallax images separated by banners with text and video. The problem I️m having is the content flows behind the landing image. I️ thought Z-index would work but it doesn’t seem to do the trick.

Very handy for my parallax site. :)

Is this method compatible on mobile? I’ve been using a hack method of position:fixed inside an absolute container on my website but this seems way better.

How do You adjust the sizes according to the image used as background...? Seems to behave weirdly on MS Edge...

bro please what font you are using in vscode ??????????/

Como deixar o texto parado igual no início do vídeo?

what font did you use in atom text editor?

How do you make text go over image? At me the text is going behind it and the text is white!!

I really hope you reply. I can't make a fixed nav bar on top. Nothing can be fixed because of the perspective thing covering the whole body... what should I do?

Your css level is so good :o

please can you make another video explaining each step and its function or effect on the html. your work is awesome but we came to learn and if we found this here we would all support you by subscribing, liking and even by sending money on patreon. thank you

Great job! Does it work in mobile version?

for some reason it just scrolls... as it didnt work i even typed your code letter by letter but even after that it still didnt work correctly..?

How can I make add the blur filter on?

how do you make the selection after that not move with it?

al colocar el heading no lo reconoce y algunas propiedades que puedo hacer, es normal?

Great job! thanks

Can somebody help me? The parallax works but I don't know how to insert the lorem ipsum part.

My very fist html css web project . I still remember how i made with lot of trail and errors

Would be nice to see the effect of each property in real time. A thought for future videos

Cool video🤩 Can you please tell me what's your picture resolution is it 1920 X 1080

Music is amazing ♥️

How did you get the 'Lorem...' text downside after the picture? When I try it, the text ist always right after my header....

Got a problem, the "overflow-x: hidden;" property does hide the X-scrollbar, but it can still be scrolled using the mousewheel. anybody else with the same issue?

Good Job and thank you for sharing

Can you give the code on how you put the descriptions at the bottom.

bhai majaa aagaya....yisme jo majja hai main sabko dena chahata hu

Hey really stuck on this, like is there any way to add an image after the paragraph?

I like the active windows watermark

How do you add another section? Everytime I create a new div or new section it remains on the same landing page. Any help would be much appreciated

what Atom UI theme and syntax theme are you using?

really helpful tutorial. But can i pls know wut is the font ur using i really like it

How to make sliding dark main content 0:20 my it's not working

How can I add description? Like Lorem Ipsum? It doesn't show in my web page. Please help thank you in advance~

Do you download music from the soundcloud mobile app?

what vs code theme are you using?? plss answer

Спасибо, реально запара. Но просто ))

how to add a font in the program?

What syntax theme are you using?

How do you put the contents in the bottom?

plz tell me what program do you use

Which text editor do u use

This doesn't seem to work in Safari. Am I making a mistake or is it just not supported?

Which editor is that? Pls lemme know and I loved this website design thanks