EzDev.org

skrollr

skrollr - Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love). skrollr - parallax scrolling for the masses


Skrollr run animation once only then stop

How can I run an animation in Skrollr once, and then kill it?

I've tried:

  • The beforerender method but that kills all animations
  • Looking for ways to set individual Skrollr instances, but it's a singleton
  • Removing or renaming the object's attributes
  • nullifying the object's className
  • Toggling a CSS class

Each time, it looks like the values are cached within Skrollr and fire regardless of my efforts. What am I missing here?


Source: (StackOverflow)

How to fix Skrollr on Mobile?

I have followed the guidelines for mobile browser support by wrapping the content in a after and before the body tags.

Explination is here: https://github.com/Prinzhorn/skrollr#what-you-need-in-order-to-support-mobile-browsers

The site still wont allow the page to scroll on an iPad however. I'm not sure why. Any code sleuthing would be much appreciated.

Site with code is http://bit.ly/1rr6zGA


Source: (StackOverflow)

what, exactly, does data-anchor-target do?

I'm playing around with Skrollr and for the most part it seems pretty intuitive, the one thing that kind of gets me is the data-anchor-target attribute. Most times I don't need it but when I look at some examples it's usually included and I'm confused as to what it does. Does it just mean that at that target, that's when the Skrollr data-(pos) attributes kick in?


Source: (StackOverflow)

Skrollr background transparency?

I just installed the so called Skrollr plugin to my html. I want the background-color to start as transparent and end as rgb 80 80 80.

I can't make it work. This is what I've tried so far:

<div id="navigation" data-0="background-color:transparent;" data-380="background-color:rgb(80,80,80);">

Anyone who knows?

Thanks


Source: (StackOverflow)

Skrollr init set height to be too high

I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.

The problem can be seen here: http://codepen.io/designil/pen/Ggxde

HTML:

<div class="headrow">
<div class="container">
  <div class="row">

    <div class="col-md-3">
      <h1 class="logo"><a rel='nofollow' href="#">21GUNS</a></h1>
    </div>

    <div class="col-md-9">
      <div class="topmenu">
        <p>
          <a rel='nofollow' href="#"><i class="fa fa-twitter"></i></a>
          <a rel='nofollow' href="#"><i class="fa fa-facebook"></i></a>
          <a rel='nofollow' href="#"><i class="fa fa-linkedin"></i></a>
          <a rel='nofollow' href="#"><i class="fa fa-pinterest"></i></a>
        </p>
        <ul class="list-unstyled">
          <li>
           <div class="dropdown">
  <a data-toggle="dropdown" rel='nofollow' href="#">MENU 1</a>
  <ul class="dropdown-menu" role="menu">
    <li role="presentation"><a role="menuitem" tabindex="-1" rel='nofollow' href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" rel='nofollow' href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" rel='nofollow' href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" rel='nofollow' href="#">Separated link</a></li>
  </ul>
</div>
          </li>
          <li>
            <a rel='nofollow' href="#">MENU 2</a>
          </li>
          <li>
            <a rel='nofollow' href="#">MENU 3</a>
          </li>
          <li>
            <a rel='nofollow' href="#">MENU 4</a>
          </li>
          <li>
            <a rel='nofollow' href="#">MENU 5</a>
          </li>
        </ul>
       </div>
    </div>
  </div>
</div>
</div><!-- headrow -->

<div class="bannerrow">
  <img src="http://placehold.it/1800x600" alt="" />
</div>

<div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3 text-center">
        <header>
          <h2>21SERVICES</h2>
          <p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p>
        </header>
      </div>
    </div><!-- row -->

    <div class="row">
      <div class="col-md-5">
        <div class="column2-box">
          <i class="fa fa-gift fa-fw"></i>
          <h3>FLAT DESIGN</h3>
          <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
        </div>
      </div>
      <div class="col-md-5 col-md-offset-2">
        <div class="column2-box">
          <i class="fa fa-gift fa-fw"></i>
          <h3>FLAT DESIGN</h3>
          <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div class="col-md-5">
        <div class="column2-box">
          <i class="fa fa-gift fa-fw"></i>
          <h3>FLAT DESIGN</h3>
          <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
        </div>
      </div>
      <div class="col-md-5 col-md-offset-2">
        <div class="column2-box">
          <i class="fa fa-gift fa-fw"></i>
          <h3>FLAT DESIGN</h3>
          <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
        </div>
      </div>
    </div><!-- row -->


  </div>
</div>

<link rel="stylesheet" rel='nofollow' href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>

CSS:

@blue: #293448;
@red: #C1392B;

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: 'Open Sans', sans-serif;
}

.headrow {
  background: @blue;
}

