Jump to content
Search Community

rigz

Members

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by rigz

    question about animation (teeboard)

    in GSAP

    Posted

    Hi all, a guy who i know ( he is the creator of teeboard) told me to visit this forum and look what is possible with JS and i am impressed by the demo's i saw here.

     

    I dont know allot about JS yet but i will try to learn some things every day

     

    i want to rotate this image or do another fun animation, the following script comes in from left to right and all is working good but i want to update this animation a little by adding some "cool" JS things

     

    I wanna learn by adding into this script some things do it will allow me to learn more about JS

     

     

    can u guys give me a push in the righ direction ?

     

    thanks in advance

     

    kevin

     

    the script:

     

     

     

    <head>
    <title>Twitchboard Notifications</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- visit http://www.greensock.com/get-started-js/ for more info -->

    <!--CDN links for the latest TweenLite, CSSPlugin, and EasePack -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>

    <style type="text/css" media="all">
    html, body {
        height: 100%;
        /*background-color: #FFFFFF;*/
        background-color: rgba(255,255,255,0)!important;
    }

    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #flashContent {
        width: 200px;
        height: 100px;
    }

    #notification-msg {
        color: #6495ED;
        font-size: 24px;
        font-family: Tahoma, Geneva, sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        position: relative;
        top: 50px;
        left: 50px;
    }

    #notification {
        left: 0px;
        top: 0px;
    }

    </style>

    <script>

    function teeboardNotification(type, msg) {
        //alert("notification: " + type + " - " + msg);
        
        var txt = document.getElementById("notification-msg");
        txt.innerHTML = msg;
        
        var div = document.getElementById("notifcation");
        div.style.visibility = "visible";
        TweenLite.killTweensOf(div);
        TweenLite.fromTo(div, 0.6, {x:-920}, {x:0, onComplete:hideNotification});
    TweenLite.fromTo(div, 0.6, {y:-400}, {y:0});
    }

    function hideNotification() {
        var div = document.getElementById("notifcation");
        TweenLite.to(div, 0.6, {x:-920, delay:5});
    }



    </script>

    </head>
    <body>

    <!--
    Animations should take no longer than 10 seconds (showing + hiding), as notifications are queued,
    meaning that if there are 2 new followers, 2 alerts are invoked, 10 seconds apart.
    -->

    <div id="notifcation" style="visibility:hidden">
      <div id="notification-msg">
            TEEBOARD JAVASCRIPT NOTIFICATIONS!!
       </div>
      <img src="images/notification-bg.png" width="920" height="110">
    </div>

    <div id="flashContent">
      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="200" height="100" id="teeboard-notifications" align="middle">
        <param name="movie" value="teeboard-notifications.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />
        <param name="play" value="true" />
        <param name="loop" value="false" />
        <param name="wmode" value="transparent" />
        <param name="scale" value="noscale" />
        <param name="menu" value="false" />
        <param name="devicefont" value="false" />
        <param name="salign" value="lt" />
        <param name="allowScriptAccess" value="always" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="teeboard-notifications.swf" width="200" height="100">
          <param name="movie" value="teeboard-notifications.swf" />
          <param name="quality" value="high" />
          <param name="bgcolor" value="#ffffff" />
          <param name="play" value="true" />
          <param name="loop" value="false" />
          <param name="wmode" value="transparent" />
          <param name="scale" value="noscale" />
          <param name="menu" value="false" />
          <param name="devicefont" value="false" />
          <param name="salign" value="lt" />
          <param name="allowScriptAccess" value="always" />
        </object>
        <!--<![endif]-->
      </object>
    </div>


    </body>
    </html>
     

×
×
  • Create New...