Item: A Pen by Andy Galletly
Rating: 3.4
Author: agsystems

0 Downloads
0 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Andy Galletly</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="box1" class="box">
  <div class="inner">
    <div class="inner_open">
      <p>1 open</p>
    </div>
    <div class="inner_closed">
      <p>1 closed</p>
    </div>
  </div>
</div>

<div id="box2" class="box">
  <div class="inner">
    <div class="inner_open">
      <p>2 open</p>
    </div>
    <div class="inner_closed">
      <p>2 closed</p>
    </div>
  </div>
</div>

<div id="box3" class="box">
  <div class="inner">
    <div class="inner_open">
      <p>3 open</p>
    </div>
    <div class="inner_closed">
      <p>3 closed</p>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.2/TweenMax.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/agsystems/a-pen-by-andy-galletly-pjZOjV */
#box1{
  left: 0;
}
#box2{
  left: 100px;
}
#box3{
  left: 200px;
}


.box{
  width: 150px;
  height: 300px;
  position: absolute;
  overflow: hidden;
  box-shadow: 0 0 15px black;
}

.box .inner.open{
  left: 0;
}

.inner{
  position: absolute;
  left: -150px;
}

.inner_open{
  position: absolute;
  width: 150px;
  height: 300px;
  background: #eeeeee;
}

.inner_closed{
  position: absolute;
  left: 150px;
  width: 150px;
  height: 300px;
  background: red;
}


/*Downloaded from https://www.codeseek.co/agsystems/a-pen-by-andy-galletly-pjZOjV */
var tl = new TimelineMax();

tl.add( TweenMax.to('#box1',0.5,{zIndex:5}) )
tl.add( TweenMax.to($('#box1 .inner'),0.5,{zIndex:5,className:'+=open'}) )

tl.add( TweenMax.to('#box2',0.5,{zIndex:5}) )
tl.add( TweenMax.to($('#box2 .inner'),0.5,{zIndex:5,className:'+=open'}) )

tl.add( TweenMax.to('#box3',0.5,{zIndex:5}) )
tl.add( TweenMax.to($('#box3 .inner'),0.5,{zIndex:5,className:'+=open'}) )

Comments

More from agsystems

A Pen by Andy Galletly

Technologies

Comments

More from agsystems

A Pen by Andy Galletly

A Pen by Andy Galletly

A Pen by Andy Galletly

A Pen by Andy Galletly

You Might Also Like

Drawing circles

Everything is Free Until Sunday!

A Pen by Daksh Dobhal

Convert Image to Grayscale

A Pen by Kristy Sullivan

SVG spinner

A Pen by Alberto Cano

HTML5 draggable