Jump to content
Search Community

rigz

Members
  • Posts

    2
  • Joined

  • Last visited

rigz's Achievements

0

Reputation

  1. timelinelite all the way ! thanks for the update
  2. 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...