LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Since the dawn of the internet the world has been asking: "Why are hover interactions so boring?" Only recently has a new paradigm arisen to solve this emotionally crippling problem. Designers call them Giflinks.

It is a little known fact, but 9 out of 10 UX specialists agree that giflinks provide a richer, more enhanced user experience, which can be tailored specifically for the enjoyment of your audience.

This javascript library will help you bring Giflinks to your site, house, and home!

By Tim HolmanSource & Instructions

CSS
* {
 	-webkit-font-smoothing: antialiased;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
}

body {
	-webkit-text-size-adjust: none;
	padding-left: 50px;
	padding-right: 50px;
}

header {
	position: relative;
	height: 123px;
	width: 540px;
	margin: auto;
	margin-top: 70px;
}

header .container, header .container div {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}

header .front {
	z-index: 2;	
}

header .front img {
	height: auto;
	width: 100%;
}

header .back {
	background-size: cover;
	background-position: 50% 100%;
	background-image: url('http://tholman.com/giflinks/img/header_back.gif');
	z-index: 1;
}

article {
	max-width: 1000px;
   min-width: 500px;
	margin: auto;
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size: 26px;
	letter-spacing: 0.1px;
	text-align: justify;
	margin-top: 70px;
	line-height: 34px;
}

article .giflink {
	color: rgb(245, 90, 3);
	font-style: italic;
}

article .no-link {
	cursor: default;
}

.final {
	text-align: center;
	font-size: 16px;
	font-style: italic;
	margin-top: 60px;
	margin-bottom: 40px;
}

.final a {
	margin-right: 8px;
	margin-left: 8px;
	color: #111;
}
JS
var GifLinks = (function() {

  'use strict';
  var body;
  var container;

  /* -------------------------
  /*          UTILS
  /* -------------------------*/

  // Soft object augmentation
  function extend( target, source ) {

    for ( var key in source ) {
      if ( !( key in target ) ) {
        target[ key ] = source[ key ];
      }
    }

    return target;
  }

  // Applys a dict of css properties to an element
  function applyProperties( target, properties ) {

    for( var key in properties ) {
      target.style[ key ] = properties[ key ];
    }
  }

  /* -------------------------
  /*          App
  /* -------------------------*/

  // Initialize
  function init( elements, preload ) {

    if ( elements.length ) {

      // Loop and assign
      for( var i = 0; i < elements.length; i++ ) {

        if ( preload === true ) {
          preloadAndTrack( elements[ i ] );
        } else {
          track( elements[ i ] );
        }
      }

    } else {

       if ( preload === true ) {
        preloadAndTrack( elements );
      } else {
        track( elements );
      }
    }
  }

  // Start tracking after preload
  function preloadAndTrack( element ) {

    var awesomeGif = element.getAttribute( 'data-src' );
    if ( awesomeGif ) {

      // Load the image
      var img = new Image();
      img.onload = function() {

        element.className += ' preloaded'
        track( element )
      }

      img.src = awesomeGif;
    }
  }

  // Start tracking mouse hovers
  function track( element ) {

     // "Party on Wayne" ~ "Party on Garth"
    element.addEventListener( 'mouseover',  function() { startPartying( this ); }, false );
    element.addEventListener( 'touchstart', function() { startPartying( this ); }, false);

    // Someone called the cops.
    element.addEventListener( 'mouseout',     function() { stopPartying(); }, false);
    element.addEventListener( 'touchmove',    function( event ) { event.preventDefault(); stopPartying(); }, false);
    element.addEventListener( 'click',        function() { stopPartying(); }, false);
    element.addEventListener( 'dblclick',     function() { stopPartying(); }, false);

    addClasses( element );
  }

  // Adds classes to do with giflink status (has link etc)
  function addClasses( element ) {

    element.className += ' giflink ready';

    if ( element.href ) {
      element.className += ' has-link';
    } else {
      element.className += ' no-link';
    }
  }

  // Create and cache the gif container.
  function createContainer() {

    var containerProperties = {
      'backgroundPosition': '50% 50%',
      'backgroundSize': 'cover',
      'pointerEvents': 'none',
      'position': 'fixed',
      'zIndex': '999999',
      'display': 'none',
      'height': '100%',
      'width': '100%',
      'margin': '0px',
      'left': '0px',
      'top': '0px',
    }

    container = document.createElement( 'div' );
    applyProperties( container, containerProperties );
    body.appendChild( container );
  }

  // Add the background to the container, and the container to the page!
  function startPartying( element ) {

    var awesomeGif = element.getAttribute( 'data-src' );
    if( awesomeGif ) {
      container.style[ 'backgroundImage' ] = 'url(' + awesomeGif + ')';
      container.style[ 'display' ] = 'block';
    } else {
      console.log( "Sorry, an element doesn't have a data-src!" );
    }
  }

  // Hide the container
  function stopPartying() {

    container.style[ 'display' ] = 'none';
    container.style[ 'backgroundImage' ] = '';
  }


  function main( elements, options ) {

    // Caching
    body = document.body;
    createContainer();

    var preload = false;
    if ( options && options.preload ) {
      preload = !!options.preload;
    }

    // Initialize giflinks
    init( elements, preload );
  }

  return extend( main, {

  });

})();

var elements = document.querySelectorAll( 'article a' );
GifLinks( elements );
Host Instantly Drag and Drop Website Builder

 

Description

"The internet is better with giflinks" ~ George Washington
Term
Mon, 11/27/2017 - 21:55

Related Codes

Pen ID
Pen ID
Pen ID