cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-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.

            
              html
  head
    script(src='https://code.jquery.com/jquery-2.1.1.min.js')
    script(src='https://code.famo.us/lib/functionPrototypeBind.js')
    script(src='https://code.famo.us/lib/classList.js')
    script(src='https://code.famo.us/lib/requestAnimationFrame.js')
    link(rel='stylesheet', href='https://code.famo.us/famous/0.3/famous.css')
    script(src='https://code.famo.us/famous/0.3/famous-global.min.js')
    meta(name='viewport', content='width=device-width, maximum-scale=1, user-scalable=no')
    meta(name='apple-mobile-web-app-capable', content='yes')
    meta(name='apple-mobile-web-app-status-bar-style', content='black')
    meta(name='apple-mobile-web-app-capable', content='yes')
    meta(name='mobile-web-app-capable', content='yes')
  body      
            
          
!
            
              @import "nib"

*
  padding 0
  margin 0

body
  background-color #060b14
  overflow hidden
  color #ffffff
  font-family Helvetica Neue, Open Sans, sans-serif
  font-weight 100

a
  color #4bc2f1
  text-decoration none
  &:hover
    text-decoration underline

.welcome
  font-weight 200
  opacity 0.65
  text-align center
  font-size 0.775rem
  line-height 1.05rem
  letter-spacing 0.135em
  word-spacing -0.075rem

.logo
  cursor pointer
  text-decoration none
  font-size 2rem
  letter-spacing 0.025em
  a
    color #d6d6d6

.logoDot
  color #d74580

.dot
  border-radius 30px
  background-color #4bc2f1
  box-shadow 0 0 5px #4bc2f1

.button
  font-size 54px
  text-align center
  background-color #FFDC00
  padding 10px
  border-radius 80px
  width 80px
  height 80px
  line-height 56px
  border 3px solid #FF851B
  color #FF851B
  box-sizing border-box
  
            
          
!
            
              $ ->
  # Import library here
  Engine = famous.core.Engine
  Surface = famous.core.Surface
  Transform = famous.core.Transform
  StateModifier = famous.modifiers.StateModifier
  Modifier = famous.core.Modifier
  Random = famous.math.Random
  Transitionable = famous.transitions.Transitionable
  Easing = famous.transitions.Easing
  Timer = famous.utilities.Timer

  # Start coding here  
  Engine.nextTick ->
    docW = $(document).width()
    docH = $(document).height()

    context = Engine.createContext()
    context.setPerspective 100
    
    btOpacity = new Transitionable 1
    btMod = new Modifier
      align: [.5, .3]
      origin: [.5, .5]
      opacity: -> btOpacity.get()
    btSurf = new Surface
      size: [true, true]
      content: '►'
      classes: ['button']
    context
      .add btMod
      .add btSurf
    btSurf.on 'click', -> play()
      
    txtStatOpacity = new Transitionable 0
    txtMod = new Modifier
      align: [.5, .5]
      origin: [.5, .5]
      opacity: -> txtStatOpacity.get()
    txtSurf = new Surface
      size: [true, true]
      content: 'Inspired by <a href="http://julian.com/research/velocity/">Julian Shapiro\'s 3d demo</a>.'
      classes: ['welcome']
    context
      .add txtMod
      .add txtSurf
      
    logoMod = new StateModifier
      align: [1, 1]
      origin: [1, 1]
      tansform: Transform.translate -15, -15,  0
    logoSurf = new Surface
      size: [true, true]
      content: "<a href='https://famo.us'>Famous<span class='logoDot'>.</span>js</a>"
      classes: ['logo']    
    context
      .add logoMod
      .add logoSurf
    
    dotStateZ = new Transitionable 1
    dotStateOpacity = new Transitionable 0
    
    dots = []
    createDot = ->
      X = Random.range -docW/2, docW/2
      Y = Random.range -docH/2, docH/2
      Z = Random.range 10, 100
      OPACITY = Random.range 0, 1
      dot = 
        mod: new Modifier
          align: [.5, .5]
          origin: [.5, .5]
          opacity: ->
            OPACITY * dotStateOpacity.get()
          transform: ->
            Transform.translate X, Y, dotStateZ.get() * Z
        surf: new Surface
          classes: ['dot']
          size: [30, 30]
      dots.push dot
      context
        .add dot.mod
        .add dot.surf
    createDot() for idx in [0..200]
     
    # Animate
    play = ->
      btOpacity.set 0, (duration: 500), ->
        dotStateOpacity.set 1, (duration: 500), ->
          dotStateZ
            .set 2, duration: 7000, curve: 'easeInOut'
            .set 1, (duration: 7000, curve: 'easeInOut'), ->
              dotStateOpacity.set 0, duration: 500
              txtStatOpacity.set 1, (duration: 500), ->
                Timer.setTimeout ->
                  txtStatOpacity.set 0, (duration: 500), ->
                  btOpacity.set 1, duration: 500
                , 1000
    play()
    
            
          
!
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