LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Material Design Ripple Transition

Just playing around to see if I can recreate the Material Design ripple as a page transition in CSS. Click any link in this block of text to load another set of text. The links don't go anywhere yet. They are just hooks to allow you to click somewhere

The style and animation is entirely CSS so it is smooth. JavaScript is used to add classes at the right time. It also pauses to wait for the content to be replaced, and calculates where to centre the hole. There are two stages to the animation. When a link is clicked the border-width grows very large.

That's enough reading on this slide. Click a link to load the second slide

CSS
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
body {
  background: #009688;
}

.ripple-wrap {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 1000;
  top: 0; left: 0; right: 0; bottom: 0;
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #009688;
  }
  
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #009688;
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: #009688;
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #009688;
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #009688;
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: #009688;
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #00796b;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
}
.ripple-wrap.goripple {
  display: block;
}
.ripple-wrap.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;

}



/* This bit is just to look pretty. Not relevant to the implementation */

body {
  font-size: 1.2em;
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;
  color: #D7EEEC;
}
a {
  color: #004d40;
  font-weight: bold;
}

.wrap {
  margin: 48px auto;
  max-width: 580px;
  text-align: justify;
}
h1, h2 {
  font-weight: lighter;
}

JS
$(document).ready(function() {
  var ripple_wrap = $('.ripple-wrap'),
      rippler = $('.ripple'),
      finish = false,
      monitor = function(el) {
        var computed = window.getComputedStyle(el, null),
            borderwidth = parseFloat(computed.getPropertyValue('border-left-width'));
        if (!finish && borderwidth >= 1500) {
          el.style.WebkitAnimationPlayState = "paused";
          el.style.animationPlayState = "paused";
          swapContent();
        }
        if (finish) {
          el.style.WebkitAnimationPlayState = "running";
          el.style.animationPlayState = "running";
          return;
        } else {
          window.requestAnimationFrame(function() {monitor(el)});
        }
      };
  
  storedcontent = $('#content-2').html();
  $('#content-2').remove();
  
  rippler.bind("webkitAnimationEnd oAnimationEnd msAnimationEnd mozAnimationEnd animationend", function(e){
    ripple_wrap.removeClass('goripple');
  });

  $('body').on('click', 'a', function(e) {
    rippler.css('left', e.clientX + 'px');
    rippler.css('top', e.clientY + 'px');
    e.preventDefault();
    finish = false;
    ripple_wrap.addClass('goripple');
    window.requestAnimationFrame(function() {monitor(rippler[0])});
    
    
  });
  
  
 
  function swapContent() {
      var newcontent = $('#content-area').html();
      $('#content-area').html(storedcontent);
      storedcontent = newcontent;
      // do some Ajax, put it in the DOM and then set this to true
      setTimeout(function() {
        finish = true;
      },10);
  }
  
});
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 22:08

Related Codes

Pen ID
Pen ID
Pen ID