0

Let us say I want to design a website with four slides. I would like each slide to cover the previous one while the visitor is scrolling. Following is an attempt with stellar.js (a jquery plugin): http://jsfiddle.net/8mxugjqe/. You can see that it works for the first slide, which gets covered by the second one, but I could not have it work for the others.

HTML: 

<body>
    <div id="one" data-stellar-ratio=".2">
        <p>This is the first div.</p>
    </div>
    <div id="two" data-stellar-ratio="1">
        <p>This is the second one.</p>
    </div>
    <div id="three">
        <p>Third one!</p>
    </div>
    <div id="four">
        <p>Fourth and last.</p>
    </div>
</body>

CSS: 

* {
    margin: 0;
    padding: 0;
}
#one, #two, #three, #four {
    position: absolute;
    height: 100%;
    width: 100%;
    font-size: 5em;
}
p {
    margin: 1em;
    width: 60%;
}
#one {
    background: red;
}
#two {
    background: blue;
    top: 100%;
}
#three {
    background: green;
    top: 200%;
}
#four {
    background: yellow;
    top: 300%;
}
j08691
  • 204,283
  • 31
  • 260
  • 272
bbc
  • 240
  • 2
  • 8
  • The `data-stellar-ratio` attribute just controls the speed with which the element scrolls. A value of `1` means that the element will scroll at the normal speed, a value of `.2` means that the element will scroll at 20% of the normal speed, etc. I don't think you can use this to achieve what you're looking for. Basically, you need to scroll each slide until it hits the top of the browser window and then stop scrolling it. You could probably achieve this using stellar and some jQuery to modify the `data-stellar-ratio` values programmatically. – jwnace Nov 04 '14 at 15:30
  • 1
    It seemed like the `data-stellar-vertical-offset` attribute could have helped me achieve what I wanted but you are probably right. In fact, stellar.js was merely an example; I am open to other techniques. This is also why I did not initally add stellar.js as a tag (it has been added subsequently by j08691). – bbc Nov 05 '14 at 09:21

1 Answers1

1

I was able to throw something together using just jQuery and no other libraries. It relies on relative positioning. Basically, everything scrolls normally until one of the slides reaches the top of the browser window. Once it tries to scroll past the top of the browser window, I add an offset to the slide's vertical position to keep it from moving up any further. When scrolling back the other way, I simply subtract from this offset until it hits 0 at which point it begins to scroll normally again.

I'm sure the code can be cleaned up but I added a ton of comments so hopefully it's readable. If you have any questions or you would like me to modify it to better suit your needs, let me know. Here's a fiddle with the solution I came up with:

http://jsfiddle.net/jwnace/jhxfe2gg/

You can also see a full page demo of the same code here:

http://joenace.com/slides/

jwnace
  • 360
  • 3
  • 11
  • 1
    This is precisely what I was trying to achieve. I think the code could be made more compact but, as a beginner, I really appreciate your comments and explanations. – bbc Nov 06 '14 at 17:19
  • 1
    Also, Chrome on Android seems to interfere with javascript, preventing a smooth scrolling. Maybe you have an idea why it is so and how it can be fixed? – bbc Nov 06 '14 at 17:25
  • Thanks for the feedback. I'll test it on Chrome for Android and see what I can find. I only tested it on Chrome, FF, and IE for Windows so far. – jwnace Nov 06 '14 at 18:18
  • I just tested on Chrome for Android, and I think I see what you mean. Are you talking about how it looks kind of jittery, like the text is jumping around? I'm not sure what can be done about that but I'll play with it and see if I can fix it. – jwnace Nov 06 '14 at 18:33
  • Yes, this is what I am referring to. – bbc Nov 07 '14 at 16:27