Card Switch

card-switch.markdown

Card Switch

A binary switch layout with a cool animation.

A Pen by Omkar Kulkarni on CodePen.

License.

index.html

<div class="form-collection">
    <div class="card elevation-3 limit-width log-in-card below turned">
      <div class="card-body">
        <div class="input-group email">
          <input type="text" placeholder="Email"/>
        </div>
        <div class="input-group password">
          <input type="password" placeholder="Password"/>
        </div>
        <a href="#" class="box-btn">Forgot Password?</a>
      </div>
      <div class="card-footer">
        <button type="submit" class="login-btn">Log in</button>
      </div>
    </div>

    <div class="card elevation-2 limit-width sign-up-card above">
      <div class="card-body">
        <div class="input-group fullname">
          <input type="text" placeholder="Full Name"/>
        </div>
        <div class="input-group email">
          <input type="email" placeholder="Email"/>
        </div>
        <div class="input-group password">
          <input type="password" placeholder="Password"/>
        </div>
      </div>
      <div class="card-footer">
        <button type="submit" class="signup-btn">Sign Up</button>
      </div>
    </div>
  </div>
  </div>

script.js

$(document).on('click', '.below button', function(){
  var belowCard = $('.below'),
  aboveCard = $('.above'),
  parent = $('.form-collection');
  parent.addClass('animation-state-1');
  setTimeout(function(){
    belowCard.removeClass('below');
    aboveCard.removeClass('above');
    belowCard.addClass('above');
    aboveCard.addClass('below');
    setTimeout(function(){
      parent.addClass('animation-state-finish');
      parent.removeClass('animation-state-1');
      setTimeout(function(){
        aboveCard.addClass('turned');
        belowCard.removeClass('turned');
        parent.removeClass('animation-state-finish');
      }, 300)
    }, 10)
  }, 300);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.sass

/*Generals

html
  margin: 0
  height: 100%

body
  margin: 0
  height: 100%
  display: -webkit-box
  display: -ms-flexbox
  display: flex
  display: -webkit-flex
  -webkit-box-orient: horizontal
  -webkit-box-direction: normal
  -ms-flex-direction: row
  flex-direction: row
  -webkit-box-align: center
  -ms-flex-align: center
  align-items: center
  -webkit-align-items: center
  -webkit-box-pack: center
  -ms-flex-pack: center
  justify-content: center
  background: #2196F3

.form-collection
  width: 350px
  height: 350px

.limit-width
  width: 300px

.absolute-footer
  bottom: 0
  left: 0
  position: absolute
  z-index: 1
  text-align: center
  font-family: "Roboto", sans-serif
  font-size: 27.2px
  font-size: 1.7rem
  font-weight: 300
  padding: 15px
  background: rgba(0, 0, 0, 0.4)
  color: #fff

.form-collection
  z-index: 2

/*Styling Card

.card
  font-family: "Open Sans", sans-serif
  background: #fff
  position: absolute
  -webkit-transition: 0.3s ease all
  transition: 0.3s ease all

.card-body
  padding: 20px

.box-btn
  text-decoration: none
  text-align: center
  text-transform: uppercase
  display: block
  padding: 15px
  font-size: 16px
  font-weight: 500
  color: #444
  background: rgba(0, 0, 0, 0)
  -webkit-transition: 0.2s ease all
  transition: 0.2s ease all
  border-radius: 3px
  &:hover
    background: rgba(0, 0, 0, 0.06)
  &:active
    background: rgba(0, 0, 0, 0.1)

.input-group
  border: 2px solid #eee
  position: relative
  background: #eee
  margin: 25px 0
  border-radius: 2px
  overflow: hidden
  padding: 10px
  input
    border: none
    background: transparent
    width: 100%
    outline: none
    font-weight: 500
    font-family: "Open Sans", sans-serif
    font-size: 16px
  label
    position: absolute
    top: 10px
    left: 0
    padding-left: 10px
    font-weight: 500
    color: #aaa

.card-footer button
  width: 100%
  padding: 25px
  font-size: 24px
  font-size: 1.5rem
  text-transform: uppercase
  font-weight: 600
  background: #4CAF50
  border: none
  color: #fff
  box-shadow: none
  outline: none
  cursor: pointer

/*Animation Classes And Prerequisits

.above
  z-index: 1

.below
  z-index: 0

.turned
  opacity: 0.8
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"

.sign-up-card, .log-in-card
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)

.sign-up-card.turned
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0.8" /></filter></svg>#filter')
  -webkit-filter: blur(0.8px)
  filter: blur(0.8px)
  webkit-filter: blur(0.8px)
  -webkit-transform: rotateZ(-90deg) translate3d(0, 100px, 0) scale(0.7)
  transform: rotateZ(-90deg) translate3d(0, 100px, 0) scale(0.7)
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)

.log-in-card.turned
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="1" /></filter></svg>#filter')
  -webkit-filter: blur(1px)
  filter: blur(1px)
  webkit-filter: blur(1px)
  -webkit-transform: rotateZ(-90deg) translateX(0px) translateY(100px) scale(0.7)
  transform: rotateZ(-90deg) translateX(0px) translateY(100px) scale(0.7)
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)

.animation-state-1
  .sign-up-card.below
    -webkit-transform: rotateZ(-7deg) translateY(150px) scale(0.78)
    transform: rotateZ(-7deg) translateY(150px) scale(0.78)
    opacity: 1
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0.4" /></filter></svg>#filter')
    -webkit-filter: blur(0.4px)
    filter: blur(0.4px)
    webkit-filter: blur(0.4px)
  .log-in-card.above
    -webkit-transform: rotateZ(-83deg) translateY(-180px) translateX(100px) scale(0.78)
    transform: rotateZ(-83deg) translateY(-180px) translateX(100px) scale(0.78)
    opacity: 1
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0.5" /></filter></svg>#filter')
    -webkit-filter: blur(0.5px)
    filter: blur(0.5px)
    webkit-filter: blur(0.5px)

.animation-state-finish
  .sign-up-card.above
    -webkit-transform-origin: left top
    transform-origin: left top
    -webkit-transform: rotateZ(5deg) translateY(0px) scale(1)
    transform: rotateZ(5deg) translateY(0px) scale(1)
    opacity: 1
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter')
    -webkit-filter: blur(0)
    filter: blur(0)
    webkit-filter: blur(0)
  .log-in-card.below
    -webkit-transform: rotateZ(-90deg) translateX(0px) translateY(100px) scale(0.7)
    transform: rotateZ(-90deg) translateX(0px) translateY(100px) scale(0.7)
    opacity: 0.8
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="1" /></filter></svg>#filter')
    -webkit-filter: blur(1px)
    filter: blur(1px)
    webkit-filter: blur(1px)
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)

.animation-state-1
  .log-in-card.below
    -webkit-transform: rotateZ(-10deg) translateY(180px) scale(0.78)
    transform: rotateZ(-10deg) translateY(180px) scale(0.78)
    opacity: 1
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0.5" /></filter></svg>#filter')
    -webkit-filter: blur(0.5px)
    filter: blur(0.5px)
    webkit-filter: blur(0.5px)
  .sign-up-card.above
    -webkit-transform: rotateZ(-80deg) translateY(-170px) translateX(100px) scale(0.78)
    transform: rotateZ(-80deg) translateY(-170px) translateX(100px) scale(0.78)
    opacity: 1
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0.4" /></filter></svg>#filter')
    -webkit-filter: blur(0.4px)
    filter: blur(0.4px)
    webkit-filter: blur(0.4px)

.animation-state-finish
  .log-in-card.above
    -webkit-transform-origin: left top
    transform-origin: left top
    -webkit-transform: rotateZ(5deg) translateY(0px) scale(1)
    transform: rotateZ(5deg) translateY(0px) scale(1)
    opacity: 1
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter')
    -webkit-filter: blur(0)
    filter: blur(0)
    webkit-filter: blur(0)
  .sign-up-card.below
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0.4" /></filter></svg>#filter')
    -webkit-filter: blur(0.4px)
    filter: blur(0.4px)
    webkit-filter: blur(0.4px)
    -webkit-transform: rotateZ(-90deg) translate3d(0, 100px, 0) scale(0.7)
    transform: rotateZ(-90deg) translate3d(0, 100px, 0) scale(0.7)
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
    opacity: 0.7
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"

what framework is this? bootstrap ? Pure?
What header files should I include?

just add this before script tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>