Streaming live at 10am (PST)

How to connect this plug-in


#1

Hey , tell me please , how to connect this plug-in to my site on webflow?
http://codepen.io/042/pen/ikBxE


#2

Hi @Vyacheslav, thanks for the post. You can implement code like this using a combination of custom code: http://help.webflow.com/site-settings/custom-code and using the design UI.

Try this:

  1. Create a div on your page with an ID of "wrapper" (without the quote marks)
  2. Create a second div and put that div within the wrapper div and give it an ID of "artifact" (again without the quotes)
  3. Exist the designer UI and go to the Custom Code tab of Site Settings
  4. copy the following code below to your Footer and then save changes and publish your site

​Copy this code below from the codepen:

<script>
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var SmoothScroll = function(){
  this.init();
};

SmoothScroll.prototype = {
  dirOfChange: 0,
  scrollTop: 0,
  init: function(){
    this.bindEvents();
    this.render();
  },
  bindEvents: function(){
    var self = this;
    $('body').on('mousewheel', function(e){
      e.preventDefault();
      var change =  e.deltaY * 2;
      self.scrollTop -= change;
      
      if(change > 0){
        self.dirOfChange = -1;
      }else{
        self.dirOfChange = 1;
      }
    });
  },
  render: function(){
    var self = this;
    window.requestAnimFrame(function(){      
      self.render();
    }); 
    
    if (this.dirOfChange < 0) {
      if (this.scrollTop > -1) {
        this.scrollTop = 0;
        return;
      }
    } else {
      if (this.scrollTop < 1) {
        this.scrollTop = 0;
        return;
      }
    }
    
    TweenMax.set($('body'), {
      scrollTop: "+=" + this.scrollTop
    });

    this.scrollTop *= 0.9;
  }
};
var ss = new SmoothScroll();
</script>

#3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.