<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)
View Compiled
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();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.