.logo a {
  color: #fff;
  transition: 0.3s;

  &:hover {
    text-decoration: none;
    color: #eee;
  }
}

.topmenu {
  text-align: right;

  p {
    margin-top: 10px;

    a {
      display: inline-block;
      margin: 0 5px;
      text-align: right;
    }
  }

  ul {
    margin-bottom: 0;
  }

  li {
    display: inline-block;
    margin-left: 30px;

    a {
      color: #eee;
      display: block;
      padding-bottom: 10px;
      border-bottom: 3px solid transparent;
      transition: 0.3s;
    }

    a:hover {
      text-decoration: none;
      border-bottom: 3px solid @red;
    }

    .dropdown-menu {
      text-align: left;

      li {
        margin: 0;
        display: block;
      }

      a:hover {
        background: #ccc;
      }

      a {
        color: @blue;
        border: 0;
        transition: 0;
      }
    }
  }
}

.bannerrow {
  img { width: 100%; height: auto;}
}

.servicerow {
  color: #fff;
  padding-bottom: 100px;
  background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat;
  background-size: cover;

  header {
    margin-top: 60px;
    margin-bottom: 20px;

    h2 { margin-bottom: 10px; }

    p { font-size: 13pt; }
  }
}
  .column2-box {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 15px 0;

    i { font-size: 110px; float: left; }

    h3 { margin-top: 0; }

  }

JS:

