Flying Rocket Banner

flying-rocket-banner.markdown

Flying Rocket Banner

Animated rocketship page banner. Rocketships are cool.

A Pen by Eric Brewer on CodePen.

License.

index.haml

%body
  #wrapper
    %header#header
      .wrap
        %ul.clearfix
          -for i in 1..4
            %li
              %a Nav Item
    #banner.clearfix
      .wrap.clearfix
        %h1 Giant, Interesting <span>Heading</span> With <span>Words!</span>
    #items
      .wrap
        %ul.panels.clearfix
          %li.panel
            %i{ :class =>'fa fa-html5'}
          %li.panel
            %i{ :class =>'fa fa-css3'}
          %li.panel
            %i{ :class =>'fa fa-android'}
                
    #lipsum
      .wrap.clearfix
        %h2 Some Content!
        
        %p <span class='dropcap'>L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac urna enim. Quisque massa sem, bibendum nec turpis quis, semper congue nisl. Fusce suscipit arcu non sodales fermentum. Pellentesque luctus cursus ipsum, vel volutpat neque blandit sed. In nec ante fringilla, elementum ante vel, viverra lacus. Ut non nibh aliquam, pretium sapien sit amet, adipiscing leo. Cras eget semper ligula. Fusce nec nulla lacinia tellus ornare suscipit.
        
        %p Phasellus ac adipiscing tortor, sit amet luctus odio. Proin rhoncus nunc eu mauris tincidunt, tempus egestas augue porta. Mauris leo eros, scelerisque eu fringilla a, posuere et lacus. Integer dictum ac lectus a sodales. Sed elementum volutpat nunc, at aliquet ligula dapibus et. Curabitur vel metus fermentum, placerat mauris et, mattis nisi. Maecenas molestie, eros ac consequat consequat, magna turpis faucibus lorem, sed venenatis augue lacus non sapien. Sed pulvinar odio est, eget pellentesque tellus lacinia non. Duis porttitor urna sem, eu fringilla velit luctus ac. Suspendisse porttitor non arcu id pharetra. Nulla fringilla gravida mollis. Aliquam tristique aliquet lacus, sit amet ultricies justo consectetur id. Proin tincidunt, dui non tempus ornare, felis mi varius enim, a consectetur risus tellus sit amet magna.

script.coffeescript

class Scene
  scrollTop: 0
  constructor: (@container)->
    @entities = []
    @h = $(@container).height()
    @w = $(@container).width()
    @target =
      x: 100,
      y: 200
    
  setup: ->
    
  run: ->
    setInterval @tick, 30

  update: ->
    that = this
    
    if Math.random() > .005
      x = @w + (100 * Math.random())
      y = @h * Math.random()
      radius = 2 * Math.random()
      yellow = 255 * Math.random()
      star = new Star that, x, y, radius, radius, 'star', yellow
    
    if @entities.length > 0
      for entity in @entities
        if entity
          entity.update()
    
  tick: =>
    @update()
    
class Entity 
  vx: 0
  vy: 0
  dirY: 1
  dirX: 1
  scrollTop: 0
  constructor: (@scene, @x, @y, @w = 0, @h = 0, @classname='entity') ->
    entity = document.createElement('div')
    entity.className += @classname
    @entity = entity
    @scene.container.appendChild entity
    @scene.entities.push this
    
    
    if @scene.debug
      console.log 'added ' + @classname
    
  update: ->
    
    @dx = @x + @vx * @dirX
    @dy = @y + @vy * @dirY
    
    @x = @dx
    @y = @dy + @scene.scrollTop
    
    
    $(@entity).css({
      'width': @w + 'px'
      'height': @h + 'px'
      'top': @y + 'px'
      'left': @x + 'px' 
    })
    
  draw: ->
    
  changeDir: ( direction = x) ->
    if direction == 'x' 
      @dirX =  -@dirX
    else if direction == 'y'
      @dirY = -@dirY
    else
      console.log direction + ' is not a valid direction'
    
