I am coding the visual part of a website and I am trapped. I am trying to preserve mostly CSS for greater compatibility, but I want to use some jQuery: mainly when the user scrolls the window, therefore Parallax and Skrollr.
As you know, Parallax allows, among other things, to scroll the background at a speed compared to scrolling the window itself. This creates and affects the 3D plane. That's why I use Parallax: to scroll through specific backgrounds, as if they were physically behind the main content.
The scroller works to launch certain animations at certain points in the scroll position of the window.
I use both together to have an animated background that animates when the user scrolls the window while scrolling at a speed relative to the window scrolling. Perhaps this animation will help illustrate this in a way that may be clearer:
As you can see, when the user scrolls the main window, the content (Top window) scrolls as usual. However, the background group (Bgs 1, 2, and 3) also scrolls, but slower (this Parallax works). Although you cannot notice the “slower speed” in this animation, you should keep in mind that at the same time, when they move in unison, their shows go from block to none , first, then another, different, etc., and vice versa. forming a loop that animates all of these backgrounds as the user continues to scroll (this works with Skrollr).
So far so good. I have one of these background sets at the top of the page and everything is going well. However, the way down, I am having problems with the second set of backgrounds. This second set is displayed as shown below: instead of being one on top of the other, the separate background-position layers, which should always start at 0, are shifted by about 200 pixels. The image should show the problem very clearly.
As you can see, these two backgrounds (Bgs 2 and 3) should be displayed one on top of the other. However, one of them clearly kicked down, as well as the remaining individual bg layers that come from above. Only the first or lowest level is displayed.
The HTML codes for both sets are almost identical (the only difference is that we set 1 inside the general DIV wrapper, while set 2 is the same as inside the <body> :
HTML SET 1
<div id="head_wrapper"> <div class="background_head bg1_1"></div> <div class="background_head bg1_2" data-0="display: none;" data-50="display: block;" data-400="display: none;" data-450="display: block;" data-800="display: none;"></div> <div class="background_head bg1_3" data-0="display: none;" data-100="display: block;" data-350="display: none;" data-500="display: block;" data-750="display: none;"></div> <div class="background_head bg1_4" data-0="display: none;" data-150="display: block;" data-300="display: none;" data-550="display: block;" data-700="display: none;"></div> <div class="background_head bg1_5" data-0="display: none;" data-200="display: block;" data-250="display: none;" data-600="display: block;" data-650="display: none;"></div> </div>
HTML SET 2
The CSS for each set is as follows:
CSS SET 1
#top_wrapper { width: 100%; min-width: 1000px; position: relative; overflow: hidden; } #head_wrapper { position: relative; margin: 0 auto; width: 1133px; height: 733px; } .background_head { background-position: 50% 0; background-repeat: no-repeat; width: 1133px; height: 733px; position: absolute; top: 0; left: 0; } .bg1_1 { background-image: url(../img/bgs/bg1_1.jpg); z-index: 11; } .bg1_2 { background-image: url(../img/bgs/bg1_2.jpg); z-index: 12; } .bg1_3 { background-image: url(../img/bgs/bg1_3.jpg); z-index: 13; } .bg1_4 { background-image: url(../img/bgs/bg1_4.jpg); z-index: 14; } .bg1_5 { background-image: url(../img/bgs/bg1_5.jpg); z-index: 15; }
CSS SET 2
.background_wrapper { position: relative; width: 1133px; height: 400px; margin: 0 auto; } .background_content { background-position: 50% 0; background-repeat: no-repeat; width: 1133px; height: 400px; position: absolute; top: 0; left: 0; } .bg2_1 { background-image: url(../img/bgs/bg2_1.jpg); z-index: 21; } .bg2_2 { background-image: url(../img/bgs/bg2_2.jpg); z-index: 22; } .bg2_3 { background-image: url(../img/bgs/bg2_3.jpg); z-index: 23; } .bg2_4 { background-image: url(../img/bgs/bg2_4.jpg); z-index: 24; } .bg2_5 { background-image: url(../img/bgs/bg2_5.jpg); z-index: 25; }
And finally, this is jQuery that links Parallax and Skrollr with all these good things:
JQUERY SETS 1 & 2
skrollr.init({ forceHeight: false, smoothScrolling: true }); $(document).ready(function(){ $('.bg1_1').parallax("50%", -0.75); $('.bg1_2').parallax("50%", -0.75); $('.bg1_3').parallax("50%", -0.75); $('.bg1_4').parallax("50%", -0.75); $('.bg1_5').parallax("50%", -0.75); $('.bg2_1').parallax("50%", -0.3); $('.bg2_2').parallax("50%", -0.3); $('.bg2_3').parallax("50%", -0.3); $('.bg2_4').parallax("50%", -0.3); $('.bg2_5').parallax("50%", -0.3); })
I believe that everything I can show you. Hope this is clear enough. I am learning everything today and I cannot find links to these two jQuery plugins that are used together. Heaven knows that Skrollr does not have documentation, at least one that I know about, so it's hard to understand how it works without going around the code itself. Anyway, that’s why I am asking here because apparently no one has encountered this problem ... maybe these two plugins are incompatible ... I would have thought that at first, but because one of mine works The background sets are fine, I think the problem is either that I miss all the things that I just left here so that you guys can check and help me or ... I don’t know: something else .
Anyway, any help from you guys would be greatly appreciated!