$(function() {
  $('.dropdown-toggle').dropdown();

   $('.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });

  var s = skrollr.init({forceHeight: false});
});

I am not sure which element makes the page too high.


Source: (StackOverflow)

Disable Skrollr for mobile device ( <767px )

Firstly would like to thanks @prinzhorn for such an amazing and powerful library. My question: I have implemented a Skrollr parallax background to the header of my website but I would like to disable this feature when viewed on a mobile device, particularly iphones, etc. eg. (max-width: 767px).I was wondering what would be the best way to do this? And if the destroy() function was able to do this or I should be using another technique? Also, if destroy() is the answer, how could I implement this correctly? Many thanks and examples or demo's greatly appreciated.


Source: (StackOverflow)

Why is skrollr preventing scolling on ipad?

I'm trying to create a simple parallax animation with skrollr: my site is working well on Chrome/Mac but I'm seeing unusual behaviour on the ipad..

On ipad (testing on the IOS simulator),

  • the main body of the page doesn't skroll at all (or may scroll in the background, underneath the animated div?)
  • the animated background position (origami pattern) scrolls in the opposite direction (down is up) within the bounds defined in data-start / data-top-bottom

On desktop, the effect I can simulate the effect if I hack the div#hero to be position: fixed; in chrome dev tools.

  • The skrollr examples work as expected in the IOS simulator.
  • I have <div id="skrollr-body"></div> just before the closing </body> tag

(edit: broken link removed)

Any suggestions?

TIA, Tim


Source: (StackOverflow)

Pause Scrolling to Next 'Slide' till all Animations are complete

I am creating a 'limited' visual builder for Skrollr sliders. It allows the user to build sliders that consist of slides (html section tags) that sit one below each other on the page, each slide contains many html elements that have Skrollr data attributes/animations (keyframes?) applied to them.

Is there a way to pause that slides (advancement to the next slide) until all its inner elements have completed their animations?

I am aware of the example pausing.html that demonstrates kindof what I need but these 'slides' are fixed which could cause problems for my users. The sliders will be chucked into WordPress website themes where most elements are not fixed.

Because the slide contents are so dynamic and unpredictable its hard to know how long to lock scrolling? Hopefully its possible to do this?

Example of my dilemma:

.... Some regular WordPress page content (Navbar, Header maybe posts, etc.)

<div id="skrollr-body">

    // Pause this slides scrolling till all child elements have completed their animations
    // Slide child elements will ALWAYS have relative animations (data-100-top="..." NOT data-100="...")
    <section id="slide-1" class="slide">

        <p data-center="opacity: 1;" data-top="opacity: 0;">Some awesomeness</p>

        <img data--100-center="transform: translate(-100%,0);" data-top="transform: translate(0,0);"  src="..."/>

        ... lots of other elements

    </section>

    <section id="slide-2" class="slide">
        ...
    </section>

    <section id="slide-3" class="slide">
        ...
    </section>

</div>

.... Some regular WordPress page content (Footer, maybe posts, etc.)

Source: (StackOverflow)

Skrollr not working on mobile devices

so this seems to be a common question, however none of the answers have provided me with any joy. I've fully read the Skrollr Documentation and can conclude I'm totally at a loss here.

My Website

My basic html markup:

<html>
  <head>
    <!-- Head Stuff -->
  </head>

  <body>
    <div id="navbar">
      <!-- This is a fixed position div -->
    </div>
    <div id="skrollr-body">
      <!-- Rest of my site -->
    </div>
    <script src="skrollr.min.js"></script>
    <script>
      skrollr.init({
        forceHeight: false
      });
    </script>
  </body>

</html>

So you can see as the documentation states my fixed element is outside my other content.


I'm using Version 0.6.26 (2014-06-08) - downloaded from the GitHub page.

Download Zip

Mobile testing on iPad 2, iOS7 and Google Nexus 4, Android 4.4.4

Thanks in advance for any suggestions/help


Source: (StackOverflow)

Audio on scroll

I'm doing a website with the skrollr plugin and I'm almost done with the pictures and scrolling itself, so I'm trying to add the audio now, but I can't seem to make the audio start and stop when I want it to. This is the script I am currently working with:

<script>

$(window).scroll(function() {
    var height = $(document).height() - $(window).height();
var scroll = $(window).scrollTop();  
      var audioElm = $('#soundTour').get(0);
    audioElm.play();
    audioElm.volume = 1 - $(window).scrollTop()/height;
    console.log(audioElm.volume);
});
</script>

This makes my audio start as soon as the website is loaded and fade out across the span of the entire website, so when you've scrolled to the bottom, it's completely silent. I've tried messing with the "height" variable in the script, but to no avail. The sound always ends up heavily lowered, but still faintly playing in the background. Is there a way to make it shut up at a certain scroll point? For example, make the audio play at $(window).scrollTop() = 500 and stop at $(window).scrollTop() = 3000?


Source: (StackOverflow)

Dynamically set attribute key (e.g. data-{foo}="bar") in React

Setting an attribute in React is straightforward if you know the key, e.g.

data-500={this.props.YDistance}

but how can one dynamically set part of the key. e.g.

data-{this.props.YDistance}="valueHere"

var Test = React.createClass({

    render: function() {
        return (
            <div data-{this.props.YDistance}="valueHere">
                {this.props.children}
            </div>
        );
    }

});

ReactDOM.render(
    <Test YDistance="500">Hello World!</Test>,
    document.getElementById('container')
);

There are libraries that require this kind of attribute setting (e.g. skrollr et al)


Source: (StackOverflow)

Skrollr: how to start animation only once a certain point is reached?

I'm playing with skrollr plugin but can't achieve what I want so looking for assistance. I've been able to implement easy effects such as <div id="intro-left" data-0="opacity: 0" data-180="opacity: 1"> (means that my DIV called intro-left becomes visible once user scrolls down by 180)

The issue is that I don't like to use the scrolling distance since this would only makes sense if everone had the same screen resolution right?

What I'd like to do is to tell skrollr: "Change DIV from opacity 0 to opacity 1 once the DIV position becomes visible on the screen" (in other words "Change DIV from opacity 0 to opacity 1 once user reaches a certain point on the page by scrolling down)

Is this achievable with skrollr, and how?

Many thanks


Source: (StackOverflow)

How to ignore javascript on smaller resolutions?

My dev site uses lots of Skrollr animation at 1024px resolutions and up. Under 1024px, I don't want the animation to show, so I hid all of the images and whatnot.

However, the javascript that gets called to make the animation work is still getting called on smaller resolutions and causing some issues.

Is there a way to basically say "If the resolution is less than 1024px, ignore these JS files"?

I tried putting them in a DIV and using my existing CSS media queries to "display: none" the DIV on smaller resolutions, but that doesn't work.

FYI, these are the files being called:

<script type="text/javascript" src="/js/skrollr.min.js"></script>
<script type="text/javascript" src="/js/homepageanimation.js"></script>

Source: (StackOverflow)

Drawing SVG on scroll with skrollr

I'm trying to draw a simple svg as the user scrolls down on the viewport. I'm using skrollr because it's meant to be simple, but I can not make it work.

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1610.2 1604.6" style="enable-background:new 0 0 1610.2 1604.6;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#1D1D1D;}
    .st1{fill:none;stroke:#666666;stroke-miterlimit:10;}
    .st2{fill:none;stroke:#666666;stroke-width:1.0674;stroke-miterlimit:10;}
    .st3{fill:#666666;}
    .st4{fill:url(#SVGID_1_);stroke:#666666;stroke-miterlimit:10;}
    .st5{fill:#161616;stroke:#666666;stroke-miterlimit:10;}
    .st6{fill:url(#SVGID_2_);stroke:#666666;stroke-miterlimit:10;}
    .st7{fill:#F7F7F7;}
</style>

<rect data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  x="-397.1" y="-1042.5" class="" width="447.4" height="295"/>
<line data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st1" x1="-400" y1="-988.5" x2="-86" y2="-988.5"/>
<line data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st1" x1="-7" y1="-989" x2="50.3" y2="-988.5"/>
<rect data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  x="-74.5" y="-1016.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 685.2816 -322.584)" class="st2" width="55.5" height="55.5"/>
<path  data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st3" d="M-46.8-1025.2L-46.8-1025.2c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
    C-44.2-1026.3-45.3-1025.2-46.8-1025.2z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"   class=" st3" d="M-46.8-946.9L-46.8-946.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
    C-44.2-948-45.3-946.9-46.8-946.9z"/>
<path  data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st3" d="M-7.7-985.9L-7.7-985.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
    C-5.1-987.1-6.3-985.9-7.7-985.9z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st3" d="M50.3-986.2L50.3-986.2c-1.2,0-2.2-1-2.2-2.2l0,0c0-1.2,1-2.2,2.2-2.2h0c1.2,0,2.2,1,2.2,2.2l0,0
    C52.6-987.3,51.6-986.2,50.3-986.2z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st3" d="M-86-985.9L-86-985.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6l0,0c1.4,0,2.6,1.1,2.6,2.6l0,0
    C-83.4-987.1-84.6-985.9-86-985.9z"/>
<linearGradient data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"   id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="885.6667" y1="-1039.5" x2="885.6667" y2="-410.7027">
    <stop  offset="0" style="stop-color:#212121"/>
    <stop  offset="1" style="stop-color:#212121"/>
</linearGradient>
<polygon data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st4" points="50.3,-1042.5 50.3,-378.5 1721,-1040.5 "/>
<polygon class="st5" points="1721,-1040.5 2302.9,-1040.5 1564.7,-747.5 981.6,-747.5 "/>
<linearGradient id="SVGID_2_" data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  gradientUnits="userSpaceOnUse" x1="1564.6666" y1="-894" x2="2302.9167" y2="-894">
    <stop  offset="0" style="stop-color:#212121"/>
    <stop  offset="1" style="stop-color:#212121"/>
</linearGradient>
<polygon  data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;"  class="st6" points="2302.9,-747.5 2302.9,-1040.5 1564.7,-747.5 "/>
<rect x="393" y="-926.5" class="st7" width="593" height="434"/>
<g data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" >
    <polyline class="st1" points="2.5,0 2.5,162 43.2,162 43.2,30 748.7,30 748.7,162 916.7,162 1516.8,162 1607.7,162 1607.7,911.1
        1512.8,911.1 1512.8,778.1 815.8,778.1 815.8,912.1 641.7,912.1 293.8,912.1 293.8,1264.1 293.8,1597.1 343.3,1597.1 343.3,1462.1
        1040.8,1462.1 1040.8,1602.1 1108.2,1602.1   "/>
    <circle class="st3" cx="2.5" cy="162" r="2.5"/>
    <circle class="st3" cx="43.2" cy="162" r="2.5"/>
    <circle class="st3" cx="748.7" cy="162" r="2.5"/>
    <circle class="st3" cx="1512.9" cy="778.1" r="2.5"/>
    <circle class="st3" cx="1512.8" cy="911" r="2.5"/>
    <circle class="st3" cx="1607.7" cy="911" r="2.5"/>
    <circle class="st3" cx="815.8" cy="778.4" r="2.5"/>
    <circle class="st3" cx="815.7" cy="912.1" r="2.5"/>
    <circle class="st3" cx="293.8" cy="1597" r="2.5"/>
    <circle class="st3" cx="343.5" cy="1597" r="2.5"/>
    <circle class="st3" cx="343.2" cy="1462.2" r="2.5"/>
    <circle class="st3" cx="1040.8" cy="1462" r="2.5"/>
    <circle class="st3" cx="1040.7" cy="1602.1" r="2.5"/>
</g>
</svg>

Here is a pen to my code: http://codepen.io/ohmmho/pen/zqjbRW

May be I'm setting the data-end/start points to the wrong elements? There are elements like 'line' and 'rect' that confuse me, I'm learning SVG animations. Some light on this would be appreciated.

Thanks ;)


Source: (StackOverflow)

Angular2 Directive: How to detect DOM changes

I want to implement Skrollr as an Angular2 attribute directive.

So, the format may be:

<body my-skrollr>
</body>

However, in order to implement this, I need to be able to detect changes in the DOM in child elements below the containing tag (in this case, <body>), so that I can call skrollr.init().refresh(); and update the library to work with the new content.

Is there a straightforward way of doing this that I'm not aware of, or am I approaching this incorrectly?


Source: (StackOverflow)