srobbin

<i class="macbook"></i>

srobbin

/*
 * Backstretch
 * http://srobbin.com/jquery-plugins/backstretch/
 *
 * Copyright (c) 2012 Scott Robbin
 * Licensed under the MIT license.
 */

;(function ($, window, undefined) {
  'use strict';

srobbin

<div id="book1" class="book">
  <img src="book.jpg" />
</div>

srobbin

@font-face {
  font-family: "Shifticons";
  src: url("../fonts/shifticons.eot"); /* IE9 Compat Modes */
  src: url("../fonts/shifticons.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("../fonts/shifticons.woff") format("woff"), /* Modern Browsers */
       url("../fonts/shifticons.ttf")  format("truetype"), /* Safari, Android, iOS */
       url("../fonts/shifticons.svg#Shifticons") format("svg"); /* Legacy iOS */
}

srobbin

<style media="print">
   #backstretch { display: none; }
</style>

srobbin

<!--
  In this demo, there are a series of circular images.
  Their opacity changes as you approach each individual one.
-->

<!-- Beginning styles -->
<style>
  img.circle {
    float: left;
    height: 80px;

srobbin

<!--
  Notice that the size and color of the text above changes
  as your cursor approaches it.
-->

<!-- Beginning styles -->
<style>
  a#demo-link {
    font-size: 24px;
    color: #FFFFCC;

srobbin

/* 
  We can even execute JavaScript.
  For example, here is a simple jQuery plugin that shuffles the "Demo" heading text above.

  http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
*/

  $("#demo-header").shuffleLetters();

srobbin

/* 
  Using Intelligist is easy.
  Just select the container, and pass in an object of gists that you'd like to display.
  The object is made of keys (the gist ID) and values (titles for the drop-down menu).
  
  Note: In this example, we are setting the "exec" option to true.
        This instructs Intelligist to execute the code after the gist is displayed.
        It is optional, and disabled by default.

  Important: If you are using the "exec" option, your Gist must be set

srobbin

/* 
  Gists are snippets of shareable code. 
  GitHub allows gists to be embedded into your website

  For example, here's a bit of CSS for a background gradient.
  It's being applied to the page that you're looking at.
*/

  body {
    background: #efefef; /* Old browsers */