LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.clearfix, .list {
  zoom: 1;
}
.clearfix:before, .list:before, .clearfix:after, .list:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfix:after, .list:after {
  clear: both;
}

.is-hidden {
  display: none !important;
}

.message {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #444;
  color: #aaa;
  padding: 6px;
}
.message.ok {
  background-color: lightgreen;
  transition: all 0.3s ease;
  color: white;
}

.load-more, .loading {
  display: block;
  padding: 14px 26px;
  border-radius: 3px;
  clear: both;
  background-color: #ccc;
  color: #666;
  width: 144px;
  margin: 10px auto;
  text-align: center;
}

.load-more:hover {
  background-color: #333;
  color: white;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
  cursor: pointer;
}

.list {
  width: 640px;
  margin: 20px auto;
}

.element {
  width: 190px;
  height: 100px;
  background-color: #ccc;
  float: left;
  margin: 10px;
  transform: scale(0.01);
}

.element-in {
  animation: listIn 0.4s ease;
  transform: scale(1);
}

@keyframes listIn {
  from {
    transform: scale(0.1);
  }
  to {
    transform: scale(1);
  }
}
JS
var infiniteScrolling = (function() {
  'use strict';

  var limit = 0,
    counter = 0,
    $loading;

  function scrollTo(offset){

    $(window).scrollTop(offset);

  }

  function loadMore() {

    $('.list').after( $loading );
    $(document).off('scroll', scrollController);
    $('.load-more').addClass('is-hidden');

    setTimeout(function(){

      $loading.remove();
      $('.list').append( $('.hidden-content').html() );

      $('.list').find('.element').not('.element-in').each(function(i){

        var $this = $(this);

        setTimeout(function(){

          requestAnimationFrame( function(){ $this.addClass('element-in') } )

        }, ( 100 * Math.ceil( (i+1)/3 )) )

      })

      $('.message .bottom').text( $('.list').height() );
      
      $(document).on('scroll touchmove', scrollController);

      if( counter == limit ){

        $('.load-more').removeClass('is-hidden');

      }
    }, 400);
    

  }

  function scrollController() {

    $('.message .scroll').text( $(window).scrollTop() );

    if( $(window).scrollTop() + $(window).height() >=  $('.list').height() && counter < limit ){

      $('.message').addClass('ok');
      loadMore();
      counter+=1;

      return;

    } 

    $('.message').removeClass('ok');
    

  }

  function bindUI() {

    $(document).on('scroll', scrollController);


    $('.load-more').on('click', loadMore);

  }

  function init(limite) {

    limit = limite;

    bindUI();

    $('.message .bottom').text( $('.list').height() );
    $('.message .height').text($(window).height());

    $loading = $('
Loading
'); } return { init:init }; }()); $(function(){ infiniteScrolling.init( 6 ); })
Host Instantly Drag and Drop Website Builder

 

Description

jQuery dependent infinite scroll module
Term
Mon, 11/27/2017 - 22:12

Related Codes

Pen ID
Pen ID
Pen ID