Story

Object to Story Function Exploration

by Ken Watanabe

HTML

<body>
    <div class="richter object">
        <img class="object01" src="http://payload.cargocollective.com/1/0/128/91419/richter_1.jpg" alt="" />
        <img class="object02" src="http://3.bp.blogspot.com/-asLKeA-xl_o/Ti98AbljbGI/AAAAAAAAAGU/gU6b0Z13dp0/s1600/imgGerhard+Richter3.jpg" alt="" />
    </div><!-- END | richter object -->
    
    
    <div class="objects-wrap">
        <div class="object-wrap">
            <div class="object-text-container" id="keepontop">
            <div class="overlay"></div> <!-- END overlay --> 
                <div class="object01">
                    <div class="left">
                        <p class="text">text</p>
                    </div>
                    <div class="right">
                        <p class="text">detail</p>
                    </div>
                   
                </div> <!-- END object01 -->
                <div class="object02">
                    <div class="left">
                        <p class="text">text</p>
                    </div>
                    <div class="right">
                        <p class="text">detail</p>
                    </div>
                </div> <!-- END object02 -->
            </div> <!-- END object-text-container -->
        </div> <!-- END object-wrap -->
    </div> <!-- END objects-wrap -->
    
    
    <div id="filler"></div>
</body>

CSS

/* Reset */
 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-decoration: none;
    color: #333;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -moz-margin-start: 0;
    -webkit-margin-start: 0;
    -moz-margin-end: 0;
    -webkit-margin-end: 0;
    -moz-padding-start: 0;
    -webkit-padding-start: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
/* Master */
 html, html a {
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
}
body {
    font-size: 18px;
}
/* Wrap */
 header {
    width: 100%;
    height: 2.5em;
    position: fixed;
    z-index:0;
    padding-top: 1.3em;
    background-color: transparent;
}
.header-wrap {
    width: 80%;
    max-width: 48em;
    margin: 0 auto;
}
.homage-wrap {
    height: 100%;
    width: 100%;
}
.homage {
    height: 100%;
    width: 80%;
    max-width: 48em;
    margin: 0 auto;
}
/* 	.headline-wrap { padding-top: 10%; } */

/* Navigation */
 h1.name {
    float:left;
    width: 49%;
    margin-right: 2%;
}
h1.info {
    float:left;
    width: 23.5;
    margin-right: 2%;
}
h1.email {
    float:right;
    width: 23.5;
    margin-right: 0;
}
h1.name, h1.info, h1.email {
    font-size: 17px;
    line-height: 25px;
    font-family:'Value Bold';
    font-weight: 700;
    font-style: normal;
}
/* Navigation 02 */
 .entry {
    font-size: 26px;
   ...

JavaScript

function reset() {
    $("#filler").fadeOut("slow", function () {
        $(".object").removeClass("top");
    });
    $(".object-text-container").fadeOut("slow");
}
$(".object").click(function (e) {
    var $filler = $("#filler");
    if ($filler.is(":visible")) {
        reset();
        return;
    }
    e.preventDefault();
    e.stopPropagation();
    $(this).addClass("top");
    $(this).find(".object-text").fadeIn("slow");
    $filler.fadeIn("slow");
});
$(document).click(function () {
    reset();
});
$('.object img').on('click', function () {
    var imgNumber = $(this).attr('class');
    $('.object img').css('z-index', '15');
    $(this).css('z-index', '16'); //z-index
    $(this).css('-webkit-filter', 'grayscale(10%)'); // grayscale
    $('.object-text-container > div').hide(); //hide all image Titles
    $('#keepontop').show();
    $('.object-text-container .' + imgNumber).fadeIn("slow"); //show title for e.g. img1
});