Не работает плагин onScreen

465

07 февраля 2017, 21:59

Использую плагин onScreen для смены фона при скролле внутри блока, на сайте плагина все работает: http://silvestreh.github.io/onScreen/containers.html, у меня на сайте нет. задумка такая, что при скролле меняется прозрачность блоков, с фонами, но она не меняется, в чем проблема? Подключаю вот так? тут работает а на сайте нет... http://veka.webflow.io/#calc :

$(function() { 
  $('#winter-night').onScreen({ 
    container: '.ts-content-wrapper', 
    toggleClass: 'onScreen', 
    doIn: function() { 
      $('.night-winter').css('opacity', '1'); 
    }, 
    doOut: function() { 
      $('.night-winter').css('opacity', '0'); 
    }, 
    tolerance: 50 
  }); 
  $('#winter').onScreen({ 
    container: '.ts-content-wrapper', 
    toggleClass: 'onScreen', 
    doIn: function() { 
      $('.winter').css('opacity', '1'); 
    }, 
    doOut: function() { 
      $('.winter').css('opacity', '0'); 
    }, 
    tolerance: 50 
  }); 
  $('#spring').onScreen({ 
    container: '.ts-content-wrapper', 
    toggleClass: 'onScreen', 
    doIn: function() { 
      $('.spring').css('opacity', '1'); 
    }, 
    doOut: function() { 
      $('.spring').css('opacity', '0'); 
    }, 
    tolerance: 50 
  }); 
  $('#summer').onScreen({ 
    container: '.ts-content-wrapper', 
    toggleClass: 'onScreen', 
    doIn: function() { 
      $('.summer').css('opacity', '1'); 
    }, 
    doOut: function() { 
      $('.summer').css('opacity', '0'); 
    }, 
    tolerance: 50 
  }); 
  $('#autumn').onScreen({ 
    container: '.ts-content-wrapper', 
    toggleClass: 'onScreen', 
    doIn: function() { 
      $('.autemn').css('opacity', '1'); 
    }, 
    doOut: function() { 
      $('.autemn').css('opacity', '0'); 
    }, 
    tolerance: 50 
  }); 
});

.ts-wrapper { 
  position: relative; 
  -webkit-box-flex: 1; 
  -webkit-flex: 1; 
  -ms-flex: 1; 
  flex: 1; 
} 
.winter { 
  background-image: url("http://uploads.webflow.com/5894e295a81cad4d0ac187e5/589628539056aa345f4687ee_winter.jpg"); 
  background-position: 50% 50%; 
  background-size: cover; 
  background-repeat: no-repeat; 
} 
.winter.ts-image-block { 
  z-index: 4; 
} 
.night-winter { 
  background-image: url("http://uploads.webflow.com/5894e295a81cad4d0ac187e5/58962852bc5799a16cf775ab_winter%20night.jpg"); 
  background-position: 50% 50%; 
  background-size: cover; 
  background-repeat: no-repeat; 
} 
.night-winter.ts-image-block { 
  z-index: 5; 
} 
.ts-image-block { 
  opacity: 0; 
} 
.spring { 
  background-image: url("http://uploads.webflow.com/5894e295a81cad4d0ac187e5/58962852fedfcb741bd930d5_spring.jpg"); 
  background-position: 50% 50%; 
  background-size: cover; 
  background-repeat: no-repeat; 
} 
.spring.ts-image-block { 
  z-index: 3; 
} 
.summer { 
  background-image: url("http://uploads.webflow.com/5894e295a81cad4d0ac187e5/58962852423211551cf6a6a2_summer.jpg"); 
  background-position: 50% 50%; 
  background-size: cover; 
  background-repeat: no-repeat; 
} 
.summer.ts-image-block { 
  z-index: 2; 
} 
.autemn { 
  background-image: url("http://uploads.webflow.com/5894e295a81cad4d0ac187e5/58962851fce2d8745f42c816_autumn.jpg"); 
  background-position: 50% 50%; 
  background-size: cover; 
  background-repeat: no-repeat; 
} 
.autemn.ts-image-block { 
  z-index: 1; 
} 
.ts-image-block { 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  z-index: 1; 
  width: 100%; 
  height: 100%; 
} 
.ts-overlay { 
  position: absolute; 
  z-index: 10; 
  width: 100%; 
  height: 100%; 
  background-image: url("http://uploads.webflow.com/5894e295a81cad4d0ac187e5/58962853faafd8103e63ad18_whindow-overlay.png"); 
  background-position: 50% 50%; 
  background-size: cover; 
  background-repeat: no-repeat; 
} 
.ts-content-wrapper { 
  position: relative; 
  left: 0px; 
  top: 0px; 
  z-index: 20; 
  overflow: auto; 
  width: 100%; 
  height: 565px; 
  background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)); 
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)); 
} 
.ts-block { 
  padding: 52px; 
  color: #fff; 
  height: 600px; 
  font-size: 16px; 
  line-height: 1.2em; 
} 
#winter { 
  background: green; 
  opacity: 0.2; 
} 
#winter-night { 
  background: red; 
  opacity: 0; 
} 
#spring { 
  background: yellow; 
  opacity: 0.2; 
} 
#summer { 
  background: blue; 
  opacity: 0.2; 
} 
#autumn { 
  background: green; 
  opacity: 0.2; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://daks2k3a4ib2z.cloudfront.net/5894e295a81cad4d0ac187e5/js/webflow.29495af5d.js" type="text/javascript"></script> 
<script type="text/javascript" src="http://silvestreh.github.io/onScreen/lib/jquery.onscreen.min.js"></script> 
<div class="ts-wrapper"> 
  <div class="autemn ts-image-block"></div> 
  <div class="summer ts-image-block"></div> 
  <div class="spring ts-image-block"></div> 
  <div class="ts-image-block winter"></div> 
  <div class="night-winter ts-image-block"></div> 
  <div class="ts-overlay"></div> 
  <div class="ts-content-wrapper"> 
    <div class="ts-block" data-ix="night-winter" id="winter-night"></div> 
    <div class="ts-block" data-ix="night-winter" id="winter"></div> 
    <div class="ts-block" data-ix="night-winter" id="spring"></div> 
    <div class="ts-block" data-ix="night-winter" id="summer"></div> 
    <div class="ts-block" data-ix="night-winter" id="autumn"></div> 
  </div> 
</div>