3

It's my first time using skrollr so the last few hours I've been trying lots of things in order to get to grips with it.

The plan is to have a 3d image of a building and as I scroll the building will turn 360degrees. I'm currently using a car as an example and it's in a large bg image where I change the position of the background depending where I am. Here is a snippet of my code:

<div data-0="" data-900="" class="skrollable skrollable-before ">                
            <div id="wrap"> 
                <div class="car" data-0="dispay:block;" data-50="display:none;background-position:!0 0px;"></div>
                <div class="car" data-0="display:none;" data-50="display:block;background-position:!0 -500px;" data-100="display:none;"></div>
                <div class="car" data-0="display:none;" data-100="display:block;background-position:!0 -1000px;" data-150="display:none;"></div>
                <div class="car" data-0="display:none;" data-150="display:block;background-position:!0 -1500px;" data-200="display:none;"></div>
                <div class="car" data-0="display:none;" data-200="display:block;background-position:!0 -2000px;" data-250="display:none;"></div>
                <div class="car" data-0="display:none;" data-250="display:block;background-position:!0 -2500px;" data-300="display:none;"></div>
            </div>
        </div>

This is working correctly!

However, this is going to be on a long page filled with other content. What I'd like to do is have the building so it's fixed to the page as it's rotating. I've tried using position fix but it just seems a bit funny as all my other content then gets pulled around.

Am I missing something how could this be done?

I've seen examples of other websites achieve it and I've tried inspecting the code to get an idea of how it's done but I can't seem to spot it.

Any help would be appreciated!

Edit ** This is what I ended up with in the end:

<div class="wrap" 
        data-0="margin-top: -250px;" 
        data-_foobar--50="opacity: 0;" 
        data-_foobar-0="opacity: 1; display: block;"
            <div class="building"                
                data-_foobar-50="background-position:!0 0px;" 
                data-_foobar-100="background-position:!0 -500px;" 
                data-_foobar-150="background-position:!0 -1000px;"
                data-_foobar-200="background-position:!0 -1500px;" 
                data-_foobar-250="background-position:!0 -2000px;"
                data-_foobar-300="background-position:!0 -2500px;"
            >
            </div>
    </div>

I fixed the position of 'wrap' and set it to hide and then show once it was in the viewport using constants.

var viewportHeight = $(window).height();
    var constantsData = Math.floor(viewportHeight * 1); 
    var s = skrollr.init({
        constants: {
            foobar: constantsData
        }
    });
user1788364
  • 1,141
  • 3
  • 19
  • 33
  • what do you mean by "all my other content then gets pulled around" ? – Brian Glaz Jan 10 '14 at 15:01
  • Sorry, what I meant was that once I set a position:fixed it takes it out of the content so then the rest of the content goes together (as in there is no longer a gap for that div - does that make sense)? I'm trying to make it so my animation will stay in the centre a bit like: http://eone-time.com/ (scroll down to where the watch rotates as you scroll - it stays in the middle and doesn't scroll up) – user1788364 Jan 10 '14 at 15:08
  • To do something like that, I would just make an empty div and give it enough height so that your entire animation can run before the next set of content scrolls into place. – Brian Glaz Jan 10 '14 at 15:29
  • I want it to stay in place like on the eonetime website though. But the whole transition to and from that it jerky because if I switch it from position:fixed to position:relative after X amount of scroll it looks jumpy – user1788364 Jan 10 '14 at 15:56

1 Answers1

2

have your building div right under the body tag or a root element with position relative. 

<body>
   <div class="building"></div>

.building
{
  position: fixed;
  z-index: 99;
  top: 10px;
  left: 10px;
  background-image: url(...)
}

you can change the top and left according to your needs. now, instead of having many div with different data-.. , you can have just one as follows:

 <div class="building" data-50="transform: rotate(45deg)" data-150="transform: rotate(90deg)" data-300="transform: rotate(135deg)"></div>

and so on... I have used skrollr on many website, below are the links in you want to inspect the source:

http://kiterungame.com/ http://lifesocks.me/

Elie Andraos
  • 86
  • 4
  • Hi Elie, thats really helpful knowing that I can have it all in one div (I've now changed it so it is - thanks!). The position fixed would work but how would I tell it only to be position fixed for that section? Imagine I have 3 sections - the top section is some copy and normal images, the middle section is my skrollx animated building - and then the third section is more content/images. As I get to the middle section I would like it to show the building fixed rather than scrolling up as it rotates (does that make sense?) – user1788364 Jan 10 '14 at 16:09
  • it is still not clear for me what you want to do exactly, but if you want it fixed only when the middle section show up, you can add to the building in your data-xxx the css positioning:
    – Elie Andraos Jan 10 '14 at 16:20
  • assuming you know that when you scroll 600, your middle section will show up – Elie Andraos Jan 10 '14 at 16:20
  • You can have a look at an example here - I've had to use the clock from the website as my render isn't ready yet (so bear in mind it would be a building spinning around - not that it matters): http://lucymo.co.uk/_skrollr/ So I have a full page background at the top and then as the user scrolls down I'd ideally like the watch to go to the middle without spinning and then once it's reached the center I would like it to start spinning on the spot as the user scrolls. – user1788364 Jan 10 '14 at 17:24
  • once the watch reach the center it means your second section is at the top of the viewport. apply skrollr on the first section
    which is the same effect as you scroll down but you are in control knowing when it ends and section 2 begins, and then start applying skrollr on the watch on data-1000 as start, so it will rotate when it is centered
     – Elie Andraos Jan 10 '14 at 17:37
  • Thanks Elie, for all the help. I did what you said and it did work but then I ran into a problem. Because users monitors vary so greatly so will the data-1000 for example. So if someone is on a small screen and the viewport is 600px high they'll need to scroll an extra 400px in order to see the clock. Would this be where the 'data-anchor-target' comes in? Ideally I'd like to set it so that my '.second' div is relative to the clock so no matter what the screen size I can say it will start when it reaches there. Here's my current config: http://lucymo.co.uk/_skrollr/index2.html – user1788364 Jan 10 '14 at 19:57
  • no this is where you should use the constants, check lifesocks.me, the script in the bottom page. – Elie Andraos Jan 11 '14 at 10:46
  • function initSkrollr() { var constantsData = {}; for(i=1;i<=nbScenes;i++) { constantsData["scrollscene"+i] = Math.floor( viewportHeight * i); } sk = skrollr.init({ forceHeight : false, constants: constantsData, smoothScrolling: true }); scrollMenu.init(nbScenes, viewportHeight, sk); } – Elie Andraos Jan 11 '14 at 10:46
  • u won't need scrollmenu, it's something else, basically, you get the view port height and set constants based on it, and then use the data-_foo for example where foo is a defined constant i had the same problem on lifesocks.me – Elie Andraos Jan 11 '14 at 10:49
  • Thanks Elie for all the help. I was able to set up the constants thanks to you and kind of got it to how I wanted it! Much appreciated :) I'll update my post with the bulk of what I've done. – user1788364 Jan 13 '14 at 12:05