Creating a "branding flower" using mostly simple jQuery

flower.coffee

$(document).ready ->
  
  #only calls jqFloat library on the page with the flowers
  #makes the flowers float a little
  if activePage is "/"
    $('.flower').jqFloat
      height: 40
      width: 40
      speed: 1800
      
  #vendor flower will always be open.
  $('.petals').hide "fast", ->
      petals = $('#vendor-intro').find('.open').find('.petals')
      petals.show()

  #class the flower as active and then hide the petals of the active class before you remove the active class.
  $(".flower .center").on 'mouseenter', ->
    openPetals = $(@).closest('article').find('.open .petals')
    closedPetals = $(@).closest('.flower').find('.petals')
    openPetals.each (i) ->
      $(@).delay(i * 50).fadeOut 100
    $(@).closest('article').find('.open').removeClass('open')
    closedPetals.each (i) ->
      $(@).delay(i * 50).fadeIn 100
    $(@).closest('.flower').addClass('open')

flower.html

<section id="vendor-intro">
  <div class="container vert-center">
    <article class="row">
      <header>
        <h1>Amplify Your Brand</h1>
        <h4>Exclusive access and coverage to a network that reaches over 75M+ early adopters of tech and lifestyle products.</h4>
        <a href="/vendors">
          Learn More
        </a>
      </header>
      <figure class="flower" id="software-flower">
        <a href="javascript:void(0)">
          <img class="center" src="<%= image_path('site/landing/software/software-rollover.svg') %>" alt"">
        </a>
        <img class="petals" id="petal1" src="<%= image_path('site/landing/software/adobe.png') %>" />
        <img class="petals" id="petal2" src="<%= image_path('site/landing/software/parallels.png') %>" />
        <img class="petals" id="petal3" src="<%= image_path('site/landing/software/smithmicro.png') %>" />
        <img class="petals" id="petal4" src="<%= image_path('site/landing/software/nuance.png') %>" />
      </figure>
      <figure class="flower" id="webapps-flower">
        <a href="javascript:void(0)">
          <img class="center" src="<%= image_path('site/landing/webapps/web-app-rollover.svg') %>" alt"">
        </a>
        <img class="petals" id="petal1" src="<%= image_path('site/landing/webapps/hulu.png') %>" />
        <img class="petals" id="petal2" src="<%= image_path('site/landing/webapps/dreamhost.png') %>" />
        <img class="petals" id="petal3" src="<%= image_path('site/landing/webapps/backblaze.png') %>" />
        <img class="petals" id="petal4" src="<%= image_path('site/landing/webapps/match.png') %>" />
      </figure>
      <figure class="flower" id="lifestyle-flower">
        <a href="javascript:void(0)">
          <img class="center" src="<%= image_path('site/landing/lifestyle/lifestyle-rollover.svg') %>" alt"" />
        </a>
        <img class="petals" id="petal1" src="<%= image_path('site/landing/lifestyle/sole.png') %>" />
        <img class="petals" id="petal2" src="<%= image_path('site/landing/lifestyle/clubw.png') %>" />
        <img class="petals" id="petal3" src="<%= image_path('site/landing/lifestyle/zboard.png') %>" />
        <img class="petals" id="petal4" src="<%= image_path('site/landing/lifestyle/lyft.png') %>" />
      </figure>
      <figure class="flower" id="elearning-flower">
        <a href="javascript:void(0)">
          <img class="center" src="<%= image_path('site/landing/elearning/elearning-rollover.svg') %>" alt""/>
        </a>
        <img class="petals" id="petal1" src="<%= image_path('site/landing/elearning/rosettastone.png') %>" />
        <img class="petals" id="petal2" src="<%= image_path('site/landing/elearning/lynda.png') %>" />
        <img class="petals" id="petal3" src="<%= image_path('site/landing/elearning/udemy.png') %>" />
        <img class="petals" id="petal4" src="<%= image_path('site/landing/elearning/skillfeed.png') %>" />
      </figure>
      <figure class="flower" id="gaming-flower">
        <a href="javascript:void(0)">
          <img class="center" src="<%= image_path('site/landing/gaming/gaming-rollover.svg') %>" alt"" />
        </a>
        <img class="petals" id="petal1" src="<%= image_path('site/landing/gaming/ouya.png') %>" />
        <img class="petals" id="petal2" src="<%= image_path('site/landing/gaming/ea.png') %>" />
        <img class="petals" id="petal3" src="<%= image_path('site/landing/gaming/aspyr.png') %>" />
        <img class="petals" id="petal4" src="<%= image_path('site/landing/gaming/lootcrate.png') %>" />
      </figure>
      <figure class="flower open" id="gadgets-flower">
        <a href="javascript:void(0)">
          <img class="center" src="<%= image_path('site/landing/gadgets/gadgets-rollover.svg') %>" alt"" />
        </a>
        <img class="petals" id="petal1" src="<%= image_path('site/landing/gadgets/drone.png') %>" />
        <img class="petals" id="petal2" src="<%= image_path('site/landing/gadgets/grain.png') %>" />
        <img class="petals" id="petal3" src="<%= image_path('site/landing/gadgets/griffin.png') %>" />
        <img class="petals" id="petal4" src="<%= image_path('site/landing/gadgets/dixie.png') %>" />
        <img class="petals" id="petal5" src="<%= image_path('site/landing/gadgets/spigen.png') %>" />
      </figure>
    </article>
  </div>
