tak-dcxi
6/25/2019 - 3:31 AM

Pjax Setting

Pjax Setting

index.html
content_copyfile_download
<div id="js-loader" class="loader"></div><!-- /loader -->

<div id="js-pjax-wrapper" class="l-wrapper">
  <div class="js-pjax-container">
    
  </div><!-- /js-pjax-container -->
</div><!-- /js-pjax-wrapper -->

<div id="js-shutter" class="l-shutter">
  <span class="l-shutter__grid"></span>
  <span class="l-shutter__grid"></span>
  <span class="l-shutter__grid"></span>
</div><!-- /l-shutter -->
pjax-setting.markdown
content_copyfile_download
  • Rendered
  • Source

Pjax Setting

A Pen by tak-dcxi on CodePen.

License.

script.js
content_copyfile_download
Barba.Pjax.Dom.wrapperId = 'js-pjax-wrapper'
Barba.Pjax.Dom.containerClass = 'js-pjax-container'

Barba.Pjax.start()
Barba.Prefetch.init()

var shutter = $('#js-shutter')
var loader = $('#js-loader')
var body = $('body')

var DefaultTransition = Barba.BaseTransition.extend({
  start: function() {
    Promise.all([this.newContainerLoading, this.PageLeave()]).then(this.PageEnter.bind(this))
  },

  PageLeave: function() {
    return $(this.oldContainer)
      .delay(900)
      .animate({ opacity: 0 })
      .promise()
  },

  PageEnter: function() {
    var _this = this
    var $el = $(this.newContainer)

    $(this.oldContainer).hide()

    $('html, body').scrollTop(0)

    $el.css({
      visibility: 'visible',
      opacity: 0
    })

    $el.animate({ opacity: 1 }, 900, function() {
      _this.done()
    })
  }
})

Barba.Pjax.getTransition = function() {
  return DefaultTransition
}

Barba.Dispatcher.on('linkClicked', function(HTMLElement, MouseEvent) {
  loader.delay(700).fadeIn(300)
  body.addClass('state-loading').removeClass('state-loaded')
  shutter.show().addClass('js-leave')
})

Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container, newPageRawHTML) {
  if (Barba.HistoryManager.history.length === 1) {
    return
  }
  var $newPageHead = $('<head />').html($.parseHTML(newPageRawHTML.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0], document, true))
  var headTags = [
    "meta[name='keywords']",
    "meta[name='description']",
    "meta[property^='og']",
    "meta[name^='twitter']",
    'meta[itemprop]',
    'link[itemprop]',
    "link[rel='prev']",
    "link[rel='next']",
    "link[rel='canonical']",
    "link[rel='alternate']"
  ].join(',')
  $('head')
    .find(headTags)
    .remove()
  $newPageHead.find(headTags).appendTo('head')

  ga('send', 'pageview', window.location.pathname.replace(/^\/?/, '/') + window.location.search)
  return false
})

Barba.Dispatcher.on('transitionCompleted', function(HTMLElement, MouseEvent) {
  loader.fadeOut(300)
  shutter.removeClass('js-leave').addClass('js-appear')
  setTimeout(function() {
    shutter.hide().removeClass('js-appear')
  }, 1000)
  body.removeClass('state-loading').addClass('state-loaded')
})
style.css
content_copyfile_download
.loader {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000;

  &::before {
    animation: loader-icon .6s linear infinite;
    border-bottom: none;
    border-left: none;
    border-radius: 50%;
    border-right: 2px solid transparent;
    border-top: 2px solid rgba($white, .9);
    content: '';
    display: inline-block;
    height: 70px;
    position: relative;
    width: 70px;
  }
}

@keyframes loader-icon {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

l-shutter {
  $this: &;

  bottom: 0;
  display: flex;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;

  &__grid {
    display: inline-block;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: calc(100% / 3);

    &::after {
      background: $parts-color;
      bottom: 0;
      content: '';
      display: inline-block;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  &.js-appear {
    #{$this}__grid {
      animation: shutter-appear .8s cubic-bezier(.645, .045, .355, 1) forwards;
      transform-origin: right top;
    }
  }

  &.js-leave {
    #{$this}__grid {
      animation: shutter-leave .8s cubic-bezier(.645, .045, .355, 1) forwards;
      transform-origin: left top;
    }
  }
}

@keyframes shutter-appear {
  0% {
    transform: scale3d(1, 1, 1);
  }

  100% {
    transform: scale3d(0, 1, 1);
  }
}

@keyframes shutter-leave {
  0% {
    transform: scale3d(0, 1, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}