micronemez zoomin layout design

testing out various zoomin' hexagon designz

by edwardsharp

HTML

<script type="text/javascript">
/*
 * purecssmatrix.js, version 0.10, part of:
 * http://janne.aukia.com/zoomooz
 *
 * 0.10 initial stand-alone version
 *
 * LICENCE INFORMATION:
 *
 * Copyright (c) 2010 Janne Aukia (janne.aukia.com)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL Version 2 (GPL-LICENSE.txt) licenses.
 *
 */
 
 PureCSSMatrix = (function() {
    "use strict";

    //**********************************//
    //***  Variables                 ***//
    //**********************************//
    
    var regexp_is_deg = /deg$/;
    var regexp_filter_number = /([0-9.\-e]+)/g;
    var regexp_trans_splitter = /([a-zA-Z]+)\(([^\)]+)\)/g;
    
    //**********************************//
    //***  WebKitCSSMatrix in        ***//
    //***  pure Javascript           ***//
    //**********************************//
    
    function cssMatrix(trans) {
        if(trans && trans !== null && trans!="none") {
            if(trans instanceof Matrix) {
                this.setMatrix(trans);
            } else {
                this.setMatrixValue(trans);
            }
        } else {
            this.m = Matrix.I(3);
        }
    }
    
    cssMatrix.prototype.setMatrix = function(matr) {
        this.m = matr;
    };
    
    function rawRotationToRadians(raw) {
        var rot = parseFloat(filterNumber(raw));
        if(raw.match(regexp_is_deg)) {
            rot = (2*Math.PI)*rot/360.0;
        }
        return rot;
    }
    
    cssMatrix.prototype.setMatrixValue = function(transString) {
        var mtr = Matrix.I(3);
        var items;
        while((items = regexp_trans_splitter.exec(transString)) !== null) {
            var action = items[1].toLowerCase();
            var val = items[2].split(",");
            var trans;
            if(action=="matrix") {
                trans = Matrix.create([[parseFloat(val[0]),parseFloat(val[2]),parseFloat(filterNumber(val[4]))],
                              ...

CSS

body {
    background: #000;
    padding:0;
    margin:0;
    overflow-x: hidden;
    font-size: 6px;
    font-family: Sans-Serif;
}

p.title {
    
    font-size:14px;
    line-height: 19px;

}
p.subtitle {
    font-size: 6px;
}


#cluster {

}

/* GENERIC HEX PROPERTIEZ */
.hex, .hex_connector {
    float: left;

    margin-bottom: -28px;
}

.hex-row {
    clear: left;
} 

.hex-row.even {
    margin-left: 52px;
}

.none {
    visibility:hidden;
}


.middle h1, .middle p {
    padding-left: 3px;
    
}

.middle h1 {
    font-size: 20px;
}

/* HEX (CONTENT) */
.hex:hover .top, .hex:hover .bottom {
    filter: alpha(opacity=50); 
    -khtml-opacity: 0.5;     
    -moz-opacity: 0.5;  
    opacity: 0.5;     
}

.hex .middle:hover {
    background: #000;
    color: #ff6600;
}

.hex .top {
    width: 0;
    border-bottom: 29px solid #ff6600;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

.hex .middle {
    width: 103px;
    height: 58px;
    background: #ff6600;
    color: #000;
    overflow: hidden;
    overflow-y: auto;
}


.hex .bottom {
    width: 0;
    border-top: 29px solid #ff6600;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

.hex .no-background {
    background: #000;
    color: #ff6600;
}

/* HEX_CONNECTOR */
.hex_connector .top {
    width: 0;
    border-bottom: 29px solid #121212;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}


.hex_connector .middle {
    width: 103px;
    height: 58px;
    background: #121212;
    color: #ff6600;
    overflow: hidden;
    font-size: 16px;
}


.hex_connector .bottom {
    width: 0;
    border-top: 29px solid #121212;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

.northeast {
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotate(-60deg);
    -moz-transform-origin: 50% 50%;
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
   ...

JavaScript

//FAKE_JAX
$(function() {

    $('.info').on('click', function(e) {
        e.preventDefault();
        if ($(this).hasClass('info_clicked_once')) {
            
        } else {
            
            $(this).addClass('info_clicked_once');                    
            // ajax request
            $.ajax({
                async: true,
                cache: false,
                type: 'post',
                url: '/echo/html/',
                data: {
                    html: '<p>THIS IS A REALLY LONG LINE OF HTML THAT HAS BEEN INJECTED VIA AJAX FOOBAR <br/>THIS IS A REALLY LONG LINE OF HTML THAT HAS BEEN INJECTED VIA AJAX FOOBAR <br/>THIS IS A REALLY LONG LINE OF HTML THAT HAS BEEN INJECTED VIA AJAX FOOBAR <br/></p>',
                    delay: 1
                },
                dataType: 'html',
                beforeSend: function() {
                    console.log('Fired prior to the request');
                },
                success: function(data) {
                    console.log('Fired when the request is successfull');
                    //$('.info p').toggle();
                    $('.info').append(data);
                },
                complete: function() {
                    console.log('Fired when the request is complete');
                }
            });
        } //endif        
    });

}); //FAKE_JAX


jQuery(document).ready(function($) {

    
   settings = {
    // zoomed size relative to the container element
    // 0.0-1.0
    targetsize: 1.0,
    // scale content to screen based on their size
    // "width"|"height"|"both"
    scalemode: "both",
    // animation duration
    duration: 450,
    // easing of animation, similar to css transition params
    // "linear"|"ease"|"ease-in"|"ease-out"|"ease-in-out"|[p1,p2,p3,p4]
    // [p1,p2,p3,p4] refer to cubic-bezier curve params
    easing: "ease",
    // use browser native animation in webkit, provides faster and nicer
    // animations but on some older machines, the...