</section>

flower.scss

#vendor-intro {
  position: relative;
  @extend .text-center;
  overflow-y: hidden;
  color: $white;
  @include background ($light-blue, 'site/landing/background-4.png', 'site/landing/background-4-phone.jpg', 'site/landing/background-4-tablet.jpg');
  header {
    @extend .col-md-8, .col-md-offset-2;
    z-index: 10;
    > a {
      @extend  .col-sm-4, col-sm-offset-4;
      @include. .white-button
    }
  }
  h4 {
    margin-bottom: 30px;
  }
  //All the flowers on the vendor pane
  .flower {
    @extend .hidden-xs, .hidden-sm;
    position: absolute;
    z-index: 1;
    .petals {
      @extend .img-circle;
      position: absolute;
      width: 130px;
    }
    .center {
      position: absolute;
      z-index: 5;
      cursor: pointer;
      width: 120px;
    }
  }
  #software-flower {
    top: 70%;
    left: 65%;
    #petal1 {
      z-index: 2;
      top: -60px;
      left: 60px;
      width: 180px;
    }
    #petal2 {
      top: -70px;
      left: -30px;
      width: 100px;
    }
    #petal3 {
      top: -40;
      left: -90px;
      width: 100px;
    }
    #petal4 {
      top: 70px;
      left: -50px;
      width: 100px;
    }
  }
  #webapps-flower {
    top: 15%;
    left: 45%;
    #petal1 {
      z-index: 2;
      top: -30px;
      left: 40px;
      width: 200px;
    }
    #petal2 {
      top: -70px;
      left: -30px;
      width: 100px;
    }
    #petal3 {
      top: -40;
      left: -90px;
      width: 100px;
    }
    #petal4 {
      top: 70px;
      left: -50px;
      width: 100px;
    }
  }
  #lifestyle-flower {
    top: 20%;
    right: 20%;
    #petal1 {
      z-index: 3;
      top: -70px;
      left: -200px;
      width: 250px;
    }
    #petal2 {
      z-index: 2;
      left: 20px;
      top: -80px;
    }
    #petal3 {
      z-index: 2;
      top: 10px;
      left: 90px;
    }
    #petal4 {
      z-index: 2;
      top: 80px;
    }
  }
  #elearning-flower {
    top: 25%;
    left: 20%;
    #petal1 {
      z-index: 3;
      top: -30px;
      left: -160px;
      width: 250px;
    }
    #petal2 {
      z-index: 2;
      top: 60px;
      left: 80px;
    }
    #petal3 {
      z-index: 2;
      top: -40px;
      left: 90px;
    }
    #petal4 {
      z-index: 2;
      left: 0px;
      top: -100px;
    }
  }
  #gaming-flower {
    top: 70%;
    left: 40%;
    #petal1 {
      z-index: 3;
      top: -50px;
      left: -140px;
      width: 220px;
    }
    #petal2 {
      z-index: 2;
      left: 20px;
      top: -90px;
    }
    #petal3 {
      z-index: 2;
      top: 0px;
      left: 90px;
    }
    #petal4 {
      z-index: 2;
      top: 90px;
      left: 20px;
    }
  }
  #gadgets-flower {
    top: 70%;
    left: 5%;
    #petal1 {
      z-index: 2;
      top: -40px;
      left: 30px;
      width: 250px;
    }
    #petal2 {
      top: -70px;
      left: -30px;
      width: 100px;
    }
    #petal3 {
      top: -40;
      left: -90px;
      width: 100px;
    }
    #petal4 {
      top: 70px;
      left: -50px;
      width: 100px;
    }
    #petal5 {
      top: 140px;
      left: -20px;
      width: 100px;
    }
  }
}

You can see the live page here (this is disabled on mobile though, not enough real estate):
https://stackcommerce.com/#vendor-intro

I think this is a great example of code I like to write. This turned out well in my opinion because:

• It's simple functionality, but makes for a great effect when viewed in the browser.
• The HTML is semantic using appropriate tags if it made sense, which makes the CoffeeScript very readable, and is easier to extend Bootstrap classes using Sass.
• Extending Bootstrap classes cleans up the HTML
• It abstracts the concept into something human readable and understandable (a flower opening)