Jump to content
Search Community

stoler42

Members

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Posts posted by stoler42

    I want to build an interactive comic book that as you scroll animation it triggered

    in GSAP

    Posted

    What the heck am I doing wrong? I've copy and pasted and added in elements and I can't get the thing to even move. I know I'm being a pain in the ass but I can't get one thing to work
     
     
    <!DOCTYPE html>
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="commic_style.css">
    <script type="text/javascript" src="js/dragscroll.js"></script>
    <script type="text/javascript" src="minified/TweenMax.min.js"></script>
    <!--tweenMax Library -->
    <script type="text/javascript" src="js/jquery.jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.scrollorama.js"></script>
    <script type="text/javascript" src="js/greensock/TimelineMax.min.js"></script>
    </head>
     
    <style type="text/css">
    #jeff{
    width:400px;
    height:400px;
    background-image:url(images/character-designs.png);
    background-repeat:no-repeat;
    }
    </style>
    <body>
    <script>
    // element that can be used with jQuery
     
    $(document).ready(function(){
    //set the name of the superscrollorama elemenet
    var controller = $.superscrollorama({
        isVertical: false
    });
     
    //then you add the tweens
    var jeff = $("#jeff");
    controller.addTween (jeff, 
        TweenMax.to(jeff, 1, {left:600, width:700})
    );
     
    });
    </script>
    <div id="navigation_container">
    <nav>
    <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">HOME</a></li>
    <li><a href="#">HOME</a></li>
    </ul>
    </nav>
    </div>
    <section id="comic_board">
     
    <div class="cell"> 
      <section id="jeff"></section>
    </div>
    </section><!--closes comic board -->
     
     
     
     
     
    </body>
    </html>
     
     
     
    (css)
     
    @charset "utf-8";
    /* CSS Document */
     
    *{
    padding:0px;
    margin:0px;
    cursor:url(images/cursor.png);
    }
     
    body{
    background-color:#CCC;
        width:18000px;
        position:absolute;
        top:0px;
        left:0px;
        bottom:0px;
    overflow:hidden;
    }
     
    #navigation_container{
    height:100px;
    width:100%;
    background-color:#666;
    position:fixed;
    }
     
    nav {
    height: 40px;
    background-color: #6BB2D2;
    z-index: 2000;
    position: fixed;
    top: 25px;
    width: 100%;
    margin-bottom:70px;
    }
     
    nav ul{
    margin:0px 0px 0px 20px
    }
     
    nav ul li{
    list-style:none;
    display:inline;
    }
     
    nav ul li a{
    color:#FFF;
    padding:0px 7px;
    line-height:40px;
    text-decoration:none;
    }
     
    #comic_board{
    height:100%;
    width:100%;
    background-color:#999;
    margin-top:70px;
    }
     
    .cell{
    width:600px;
    height:600px;
    margin:auto 40px;
    border:solid 4px #000;
    background-color:#FFF;
    float:left;
    }
     
    }
     
     

     

    I want to build an interactive comic book that as you scroll animation it triggered

    in GSAP

    Posted

    Again, thanks so much for your help. I'm trying to strip scrolorama to work how I need it to. Although I've put isVerical False and I can't get the darn thing to scroll. I'm confused about how the plugin understands when an item is to be tweened which makes it hard to code what I need. I'm just kind of lost at the moment. I'm really trying here to wrap my head around it but I'm having a really hard time.

    I want to build an interactive comic book that as you scroll animation it triggered

    in GSAP

    Posted

    Hey everyone, I've new to greensock.js so please be patient. I'm building an interactive comic book. When the uses drags the screen right, panels of art appear and begin to animate. My issue is, I don't know how to control the tweens. The site i'd like to emulate is here:http://disneydigitalbooks.go.com/tron/

    I really want to uses to be able to scroll back and fourth like scrubbing to control the tweens. Any suggestions??? Thanks everyone. 

×
×
  • Create New...