cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              .content
  h1
    | Hello. We 
    span#word-switcher.in()
      p.glitch.active(data-text='design', data-oid='0') design
      p.glitch(data-text='develop', data-oid='1')  develop
      p.glitch(data-text='love', data-oid='2') love
    |             apps.

            
          
!
            
              //@import 'compass/css3'
@import url(http://fonts.googleapis.com/css?family=Roboto:100,600)

// Variables
$roboto: 'Roboto', sans-serif  
$fontsize: 40px
$bg: cornflowerblue
$p: #aadff9
$w-color: rgba(255, 255, 255, 0.5)
  
$animation-opacity: 2s ease-out 0s normal none infinite opacity
$animation-change: 6s linear 0s normal none infinite change

// ! active glitch by replacing the 0 with infinite
$animation-glitch: glitch 2s 0 linear alternate-reverse
$animation-glitch-2: glitch-2 3s 0 linear alternate-reverse

$break-medium: 768px
$break-large: 1300px

//
// Easing
// @see http://matthewlein.com/ceaser/
//

// Cubic
$easeInCubic     :  cubic-bezier(0.550, 0.055, 0.675, 0.190)
$easeOutCubic    :  cubic-bezier(0.215, 0.610, 0.355, 1.000)
$easeInOutCubic  :  cubic-bezier(0.645, 0.045, 0.355, 1.000)

//to show what import 'compass/css3' does
//mixin

@mixin animation-name($name...) 
  -o-animation: $name
  -moz-animation: $name
  -webkit-animation: $name
  animation: $name


// keyframes mixin
=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

*
  margin: 0
  padding: 0

body
  display: table-cell
  vertical-align: middle
  background-color: $bg

h1
  font: 100% $roboto
  line-height: normal
  color: $p
  font-size: $fontsize + 10px
  font-weight: 100 //ups

.content
  position: absolute
  top: 50%
  left: 40%
  margin: -32px 0 0 -145px
  &::after, &::before
    color: #000
    font-size: 42px   
    @include animation-name($animation-opacity)


//.visible
  font-weight: 600
  overflow: hidden
  height: 40px

#word
  margin-top: 0
  padding-left: 110px
  text-align: left
  list-style: none
  @include animation-name($animation-change)
  li
    line-height: 40px
    margin: 0
    
// use of keyframes mixin
+keyframes(opacity)
  0%
    opacity: 0
  50%
    opacity: 1
  100%
    opacity: 0
   
// use of keyframes mixin
+keyframes(change)
  0%
    margin-top: 0

  15%
    margin-top: 0

  25%
    margin-top: -40px

  40%
    margin-top: -40px

  50%
    margin-top: -80px

  65%
    margin-top: -80px

  75%
    margin-top: -40px

  85%
    margin-top: -40px

  100%
    margin-top: 0


//@media (max-width: $break-large)
  h1
    margin-top: 80px
    margin-bottom: 80px

#word-switcher
  position: relative
  display: inline-block
  vertical-align: top
  transition: width 400ms $easeInCubic
  white-space: nowrap
  margin-right: -5px
  margin-top: 0 //12px
  font-weight: bold
  &.in p
    -webkit-animation: leave-word 300ms $easeOutCubic 
    -moz-animation: leave-word 300ms $easeOutCubic 
    -webkit-transform-origin: center 35px
    transform-origin: center 35px
    &.active
      -webkit-animation: enter-word 300ms 100ms $easeOutCubic 
      animation: enter-word 300ms 100ms $easeOutCubic 
  p
    visibility: hidden
    position: absolute
    left: 0
    &.active
      visibility: visible

+keyframes(leave-word)
  0%
    -webkit-transform: rotateX(0deg)
    transform: rotateX(0deg)
    visibility: visible
    opacity: 1

  100%
    -webkit-transform: rotateX(-90deg)
    transform: rotateX(-90deg)
    visibility: visible
    opacity: 0

// flip 

+keyframes(enter-word)
  0%
    -webkit-transform: rotateX(90deg)
    opacity: 0

  100%
    opacity: 1
    -webkit-transform: rotateX(0deg)
  
// glitch

.glitch
  color: white
  position: absolute
  &:after
    content: attr(data-text)
    position: absolute
    left: 2px
    text-shadow: -1px 0 red
    top: 0
    color: white
    background: $bg
    overflow: hidden
    clip: rect(0, 900px, 0, 0)
    @include animation-name($animation-glitch)
    //animation: noise-anim 2s infinite linear alternate-reverse
  
  &:before
    content: attr(data-text)
    position: absolute
    left: -2px
    text-shadow: 1px 0 blue
    top: 0
    color: white
    background: cornflowerblue
    overflow: hidden
    clip: rect(0, 900px, 0, 0)
    @include animation-name($animation-glitch-2)
    //animation: noise-anim-2 3s infinite linear alternate-reverse
  

// active Glitch

+keyframes(glitch)
  0%
    clip: rect(23px, 9999px, 17px, 0)

  5%
    clip: rect(34px, 9999px, 24px, 0)

  10%
    clip: rect(34px, 9999px, 9px, 0)

  15.0%
    clip: rect(20px, 9999px, 22px, 0)

  20%
    clip: rect(5px, 9999px, 18px, 0)

  25%
    clip: rect(15px, 9999px, 35px, 0)

  30.0%
    clip: rect(26px, 9999px, 36px, 0)

  35%
    clip: rect(26px, 9999px, 33px, 0)

  40%
    clip: rect(26px, 9999px, 5px, 0)

  45%
    clip: rect(13px, 9999px, 28px, 0)

  50%
    clip: rect(29px, 9999px, 38px, 0)

  55.0%
    clip: rect(30px, 9999px, 13px, 0)

  60.0%
    clip: rect(7px, 9999px, 36px, 0)

  65%
    clip: rect(28px, 9999px, 14px, 0)

  70%
    clip: rect(15px, 9999px, 16px, 0)

  75%
    clip: rect(8px, 9999px, 8px, 0)

  80%
    clip: rect(39px, 9999px, 2px, 0)

  85.0%
    clip: rect(20px, 9999px, 18px, 0)

  90%
    clip: rect(27px, 9999px, 8px, 0)

  95%
    clip: rect(33px, 9999px, 14px, 0)

  100%
    clip: rect(23px, 9999px, 25px, 0)


+keyframes(glitch-2)
  0%
    clip: rect(5px, 9999px, 21px, 0)

  5%
    clip: rect(38px, 9999px, 11px, 0)

  10%
    clip: rect(37px, 9999px, 18px, 0)

  15.0%
    clip: rect(11px, 9999px, 38px, 0)

  20%
    clip: rect(24px, 9999px, 13px, 0)

  25%
    clip: rect(37px, 9999px, 25px, 0)

  30.0%
    clip: rect(28px, 9999px, 40px, 0)

  35%
    clip: rect(14px, 9999px, 33px, 0)

  40%
    clip: rect(35px, 9999px, 3px, 0)

  45%
    clip: rect(23px, 9999px, 19px, 0)

  50%
    clip: rect(7px, 9999px, 18px, 0)

  55.0%
    clip: rect(18px, 9999px, 15px, 0)

  60.0%
    clip: rect(14px, 9999px, 31px, 0)

  65%
    clip: rect(29px, 9999px, 4px, 0)

  70%
    clip: rect(12px, 9999px, 2px, 0)

  75%
    clip: rect(3px, 9999px, 38px, 0)

  80%
    clip: rect(24px, 9999px, 39px, 0)

  85.0%
    clip: rect(34px, 9999px, 12px, 0)

  90%
    clip: rect(15px, 9999px, 11px, 0)

  95%
    clip: rect(10px, 9999px, 14px, 0)

  100%
    clip: rect(38px, 9999px, 21px, 0)


            
          
!
            
              $ ->
  # word switcher
  switcher = $('#word-switcher')
  delay = 2000
  count = switcher.find('p').length

  calculateWidths = ->
    switcher.find('p').each (index) ->
      $(this).attr 'data-width', $(this).width()
      return
    switcher.width switcher.find('.active').attr('data-width')
    return

  doChange = ->
    nextItem = undefined
    currentItem = parseInt(switcher.find('.active').attr('data-oid'))
    if currentItem == count - 1
      nextItem = 0
    else
      nextItem = currentItem + 1
    switcher.addClass 'in'
    switcher.find('[data-oid="' + currentItem + '"]').removeClass 'active'
    switcher.find('[data-oid="' + nextItem + '"]').addClass 'active'
    switcher.width switcher.find('[data-oid="' + nextItem + '"]').attr('data-width')
    setTimeout doChange, delay
    return

  calculateWidths()
  $(window).resize ->
    calculateWidths()
    return
  setTimeout doChange, delay
  return
            
          
!
999px
Loading ..................

Console