+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Trouble with "Parallax scrolling" (/showthread.php?tid=5879522)
Trouble with "Parallax scrolling" - sneezing - Aug 29, 2018
Hey, I've been trying to replicate an concept on a site that I was looking at and I am not sure if what I have been searching for is the right thing. I want a background image to be stationary and have the content move over it(Parallax image is what I found) . But I don't want the image to change through out I want it to be one image. When I have been trying it the main content in containers aren't "transparent" so it covers the image as I scroll. Any idea how to fix this? the site I saw it on was
dojacat.com/
And when I have been trying to replicate it the content looks something more similar to:
w3schools.com/howto/tryhow_css_parallax_demo.htm
Where it says parallax demo in the white container picture I have a container only spanning 50% in the center how do I make it so the container scrolls over top of the background image keeping the original image?
Sorry if this doesn't make sense or if I have been searching for the wrong thing.
ps. the www is missing cause I still can't post links.
RE: Trouble with "Parallax scrolling" - Nachfolger - Aug 30, 2018
This is much simpler than I thought you were asking for. Here's the generic markup you would need:
Code
<style>
HTML, body {
padding: 0;
margin: 0;
}
body {
background-image: url("https://via.placeholder.com/1200x900");
background-attachment: fixed;
background-size: cover;
/* simply for the demo */
height: 1200px;
}
</style>
<body>
<div style='text-align: center; padding: 20px 0; font-family: sans-serif; background: #ffff; margin: 35px auto; width: 85%'>Hi, this is just an example div</div>
<div style='text-align: center; padding: 20px 0; font-family: sans-serif; background: #ffff; margin: 95 auto; width: 85%'>just another div</div>
</body>As you can see, the only thing that matters is that the <body> tag has a background image using the "fixed" positioning. The fixed positioning for a background is exactly the same as position:fixed for a HTML element, it's position is fixed (go figure) and cannot move from the position on the screen. Without actually seeing your code, I can't exactly adapt it any further.
RE: Trouble with "Parallax scrolling" - sneezing - Aug 30, 2018
(Aug 30, 2018 02:50 PM)Nachfolger Wrote: This is much simpler than I thought you were asking for. Here's the generic markup you would need:
Code<style>
HTML, body {
padding: 0;
margin: 0;
}
body {
background-image: url("https://via.placeholder.com/1200x900");
background-attachment: fixed;
background-size: cover;
/* simply for the demo */
height: 1200px;
}
</style>
<body>
<div style='text-align: center; padding: 20px 0; font-family: sans-serif; background: #ffff; margin: 35px auto; width: 85%'>Hi, this is just an example div</div>
<div style='text-align: center; padding: 20px 0; font-family: sans-serif; background: #ffff; margin: 95 auto; width: 85%'>just another div</div>
</body>
As you can see, the only thing that matters is that the <body> tag has a background image using the "fixed" positioning. The fixed positioning for a background is exactly the same as position:fixed for a HTML element, it's position is fixed (go figure) and cannot move from the position on the screen. Without actually seeing your code, I can't exactly adapt it any further.
That's exactly what I was looking for. I can't thank you enough.
RE: Trouble with "Parallax scrolling" - dvlpr - Aug 30, 2018
I know you found your solution, but I wanted to make this effects library available to you (https://codyhouse.co/library?). There are a lot of cool effects related to navigation and scrolling that you may want to utilize.
Also, ps to your ps, "www" is a dying - or arguably dead - protocol 😁
RE: Trouble with "Parallax scrolling" - sneezing - Aug 30, 2018
(Aug 30, 2018 05:49 PM)dvlpr Wrote: I know you found your solution, but I wanted to make this effects library available to you (https://codyhouse.co/library?). There are a lot of cool effects related to navigation and scrolling that you may want to utilize.
Also, ps to your ps, "www" is a dying - or arguably dead - protocol 😁
thanks for this I'll give a look through the resources.