CODEWITHSUNDEEP
jquerycssskrollr
Emanuel Ralha
Emanuel Ralha

Reputation: 764

skrollr relative doesnt work properly

Hello im trying to understand sckrollr but i seem to fail in relative use, what im trying to get is:

i dont get i have the code above and skrollr do the animation of the second .text element as soo a i start to scroll the page, should´t he just make the animation only when the element anchor reached the view port anchor?

I just dont get it

    <style>
      body{height:100% !important;} /*SOLUTION FOR THIS PROBLEM*/
      .paralaxelem2{width:100%;height:100%;background:50% 0 no-repeat fixed;background-size:100% 100%;}
      .text{margin:0 auto;width:500px;padding:150px 0 0 0;position:relative;}
      .text h1{padding:0px;margin:0px;text-transform:uppercase;color:#000;}
      .text p{background-color:#000;color:#fff;padding:15px;}
    </style>


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_2.jpg');">
  <div class="text" data-0-top-top="opacity:1;" data--300-top-top="opacity:0;">
    <h1>SOme Home page title goes arround</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p>
  </div>
</section>


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_1.jpg');">
  <div class="text" data-bottom-top="opacity:1;padding-top:150px;" data-bottom-bottom="opacity:1;padding-top:600px;">
    <h1>SOme Home page title goes arround</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p>
  </div>
</section>


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_3.jpg');">
  <div class="text">
    <h1>SOme Home page title goes arround</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p>
  </div>
</section>

Upvotes: 1

Views: 2223

Answers (2)

Emanuel Ralha
Emanuel Ralha

Reputation: 764

I found a solution to this problem it seems that other guy is having the same problem as me, so the thing is that skrollr set the body height to auto to do some calculations and it mess up whit elements that have 100% height such as my section elements, so to solve the issue just set in css sheet "body{height:100% !important;}". it solved the problem for me.

Source: https://github.com/Prinzhorn/skrollr/issues/347

Upvotes: 1

Prinzhorn
Prinzhorn

Reputation: 22518

Quoting https://github.com/Prinzhorn/skrollr#relative-mode-or-viewport-mode

Important: All those values will be calculated up-front and transformed to absolute mode. So if either the element's box height changes (height, padding, border) or the elements position within the document, you probably need to call refresh() (see documentation in JavaScript section below). Window resizing is handled by skrollr.

In your case you are animating a vertical padding, which conflicts with the anchor. It's a chicken/egg problem. refresh as mentioned in the docs won't help you. You need to include the additional padding as an offset in the keyframe.

Upvotes: 1

Related Questions