focalPoint plugin

A plugin in to determine the closest element to the screen's center in an array of elements. Useful for directed attention to the center-most element.

by cgspicer

HTML

<div class="container">
    <article class="post first">
        <header>
            <h3>Some Post</h3>
        </header>
        <section>
            <p>Some sort of content and ipsum. Bacon ipsum dolor sit amet doner short loin andouille ball tip tongue pastrami. Corned beef spare ribs shoulder pastrami doner bresaola sausage ribeye beef frankfurter meatball sirloin cow flank pig. Salami strip steak sirloin drumstick ribeye meatloaf. Cow turducken flank shoulder t-bone hamburger. T-bone short loin pastrami brisket beef ribs ball tip. Pork loin turducken jowl, short ribs tail corned beef andouille pork chop jerky.</p>
        </section>
    </article>
    <article class="post second">
        <header>
            <h3>Some Post</h3>
        </header>
        <section>
            <p>Some sort of content and ipsum. Bacon ipsum dolor sit amet doner short loin andouille ball tip tongue pastrami. Corned beef spare ribs shoulder pastrami doner bresaola sausage ribeye beef frankfurter meatball sirloin cow flank pig. Salami strip steak sirloin drumstick ribeye meatloaf. Cow turducken flank shoulder t-bone hamburger. T-bone short loin pastrami brisket beef ribs ball tip. Pork loin turducken jowl, short ribs tail corned beef andouille pork chop jerky.</p>
        </section>
    </article>
    <article class="post third">
        <header>
            <h3>Some Post</h3>
        </header>
        <section>
            <p>Some sort of content and ipsum. Bacon ipsum dolor sit amet doner short loin andouille ball tip tongue pastrami. Corned beef spare ribs shoulder pastrami doner bresaola sausage ribeye beef frankfurter meatball sirloin cow flank pig. Salami strip steak sirloin drumstick ribeye meatloaf. Cow turducken flank shoulder t-bone hamburger. T-bone short loin pastrami brisket beef ribs ball tip. Pork loin turducken jowl, short ribs tail corned beef andouille pork chop jerky.</p>
        </section>
    </article>
    <article class="post fourth">
        <header>
    ...

CSS

body { padding-top: 100px; }
article.post { 
    margin: 60px 10px;
    -webkit-transition: background 1s;
    -moz-transition:  background 1s;
    transition: background 1s;
}
article.post header h3 { font-weight:bold; text-indent: 10px; }
article.post section p { padding: 20px; }
article.post.focal-center { background: red; }

JavaScript

(function( $ ){
	/**
	 * focalCenter.js
	 * A jQuery plugin that takes an array of elements and assigns a class to the element nearest the viewport's center
	 * http://www.codekaiju.com
	 *
	 * Copyright 2013, Coran Spicer
	 * Free to use under the MIT license.
	 *
	 * Date: Mon Feb 11 2013
	 */
	var methods = {
		init : function( options ) {
			var settings = $.extend( {
				'direction'         : 'vertical',
				'classToAssign' : 'focal-center',
                'relativeContainer' : 'window' //passing in a different relative container than window is not recommended, as I have not tested it
			}, options);

            $this = $(this);
            var $container = settings.relativeContainer == 'window' ? $(window) : $this.closest( $( settings.relativeContainer ) );

            var minWidth = $container.scrollLeft();
            var maxWidth = $container.width();
            var centerX = (maxWidth + minWidth) / 2;
            var minHeight = $container.scrollTop();
            var maxHeight = $container.height();
            var centerY = (maxHeight + minHeight)/2;

            var focalPoints = [];
            $this.each( function(target) {
                self = this;
                self.fromCenterX = Math.abs( centerX - ( $(self).offset().left + $(self).width() / 2 ) + minWidth / 2 );
                self.fromCenterY = Math.abs( centerY - ( $(self).offset().top + $(self).height() / 2 ) + minHeight / 2 );
                focalPoints.push(self);
            });

            function assignClasses() {
                for ( var f = 0; f < focalPoints.length; f++ ) {
                    $( focalPoints[f] ).removeClass( settings.classToAssign );
                }
                var lastFocalPoint = focalPoints.length - 1;
                $( focalPoints[ lastFocalPoint ] ).addClass( settings.classToAssign );
            }
            function getDistances() {
                minWidth = $container.scrollLeft();
                maxWidth = $container.width();
       ...