Skrollr change text

for plan

HTML

<script src="http://www.saltaformaggio-peru.com/TRIAL/skrollr.min.js"></script>
<section>
  <div id="panel1">panel1</div>

  <div id="panel2">panel2</div>

  <div class="test" data-0="display: block;">YEP: Mesage One!</div>
  <div class="test" data-0="display: none;" data-100="display: block;" data-800="display: none;">YEP: Mesage Two!</div>
  <div class="test" data-0="display: none;" data-200="display: block;" data-700="display: none;">YEP: Mesage Three!</div>
  <div class="test" data-0="display: none;" data-300="display: block;" data-600="display: none;">YEP: Mesage Four!</div>
  <div class="test" data-0="display: none;" data-400="display: block;" data-500="display: none;">YEP: Mesage Five!</div>
</section>

CSS

#panel1, #panel2 { height: 220px; }
div.test {
    font: 800 16px/22px Sans-serif;
    text-align: center;
    width: 100%;
    height: 22px;
    padding: 0 10px;
    position: absolute;
    background: #BEBEBE;
    position:fixed;
    bottom:0px;
    top: auto;
}
.red {
    background: red;
}
.yellow {
    background: yellow;
}
.blue {
    background: blue;
}
.green {
    background: green;
}
.purple {
    background: purple;
}

JavaScript

skrollr.init({
    forceHeight: true,
    smoothScrolling: true
});