Anvilpoint CyberOps - Hacker for Hire ◆ ProxiesFood: Unlimited Residential Proxy ◆ Spoof Call and Spoof SMS set any caller ◆ Cheap KYC Verifications & Openups ◆
Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Contact
Hack Forums Tech Webmasters Website Construction › Trouble with "Parallax scrolling"

New Reply 

Trouble with "Parallax scrolling"
sneezing
sneezing Offline
[n00b@HF:]
*
Registered
Posts:
53
Threads:
1
Credibility:
000
Popularity:
35
βytes:
β 0
Game XP:
0
Aug 29, 2018 08:22 PM
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.
Nachfolger
Nachfolger Offline
Certified gay communist amoeba
*
Registered
Posts:
11,370
Threads:
152
Credibility:
2000
Popularity:
3,370
βytes:
β 100.73
Game XP:
255,394
Aug 30, 2018 02:50 PM (This post was last modified: Aug 30, 2018 02:52 PM by Nachfolger.)
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.

Je t'aime
[Image: fpZ5a5g.png]

(Apr 22, 2022 04:39 PM)-Scrub Wrote:  Jokes on you, I'm not smart enough to know what he's talking about.
sneezing
sneezing Offline
[n00b@HF:]
*
Registered
Posts:
53
Threads:
1
Credibility:
000
Popularity:
35
βytes:
β 0
Game XP:
0
Aug 30, 2018 02:58 PM
(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.
dvlpr
dvlpr Offline
[user@HF:]
*
Registered
Posts:
243
Threads:
9
Credibility:
000
Popularity:
22
βytes:
β 0
Game XP:
0
Aug 30, 2018 05:49 PM (This post was last modified: Aug 30, 2018 05:50 PM by dvlpr.)
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 😁
sneezing
sneezing Offline
[n00b@HF:]
*
Registered
Posts:
53
Threads:
1
Credibility:
000
Popularity:
35
βytes:
β 0
Game XP:
0
Aug 30, 2018 06:21 PM
(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.
Next Oldest | Next Newest
New Reply 


Possibly Related Threads...
Thread / Author Replies Views Last Post
by A +Jul 8, 2020 02:38 AM 2 90 Jul 8, 2020 02:38 AM
Last Post: A +
by LegitimatelyAug 27, 2018 03:15 PM 2 124 Aug 27, 2018 03:15 PM
Last Post: EXlT
[Wordpress] by f o r m i d a b l eOct 16, 2016 05:32 PM 3 158 Oct 16, 2016 05:32 PM
Last Post: device