zoomTo: Scrolling

by secretgspot

HTML

<script src="https://raw.github.com/jaukia/zoomooz/master/jquery.zoomooz.min.js"></script>
        <div id="viewport" class="zoomViewport">
            <div id="content" class="zoomContainer">
                <div class="zoomTarget">Lorem ipsum dolor sit amet.</div>
                <div class="zoomTarget">Donec faucibus pharetra vestibulum.</div>
                <div class="zoomTarget">Fusce nec sapien sit amet nisi dictum iaculis.</div>
                <div class="zoomTarget">Curabitur non urna sollicitudin diam feugiat dapibus a eget ipsum.</div>
                <div class="zoomTarget">Donec a tincidunt lorem.</div>
                <div class="zoomTarget">Cras faucibus egestas blandit.</div>
                <div class="zoomTarget">Curabitur orci augue, cursus a sodales ac, tincidunt ut eros.</div>
                <div class="zoomTarget">Mauris sagittis condimentum dapibus.</div>
                <div class="zoomTarget">Quisque interdum sollicitudin nisi, sit amet hendrerit quam suscipit iaculis.</div>
                <div class="zoomTarget">Morbi mollis enim non orci scelerisque at venenatis libero sodales</div>
                <div class="zoomTarget">Sed lorem mauris, semper quis placerat quis, ultrices at ligula.</div>
                <div class="zoomTarget">Vestibulum ante ipsum primis in faucibus.</div>
                <div class="zoomTarget">Etiam fringilla, nisl id bibendum feugiat, leo sem sollicitudin libero.</div>
                <span class="clearer"></span>
            </div>
        </div>

CSS

html {
    background-color:#eee;
    font: 22px 'Fjord One', serif;
}

.clearer {
    clear:both;
    height:20px;
    display:block;
}

#viewport, #content {
    width:800px;
}

#viewport {
    background-color: white;
    height:600px;
    
    /* this needs to have some kind of positioning, absolute
       or relative, to have the pos of elements inside it calculated correctly,
       since otherwise the computeTotalTransformation does not work correctly
       (offsetParent for items would be outside the #content, and offset
       would be calculated relative to the parent..) */
    position:relative;

    margin:35px auto 0px auto;
    -webkit-box-shadow: 0 0px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0px 10px rgba(0,0,0,0.2);
    
    overflow-y:scroll;
    overflow-x:hidden;
}

.zoomContainer div {
    float:left;
    background-color:#eeeedf;
    width:250px;
    margin:20px;
    padding:50px;
    overflow:hidden;
}