class Ship extends Entity
  speedX: 3
  speedY: 3
  
  update: ->
    @fly()
    super
    
    cloudPoss = Math.random()
    if cloudPoss > .3
      for i in [0..3]
        @createCloud()
    if cloudPoss > .7
      @createCloud()
    if cloudPoss > .9
      @createCloud()
  
  fly: ->
    
    
    if @x < @scene.target.x - 10
      @vx = @speedX
    else if @x > @scene.target.x + 10
      @vx = -@speedX
    else if @x >= @scene.target.x - 10 or @x <= @scene.target.x + 10
      @vx = 0
      
    if @y < @scene.target.y - 5
      @vy = @speedY
    else if @y > @scene.target.y + 5
      @vy = -@speedY   
    else if @y <= @scene.target.y + 5 or @y >= @scene.target.y - 5
      @vy = 0
      
  chanceOfChangeX: (x) ->
    chance = 0.001
    if x > @scene.w * .7 or x < @scene.w * .1
      chance = .1
    if Math.random() < chance
      return true
    return false
  
  chanceOfChangeY: (y) ->
    chance = 0.05
    if y > @scene.h *.8 or y < @scene.h * .2
      chance = 0.3
      
    if Math.random() < chance 
      return true
    return false
  
  createCloud: ->
    opac = Math.random()
    
    if Math.random() > .6
      radius = 60 * Math.random()
    else
      radius = 40 * Math.random()
      
    y = @y + @h / 4
    y += 20 * Math.random()
    if Math.random() > .5 then y *= -1
    
    cloud = new Cloud @scene, @x, y, radius, radius, opac
  
class Cloud extends Entity
  vx: -5
  constructor: (scene,x,y,w,h, @opacity) ->
    super scene, x, y, w, h, 'cloud'
    $(@entity).css('opacity', @opacity)
    @vx = @vx * Math.random() - 3
    
    #keep tabs on how many we're creating ...
    #console.log @scene.entities.length
    
  update: ->
    
    super
    @opacity -= .004
    $(@entity).css('opacity', @opacity)
    if @opacity <= 0
      @kill()
  kill: ->
    that = this
    @scene.entities[t..t] = [] if ( t = @scene.entities.indexOf(that))
     
    $(@entity).remove()
    
class Star extends Entity
  vx: -10
  
  constructor: (scene, x, y, w, h, classname, @yellowBy = 0) ->
    super scene, x, y, w, h, 'star'
    blue = @yellowBy
    $(@entity).css('background', 'rgb(255,255,' + blue + ')')
  
  update: ->
    super
    if @x < 0
      @kill()
  
  kill: ->
    that = this
    @scene.entities[t..t] = [] if ( t = @scene.entities.indexOf(that))
     
    $(@entity).remove()
      
$ ->
  scenes = []
  title = $('h1') 
  titleTop = title.css('margin-top').split('px')[0]
  
  vh = $(window).height()
  vh = if vh > 500 then vh else 500
  if vh > 700 then vh = 700
  $('#banner').css('height', vh)
  scroll_amt = 0
  dScroll = 0
  

  
  $('#banner').mousemove (e)->
    
    mouseX = e.clientX;
    mouseY = e.clientY;
    if scenes[0]
      scenes[0].target = 
        x: mouseX - 130
        y: mouseY - 120
        
  $('#banner').mouseleave ()->
    if scenes[0]
        scenes[0].target = 
          x: 200,
          y: 200
  
  $(window).on 'scroll', ()->
      scrollT = $(this).scrollTop()
      dScroll = scrollT - scroll_amt
      scroll_amt = scrollT
      
      
      
      scrollBy = (scrollT * 1.5) + parseInt(titleTop)
      opac = 1.2 - (scrollBy / (title.parent().parent().outerHeight() - 50))
     
      
      title.css({
         'margin-top': scrollBy
         'opacity': opac      
                 })
      
      if scenes[0]
        for entity in scenes[0].entities
          if entity.classname == 'star'
            entity.y -= dScroll * (.5 * entity.w)
      
  cont = document.getElementById 'banner'
  scene = new Scene cont
  scenes.push scene
  scene.run()
  
  scene.target = 
    x: 400
    y: 180
    

    
  for i in [1..200]
    x = Math.random() * scene.w
    y = Math.random() * scene.h
    radius = 2 * Math.random()
    yellow = 255 * Math.random()
      
    star = new Star scene, x, y, radius, radius, 'star', yellow
    
  ship = new Ship scene, 150, 100, 220, 80, 'shippy'
  
  setTimeout ()->
    scene.target.y = 90
  , 1000

scripts

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

style.scss

.clearfix {
  zoom: 1;
	&:before, &:after { content: ""; display: table; }
	&:after { clear: both; }
}

//fonts
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);

@mixin css-gradient($from: #dfdfdf, $to: #f8f8f8) {
	background-color: $to;
	background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
	background-image: -webkit-linear-gradient(top, $from, $to);
	background-image: -moz-linear-gradient(top, $from, $to);
	background-image: -o-linear-gradient(top, $from, $to);
	background-image: linear-gradient(to bottom, $from, $to); 
}
@mixin box-sizing($type: border-box) {
	-webkit-box-sizing: $type;
	-moz-box-sizing:    $type;
	-ms-box-sizing:     $type;
	box-sizing:         $type;
}


