LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Click a button on the Side

Based on the Side Menu for Android from Yalantis

I wanted to see if I could create this effect in CSS/JS and this is what I came up with.

This demo uses CSS clip-path and will only work properly in Chrome. It looks like clip-path simple shapes will be in Firefox soon.

The Blue Section

Based on the Side Menu for Android from Yalantis

I wanted to see if I could create this effect in CSS/JS and this is what I came up with.

This demo uses CSS clip-path and will only work properly in Chrome. It looks like clip-path simple shapes will be in Firefox soon.

The Red Section

Based on the Side Menu for Android from Yalantis

I wanted to see if I could create this effect in CSS/JS and this is what I came up with.

This demo uses CSS clip-path and will only work properly in Chrome. It looks like clip-path simple shapes will be in Firefox soon.

The Green Section

Based on the Side Menu for Android from Yalantis

I wanted to see if I could create this effect in CSS/JS and this is what I came up with.

This demo uses CSS clip-path and will only work properly in Chrome. It looks like clip-path simple shapes will be in Firefox soon.

The Yellow Section

Based on the Side Menu for Android from Yalantis

I wanted to see if I could create this effect in CSS/JS and this is what I came up with.

This demo uses CSS clip-path and will only work properly in Chrome. It looks like clip-path simple shapes will be in Firefox soon.

CSS
h2 {
  text-align: center;
  margin-top: 10vh;
  font-size: 36px;
  text-transform: uppercase;
  mix-blend-mode: multiply;
  color: #666;
  padding-left: 120px;
  padding-right: 20px;
}

p {
  mix-blend-mode: multiply;
  font-size: 18px;
  color: #666;
  padding-left: 120px;
  padding-right: 20px;
  text-align: center;
}

a {
  color: #333;
}

.section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 1;
  -webkit-clip-path: circle(0 at 50% 50%);
  transition: -webkit-clip-path 0s ease-in .4s;
}
.section.blue-section {
  background-color: #6666dd;
}
.section.red-section {
  background-color: #dd6666;
}
.section.green-section {
  background-color: #33dd33;
}
.section.yellow-section {
  background-color: #dddd33;
}
.section.white-section {
  -webkit-clip-path: none;
}
.section.in {
  transition: -webkit-clip-path .4s ease-in;
  z-index: 3;
}
.section.transition {
  -webkit-transition: none;
  transition: none;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 4;
}
nav a {
  width: 100px;
  background: #ccc;
  display: block;
  height: 25%;
  border-top: 1px solid #999;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  color: #666;
  font-weight: 700;
  text-decoration: none;
  line-height: 25vh;
  opacity: .9;
}
nav a[data-toggle="blue"].in {
  color: #6666dd;
}
nav a[data-toggle="red"].in {
  color: #dd6666;
}
nav a[data-toggle="green"].in {
  color: #119911;
}
nav a[data-toggle="yellow"].in {
  color: #999933;
}
JS
$(document).ready(function() {
  $('[data-toggle]').on('click', function(e) {
    e.preventDefault();
    
    $('[data-toggle]').removeClass('in');
    $(this).addClass('in');
    
    var activeSection = $('.' + $(this).data('toggle') + '-section');
    var clipPathOut = 'circle(0 at 50% 50%)';
    var clipPathTrans = 'circle(0 at ' + e.clientX + 'px ' + e.clientY + 'px)';
    var clipPathIn = 'circle(150% at ' + e.clientX + 'px ' + e.clientY + 'px)';
    
    if(activeSection.hasClass('in')) {
      return;
    }
    
    $('.section').removeClass('in').css({
        '-webkit-clip-path': clipPathOut
      });
    activeSection.addClass('transition').css({
        '-webkit-clip-path': clipPathTrans
      });
    
    window.setTimeout(function() {
     activeSection.removeClass('transition').addClass('in').css({
        '-webkit-clip-path': clipPathIn
      });
    }, 10);

  });
});
Host Instantly Drag and Drop Website Builder

 

Description

Based on the Side Menu for Android from Yalantis. I wanted to see if I could create this effect in CSS/JS and this is what I came up with.
Term
Mon, 11/27/2017 - 22:11

Related Codes

Pen ID
Pen ID
Pen ID