📝If you want to add something else after picture you will add html code in header _________________ If it help you put like👍 and write a comment. ________________ 📝And in css code add __________________ #exm { position: absolute; background: #fff; margin-top: 200px; height: 100%; }
This is more enjoyable when you write codes while watching this video :) Brilliant tutorial for me as a junior web developer, thank you!
6 лет назад
The code is Ok. Only remenber give a blackground color to view text and format - add tags to view content hidden by picture, as example body > p {padding:20%; font-style:variant;} and of course, add content into to the page ;)
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
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.
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
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?
As a small text editor I use sublime. As a full-on IDE, I use JetBrains WebStorm (or Intellij IDEA, if you want the same thing but for more than just web dev). Visual Studio Code is also highly recommended and free.
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?
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?
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.
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.
I'm trying to make a full website out of this and I'm struggling to get the other stuff at the bottom to not match the parallax effect, I do not recommend using this tutorial to make a full website
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?
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.
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?
copied as it is but not working, anything which is not shown in the video which is required, may be skipped because it is too common but I am new to web development
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.
![Gunna - HIM ALL ALONG [Official Video]](http://i.ytimg.com/vi/w7Wf0h1Q8a4/mqdefault.jpg)
Join discord here: discord.com/invite/8jf6bkqSGF
Jdjjd
Bro mujhe bhi coding sikha de(as a mentor)
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;
}
fucking love you
Bro!!!!! 👏👏👏
you can copy code from here. But please play full video twice. because chennel also need support.
You are god...
📝If you want to add something else after picture you will add html code in header
_________________
If it help you put like👍 and write a comment.
________________
📝And in css code add
__________________
#exm {
position: absolute;
background: #fff;
margin-top: 200px;
height: 100%;
}
Activate your windows
+Somfic❤
KMSpico.
Better Idea use Linux instead
Lol
LOL
CSS3 has become so powerful and I LOVE IT!
This is more enjoyable when you write codes while watching this video :) Brilliant tutorial for me as a junior web developer, thank you!
The code is Ok. Only remenber give a blackground color to view text and format - add tags to view content hidden by picture, as example body > p {padding:20%; font-style:variant;} and of course, add content into to the page ;)
me puedes ayudar porfavor? no consigo añadir texto ni nada en la parte de abajo de la pagina, que tengo q hacer?
In the intro version works, in the final version only works the text, the image don't has the parallax effect.
for that in img in the css part use background-attachment:fixed
OMYGOSH I'VE BEEN LOOKING FOR THIS THANK YOU!!
Lmao “Activate you’re windows” same as me)))
El efecto del comienzo del video es más notorio que el que quedó al final, gracias saludos
The transform - translateZ / scale is a neat trick - very nicely done!
bhai majaa aagaya....yisme jo majja hai main sabko dena chahata hu
Nice effect
Nice background music
Good stuf.
Great tutorial and taste in music. Clozee is so sweet!!
All you have to do to make thee parallax effect is in the same tag the you put the image link, also include 'background-attachment: fixed'
where do i need to put it? i do not understand
thanks
for example:
tag {
background: url('img');
background-attachment: fixed;
Thanks a lot Gaming 101, you helped me so much !
No problem!
Это было круто! Спасибо, дружище!
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
My very fist html css web project . I still remember how i made with lot of trail and errors
If you guys want some more in depth explanation, search for 'Parallax On The Web (Part 2)' from DevTips
De los mejores videos que he visto en mucho tiempo, sigue subiendo vídeos de este tipo porfavor.
sabes como hacer para poner contenido en la parte de abajo? al principio del video sale texto puesto pero luego no explica como
Source Code : bit.ly/2UdEoCs
I appreciate that
awesome tutorial ,by the way, I like the background music
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.
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.
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
Your level of Front End is awesome! Good Video... Like and new suscriber, waited more.
I like the active windows watermark
Hi, I'm from Russia and you helped me a lot
Hail mother Russia
Which editor is that? Pls lemme know and I loved this website design thanks
Just simply add the css code in your body element;
background-attachment: fixed;
and you're done. The video was irrelevant to be from scratch.
No. Try it and see what happens. Make sure you check out the output you get from this code. Pay attention and you'll see the difference.
It doesn't work on iOS and most of mobiles
really helpful tutorial. But can i pls know wut is the font ur using i really like it
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 do you put text in the whitespace after the effect? I have been trying using footers but they move when scrolling...
Same
ruclips.net/video/-_ZX7DKt6Es/видео.html
THANK YOU! first code I could actually get working on my site!
I mean you could just do this:
background-attachment: fixed;
to the background image to get a parallax effect.
Try and match the result with this.
it's also not great for performance
Which text editor is best suggest me ?
✓sublime text 3
✓brackets
✓atom
Or any others
As a small text editor I use sublime. As a full-on IDE, I use JetBrains WebStorm (or Intellij IDEA, if you want the same thing but for more than just web dev). Visual Studio Code is also highly recommended and free.
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?
I cant only remove the text, the background will also delete, i just want a black background at the bottom how to fix.
Thank you for instructing and sharing!
I got this to work, great video thank you
how did you put the color of your tag in blue? My atom is red.
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?
Cause there is an empty space to the right and have no idea what generates it
@@maximilianotorres1225 * { box-sizing: border-box }
Instead of explaining the code, you just played random jungle music....
figure it our yourself, it's not that difficult and you will learn a thing or two about css
ruclips.net/video/jp7USotAq2U/видео.html
It is not algos, that are needed to be explained
Its very inspiring to do coding while listening to music
Hi thanks for the tutorial; is there a way to change the background image using Liquid? Trying to apply this using a Jekyll layout
Your css level is so good :o
Thank for sharing this kind of thing,hope god blesses you .
How to add paragraph lines in bottom, as you showed at 1st
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?
*background-image: url('BG.jpg');*
and
font-weight: normal;
is pretty pointless if you're not having a related font-weight :P
xD
Great job! Does it work in mobile version?
It would be great if u explain along with >
Tip: You should do a nice voiceover instead of the music.
hello, how can you put a hyperlink in there ? i tried combining them but doesnt work?
Hi Codegrid im loving your vids!! keep it up!! but I have 1 question what you use for coding? Sublime?
No, it is my favourite programme for coding : Visual Studio Code ))))
What effect did you use for the video intro?
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.
what does the header, header:before attribute-address address/ which function has the header:before (shouldn't it also be"header::before"?)?
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.
Great job! What is that text editor theme?
This is Beautiful! Thank you!
Cool video🤩
Can you please tell me what's your picture resolution is it 1920 X 1080
bro please what font you are using in vscode ??????????/
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
friggin sick intro!!
can you give the background image
link ...??
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 ?
I cant add the image in background-image the pictures is not appearing, im using this in React.js Can you help me pleaseeeeeeeeeeee???????
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..?
What editor did you use? What theme?
How can you add a sticky nav to this? I have already built the complete page and want to animate it with this....
Hi! Can this parallax effect be done for a video?
I loved the introduction! can you teach how you did this glitch/computer/code effect?
Hey really stuck on this, like is there any way to add an image after the paragraph?
Came for the code driven by music
mate you are the best!
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
I'm trying to make a full website out of this and I'm struggling to get the other stuff at the bottom to not match the parallax effect, I do not recommend using this tutorial to make a full website
use position: absolute. this design is all about the positioning of the different elements
This doesn't seem to work in Safari. Am I making a mistake or is it just not supported?
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?
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.
What's the app you're using to code ?
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?
im having the same issue, everything i had rolls as the tittle effect
How to make sliding dark main content 0:20 my it's not working
Hello. Which coding editor?
Hey, My page is not scrolling down with the same code. Please if someone can help that would be great.Thank you so much.
Can somebody help me? The parallax works but I don't know how to insert the lorem ipsum part.
Add another division after the use width:100% give it a background-color: and write all that you need in a paragraph
Very handy for my parallax site. :)
Do you download music from the soundcloud mobile app?
not sure but when i run my page is just plain white no text
please be kind to give the code in description.
Lol 0 effort, immediate results?
No NO beacause i need to try many... I am learning from template's codes so it's boring to see the all vodeo
Yeh there is a true too but, so he can give them for $$$ to buy the code...
Then learn from a book
So put in the effort and try it... You've put in more effort displaying how lazy you are and rather than actually typing for 5mins hahaha
What software do you use also can I make a similar like that use adobe brackets? Thanks
Codegrid use an Atom Code Editor
copied as it is but not working, anything which is not shown in the video which is required, may be skipped because it is too common but I am new to web development
perspective: 1px
and transform-style: inherit giving me warnings*. there is a solution?
im using javabeans latest version**
use vscode or atom for web development.. javabean is not for web development!!
do you know how to put a fixed header/nav bar at the top of this? am struggling.
great video though, thanks!
Position: fixed;
Can you give the code on how you put the descriptions at the bottom.
Its long way you only type background attachment : fixed; and it will parallax effect
Try it and see closely what happens, you won't get same result as it is in the video.
plz tell me what program do you use
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.
Z-index only works if the element is positioned, so you'll have to also add the property position: relative
Not working in Firefox, Edge and IE
I'm not seeing it work in Chrome either
what vs code theme are you using?? plss answer