cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="overflow">
  <section class="panels">
    <article class="panels__side panels__side--left">
      <div class="panels__side panels__side--inner-left">
        <p>"Changes and progress very rarely are gifts from above. They come out of struggles from below."</p>
      </div>
      <div class="panels__side panels__side--inner">
        <h1 class="panels__headline">Noam Chomsky</h1>      
        <svg class="arrow arrow--left" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M20 11h-12.17l5.59-5.59-1.42-1.41-8 8 8 8 1.41-1.41-5.58-5.59h12.17v-2z"/></svg>
      </div>
    </article>
    <article class="panels__side panels__side--right">
      <div class="panels__side panels__side--inner">
        <h1 class="panels__headline">Buzz Aldrin</h1>
        <svg class="arrow arrow--right" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z"/></svg>
      </div>
      <div class="panels__side panels__side--inner-right">
        <p>"The biggest benefit of Apollo was the inspiration it gave to a growing generation to get into science and aerospace."</p>
      </div>
    </article>
  </section>
</div>
<!-- Ettrics -->
<a href="http://ettrics.com/code/dual-sliding-panels/" class="logo" target="_blank">
 <img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" /> 
</a>
            
          
!
            
              // utils
yellow = #F4D03F
blue = #19B5FE
easeout()
  transition: all .5s cubic-bezier(0.23, 1, 0.32, 1)
align()
  display: flex
  align-items: center
  justify-content: center
cover()
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%

// base
*
  box-sizing: border-box
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); // remove tap highlight on android chrome

body
  font-family: 'Montserrat'
  line-height: 1.5
  -webkit-font-smoothing: antialiased

// component
.overflow
  height: 100vh
  overflow: hidden
  
.panels
  width: 200%
  
  &__side
    float: left
    width: 50%
    perspective: 400px
    align()
    easeout()
    
    &--left,
    &--right
      will-change: transform
      position: relative
      left: -25%
      transform: translate(0, 0)
      
    &--left
      background: yellow
      
      &:hover
        .arrow
          transform: translate(-100%, -50%)
      
    &--right
      background: blue
      
      &:hover
        .arrow
          transform: translate(0, -50%)
      
    &--left-active
      transform: translate(50%, 0)
      
      .panels__side--inner-left
        transform: rotateY(0)
        
      .arrow
        transform: translate(-50%, -50%) rotate(180deg) !important
      
    &--right-active
      transform: translate(-50%, 0)
      
      .panels__side--inner-right
        transform: rotateY(0)
        
      .arrow
        transform: translate(-50%, -50%) rotate(180deg) !important
      
    &--left-hidden
      transform: translate(-50%, 0)
    
    &--right-hidden
      transform: translate(50%, 0)
      
    &--inner
      cursor: pointer
      
    &--inner-left,
    &--inner-right,
    &--inner
      will-change: transform
      padding: 0 5vw
      height: 100vh
    
    &--inner-left
      transform-origin: right center
      transform: rotateY(-90deg)
      transition-delay: .1s
      background: url('//unsplash.it/1330/900') center/cover
      
      &:before
        content: ""
        cover()
        background: yellow
        z-index: -1
        opacity: 0.85
      
    &--inner-right
      transform-origin: left center
      transform: rotateY(90deg)
      transition-delay: .1s
      background: url('//unsplash.it/1250/900') center/cover
      
      &:before
        content: ""
        cover()
        background: blue
        z-index: -1
        opacity: 0.85
      
  &__headline
    margin: 0
    font-size: 40px
    text-align: center
    color: lighten(black, 10)
    
  p
    font-size: 30px
    margin: 0
    
  @media (max-width: 640px)
    width: 100%
    height: 200vh
    
    &__side
      float: none
      width: 100%
      height: 100vh
      display: block
      text-align: center
      
      &--left,
      &--right
        top: -25%
        left: 0 
        
      &--left
        &:hover
          .arrow
            transform: translate(-50%, -80%) rotate(90deg)
            
      &--right
        &:hover
          .arrow
            transform: translate(-50%, -20%) rotate(90deg)
        
      &--left-active
        transform: translate(0, 50%)
      
        .panels__side--inner-left
          transform: rotateX(0)
        
        .arrow
          transform: translate(-50%, -50%) rotate(-90deg) !important
      
      &--right-active
        transform: translate(0, -50%)

        .panels__side--inner-right
          transform: rotateX(0)

        .arrow
          transform: translate(-50%, -50%) rotate(-90deg) !important

      &--left-hidden
        transform: translate(0, -50%)

      &--right-hidden
        transform: translate(0, 50%)
        
      &--inner-left,
      &--inner-right,
      &--inner
        height: 50vh
        padding: 2vh 8vw
        align()
        
      &--inner-left
        transform-origin: center bottom
        transform: rotateX(90deg)
      
      &--inner-right
        transform-origin: center top
        transform: rotateX(-90deg)
        
    &__headline
      font-size: 32px
        
    p
      font-size: 20px
  
.arrow
  position: absolute
  top: 75%
  left: 50%
  transform: translate(-50%,-50%)
  fill: lighten(black, 10)
  border: 3px solid lighten(black, 10)
  border-radius: 50%
  easeout()
  
  @media (max-width: 640px)
    transform: translate(-50%, -50%) rotate(90deg)
    
    &--left
      top: 25%
      
.logo
  position: fixed
  bottom: 3vh
  right: 3vw
  z-index: 2
  
  
  img
    width: 45px
    transform: rotate(0)
    easeout()
  
    &:hover
      transform: rotate(180deg) scale(1.1)
            
          
!
            
              var Panels = (function() {
  
  var panelLeft = document.querySelector('.panels__side--left');
  var panelRight = document.querySelector('.panels__side--right');

  var openLeft = function() {
		panelLeft.classList.toggle('panels__side--left-active');
    panelRight.classList.toggle('panels__side--right-hidden');
  };

  var openRight = function() {
    panelRight.classList.toggle('panels__side--right-active');
    panelLeft.classList.toggle('panels__side--left-hidden');
  };
  
  var bindActions = function() {
    panelLeft.addEventListener('click', openLeft, false);
    panelRight.addEventListener('click', openRight, false);
  };
  
  var init = function() {
    bindActions();
  };
  
  return {
    init: init
  };
 
}());

Panels.init();


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console