unscroll.js

// the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, document, undefined ) {

  "use strict";

  // undefined is used here as the undefined global variable in ECMAScript 3 is
  // mutable (ie. it can be changed by someone else). undefined isn't really being
  // passed in so we can ensure the value of it is truly undefined. In ES5, undefined
  // can no longer be modified.

  // window and document are passed through as local variable rather than global
  // as this (slightly) quickens the resolution process and can be more efficiently
  // minified (especially when both are regularly referenced in your plugin).

  // Create the defaults once
  var pluginName = "unscroll",
    defaults = {};

  // The actual plugin constructor
  function Plugin ( element, options ) {
    this.element = element;
    // jQuery has an extend method which merges the contents of two or
    // more objects, storing the result in the first object. The first object
    // is generally empty as we don't want to alter the default options for
    // future instances of the plugin
    this.settings = $.extend( {}, defaults, options );
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
  }

  // Avoid Plugin.prototype conflicts
  $.extend(Plugin.prototype, {
    init: function () {
      // Place initialization logic here
      $(this.element).after("<div class='umc-page-before'></div>");
      $(this.element).after("<div class='umc-page-after'></div>");
      $('.umc-page-after').hide();
      $(this.element).css({position : "relative"})
      this.resize();
      $(window).resize(this.resize);
      // scoping vars for inner click functions
      var el = this.element;
      var cp = this.currentPage;
      $('.umc-page-before').click(function(){
        cp++;
        if(cp===1){
          $('.umc-page-after').show();
        };
        $(el).animate({right: cp*100+'%'});
        $(el).animate({left : 100-cp*100+'%'});

      });
      $('.umc-page-after').click(function(){
        cp--;
        $(el).animate({right: cp*100+'%'});
        $(pg).animate({left : 100-cp*100+'%'});
        if(cp===0){
          $('.umc-page-after').hide();
        };
      });
    },
    resize : function () {
      console.log($(window).width());
      if($(window).width() >= 768 ){
        $('.home.row').css({
          height: $(window).height() - 350,
          "overflow-x" : "scroll"
        });
        $('.umc-page-before').css({
          width: '8%',
          height: '100%',
          position: "absolute",
          background: "red",
          right: 0,
          'z-index': 1
        });
        $('.umc-page-after').css({
          width: '8%',
          height: '100%',
          position: "absolute",
          background: "blue",
          'z-index': 1
        });
      }
    }
  });

  // A really lightweight plugin wrapper around the constructor,
  // preventing against multiple instantiations
  $.fn[ pluginName ] = function ( options ) {
    return this.each(function() {
      if ( !$.data( this, "plugin_" + pluginName ) ) {
        $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
      }
    });
  };

})( jQuery, window, document );