@mixin prefix($prop, $value){
  -webkit-#{$prop}: $value; -moz-#{$prop}: $value; -o-#{$prop}: $value; -ms-#{$prop}: $value;
}

@mixin listfix(){
    display:block; padding:0; margin:0 0 0; list-style:none; 
}

* { @include box-sizing(); }


//colours
$darkblue: #556270;
$blue:#4ECDC4;
$green:#C7F464;
$red:#FF6B6B;
$purple: #B0698B; 
$darkred:#C44D58;

//PROPER STYLES BEGIN!
body {
  display:block;
  width:100%;
  margin:0;
  pdding:0;
  background:#e8e8e8; 
  @include css-gradient(#e8e8e8, #d9d9d9); 
  font-family: 'lato', helvetica, arial, sans-serif;
  font-size:62.5%
}

#wrapper {
  display:block;
  padding:0; 
  width: 100%;
}

#header{
  display:block; 
  padding-top:27px;
  background:black;
  
  ul {
    @include listfix;  
    
    li{
      display:block;
      float:left; 
      height:50px;
      line-height:50px; 
      
      a {
        color:#f2f2f2;  
        font-weight:300; 
        font-size:1.2rem; 
        margin-right:1em; 
        cursor: pointer;
        padding:5px 10px;
        @include prefix(transition, all .2s linear);
          
        &:focus,
        &:hover {
          background:white; 
          color:black; 
        }
      }
    }
  }
}

#banner {
  background:black;  
  position: relative; 
  height:500px; 
  margin:0;
  padding-bottom:100px;
  color:#f2f2f2; 
  overflow:hidden; 
  cursor:pointer;
  
  h1 {
    margin-top:100px;
   
    font-size:6rem;
    font-size:70px;
    font-weight:100;
    line-height:1.5em; 
    width:70%;
    float:right; 
    text-align:right; 
    
    span {
      font-weight:400;  
    }
  }
}

#items {
  display:block;
  background:black;
}
.panels{
  @include listfix; 
  width:100%;
  
  li {
    display:block; 
    position:relative;
    float:left;
    width:31%; 
    top: -50px; 
    height:250px; 
    margin-right:3%;
    background:$red;
    @include css-gradient($red, darken($red, 7%));
    opacity: .8;
    overflow:hidden;
    @include prefix( transition, all .3s linear);
    
    @media screen and (max-width: 768px){
      width: 100%;
      height: 150px;
      margin-right:0;
      margin-bottom: 1em; 
      
      i {
        top: -50px!important; 
      }
    }
    
    &:nth-child(2){
      background: $blue;
      @include css-gradient($blue, darken($blue, 7%));
    }
    
    &:nth-child(3){
      background: $purple  ;
      @include css-gradient($purple, darken($purple, 7%));
    }
    
    &:nth-child(3n){
      margin-right:0;  
    }
    
    i {
      position: absolute;
      top: 10%;
      right: -10px;
      font-size:220px; 
    }
  }
}

#lipsum {
  margin:0;
  padding:27px 0;
  background:black;
  color:white; 
  font-size:1.4rem;
  line-height:1.5em;
  font-weight: 300;
  
  p {
    width:47%; 
    padding: 27px 0;
    float:left; 
    margin-right: 6%;
    background: black; 
    
    &:nth-of-type(2){
      margin-right:0;
    }
    
    @media screen and (max-width:600px){
      width: 100%;
      margin-right:0;
    }
  }
  
  h2 {
    font-size:3rem;
    font-weight:100;  
  }
  
  .dropcap {
    display:block;
    float:left; 
    padding: 20px; 
    margin: 10px 27px 13px 0;
    font-size:3.5rem; 
    color: black; 
    background:$red;
    @include css-gradient($red, darken($red, 7%));
    font-weight:700
  }
}

.shippy {
  display:block; 
  position: absolute; 
  background: url(http://games.ericbrewer.ca/images/rocket.png) no-repeat 0 0; 
  z-index:3
}

.cloud {
  display:block;
  position:absolute; 
  background: white; 
  border-radius:40px; 
  z-index:2; 
} 

.star {
  display:block;
  position:absolute; 
  background:white; 
  border-radius: 2;
  z-index:1; 
}

.wrap {
  display:block;
  width:90%;
  padding:0;
  margin: 0 auto; 
}

styles

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />