skrollr.js data attribute into java-script file

Question

i use the api "skrollr.js" in my wordpress-website.

Now i have a div-box like this

<div data-_foobar="left:0%;" data-_foobar--100="left:50%;" data-_foobar-100="left:100%;"></div>

is it possible to swap this attributes into a js-file like this:

HTML:

 <div id="myDiv"></div>

javascript:

function initJarallax()
{
  //Init SkrollR
  var s = skrollr.init();

  //this function doesn´t exists
  s.addAttribute("myDiv","data-_foobar","left:0%");
  ....
 }

Thanks!

Answer 1

anderssonola show me the best way(i think).

I do this steps:

1. download skrollr-stylesheets from this url

2. add this in the header:

   link href="http://myUrl.com/wp-content/themes/FullScreenTheme/style.css" rel="stylesheet" data-skrollr-stylesheet>

3. wrote this code

   #myDiv{
    -skrollr-animation-name:animation1;
     }
   
   @-skrollr-keyframes animation1 {
   data-_foobar{left:0%;}
   data-_foobar--100{left:50%;};
   ....
   }
   

Thanks!

Answer 2

I do not know skrollr, but in a jquery style you could do something like

$("#myDiv").attr("data-_foobar--100", "left:50%");
$("#myDiv").attr("data-_foobar-100", "left:100%");
$("#myDiv").attr("data-_foobar", "left:0%");

Can you jsfiddlize your case?