Flowing abstract leafs

different durations

by jshacker

HTML

<div class="hearts">Click at me</div>
<button id="heart-switch-off" class="heart-switches">turn off</button>
<button id="heart-switch-on" class="heart-switches">turn on</button>

SCSS

body {
  height: 500px;
  width: 500px;
}
#heart-switches {
  z-index: 1000;
}
.hearts {
  position: fixed;
  top: 30px;
  &:hover {
    border: thin solid red;
  }
  :hover {
    border: thin solid purple;
  }
}

.heart {
  position: fixed;
  box-shadow:
    0 0 10px yellow,
    0 0 6px orange,
    0 0 3px red;
}

CoffeeScript

$ ->
  id = undefined

  getRandomPlane = ->
    parseInt Math.random() * 100

  height = $('.hearts').parent().height()
  width = $('.hearts').parent().width()

  animation = (heart) ->
    duration = 13000
    v = Math.random() * height + 'px';
    heart.animate { 'left': '-'+v }, duration / 2
    heart.animate { 'left': '+'+v }, duration / 2
    setInterval (->
      v = Math.random()* height + 'px';
      heart.animate { 'left': '-'+v }, Math.random()*duration / 2
      v = Math.random()* height + 'px';
      heart.animate { 'left': '+'+v }, Math.random()*duration / 2
      return
    ), duration
    return

  createNewHeart = ->
    heart = undefined
    heart = $('<div class="heart" id="' + getNextId() + '"></div>')
    plane = getRandomPlane()
    w = getRandomWidth()
    bgcolor = getRandomColor()
    top = getRandomTop()
    top = if top - w < 0 then top + w else if top + w > height then top - w else top
    left = getRandomLeft()
    left = if left - w < 0 then left + w else if left + w > width then left - w else left
    heart.css
      'z-index': plane
      'width': w
      'height': w
      'background-color': bgcolor
      'top': top
      'left': left
    animation heart
    heart.appendTo '.hearts'
    return

  ((h, w) ->
    $('.hearts').css
      height: h
      width: w
    return
  ) height, width

  getRandomLeft = ->
    Math.random() * width

  getRandomTop = ->
    Math.random() * height

  getRandomWidth = ->
    w = undefined
    w = Math.random() * 100
    if w < 20
      w += 20
    parseInt w

  id = 1

  getNextId = ->
    id++
    id

  getRandom8BitInt = ->
    parseInt Math.random() * 255

  getRandomColor = ->
    'rgba(' + getRandom8BitInt() + ', ' + getRandom8BitInt() + ', ' + getRandom8BitInt() + ', ' + Math.random() + ')'

  $('.hearts').on 'click', ->
    createNewHeart()
  i = 0
  while i < 100
    $('.hearts').trigger 'click'
    i += 1
 ...