|
   |
| uCoz Community Archives Locked HTML5 (implementing HTML5 Animation) |
| HTML5 |
can any1 help me or guide me thru on how to implement this HTML5 animation on my website? creating it was easy, installing the code... not so much
 thank you in advance! basically i want to replace this http://crackmygame.ucoz.com/img/exmpl.png to this, and if its possible to keep the links "register" "login" & search http://crackmygame.ucoz.com/test/header.html |
Code /** * Adobe Edge: symbol definitions */ (function($, Edge, compId){ var symbols = { "stage": { version: "0.1.3", baseState: "Base State", initialState: "Base State", content: { dom: [ { id:'bg', className:'stage__12_id', type:'image', tag:'img', rect:[0,0,976,135], fill:['rgba(0,0,0,0)','images/12.png'] }, { id:'im1', className:'stage_Anno-2070-icon3_id', type:'image', tag:'div', rect:[0,0,128,128], fill:['rgba(0,0,0,0)','images/Anno-2070-icon3.png'], transform:[] }, { id:'img2', className:'stage_Assassins-Creed-Revelations-icon_id', type:'image', tag:'img', rect:[0,0,128,128], fill:['rgba(0,0,0,0)','images/Assassins-Creed-Revelations-icon.png'], transform:[[101]] }, { id:'img3', className:'stage_Batman-Arkham-City-icon_id', type:'image', tag:'div', rect:[0,0,128,128], fill:['rgba(0,0,0,0)','images/Batman-Arkham-City-icon.png'], transform:[[202]] }, { id:'img4', className:'stage_Deus-Ex-Human-Revolution-icon_id', type:'image', tag:'div', rect:[0,0,128,128], fill:['rgba(0,0,0,0)','images/Deus-Ex-Human-Revolution-icon.png'], transform:[[303]] }, { id:'img5', className:'stage_Minecraft-2-icon_id', type:'image', tag:'div', rect:[0,0,128,128], fill:['rgba(0,0,0,0)','images/Minecraft-2-icon.png'], transform:[[404]] }, { id:'img6', className:'stage_Saints-Row-The-Third-icon_id', type:'image', tag:'div', rect:[0,0,128,128], fill:['rgba(0,0,0,0)','images/Saints-Row-The-Third-icon.png'], transform:[[505]] }, { id:'img7', className:'stage_The-Elder-Scrolls-Skyrim-icon_id', type:'image', tag:'div', rect:[0,0,128,128], fill:['rgba(0,0,0,0)','images/The-Elder-Scrolls-Skyrim-icon.png'], transform:[[606]] }, { id:'img8', className:'stage_Warhammer-40k-Space-Marine-icon_id', type:'image', tag:'div', rect:[0,0,128,128], fill:['rgba(0,0,0,0)','images/Warhammer-40k-Space-Marine-icon.png'], transform:[[707]] }, { id:'logo', className:'stage_logo_id', type:'image', tag:'img', rect:[0,0,795,127], fill:['rgba(0,0,0,0)','images/2.png'], transform:[[124,1.1665],[-19],,[1.44,1.44]] }], symbolInstances: [ ] }, states: { "Base State": { "${_logo}": [ ["transform", "translateX", '124px'], ["transform", "rotateZ", '-19deg'], ["transform", "scaleX", '1.44'], ["style", "opacity", '0'], ["transform", "translateY", '1.1665px'], ["transform", "scaleY", '1.44'] ], "${_img8}": [ ["transform", "translateX", '707px'], ["transform", "translateY", '0px'] ], "${_img5}": [ ["transform", "translateX", '404px'], ["transform", "translateY", '0px'] ], "${_img7}": [ ["transform", "translateX", '606px'], ["transform", "translateY", '0px'] ], "${_img2}": [ ["transform", "translateX", '101px'], ["transform", "translateY", '0px'] ], "${_bg}": [ ["transform", "translateX", '0px'] ], "${_img3}": [ ["transform", "translateX", '202px'], ["transform", "translateY", '0px'] ], "${_img4}": [ ["transform", "translateX", '303px'], ["transform", "translateY", '0px'] ], "${_im1}": [ ["transform", "originX", '50%'], ["transform", "translateX", '0px'], ["transform", "originY", '50%'], ["transform", "translateY", '0px'] ], "${_stage}": [ ["style", "height", '131px'], ["style", "width", '976px'], ["color", "background-color", 'rgba(255,255,255,0.00)'], ["style", "overflow", 'hidden'] ], "${_img6}": [ ["transform", "translateX", '505px'], ["transform", "translateY", '0px'] ] } }, timelines: { "Default Timeline": { fromState: "Base State", toState: "", duration: 4464, labels: { }, timeline: [ { id: "eid92", tween: [ "transform", "${_logo}", "rotateZ", '-3deg', { fromValue: '-19deg'}], position: 2249, duration: 405 }, { id: "eid130", tween: [ "transform", "${_logo}", "rotateZ", '3deg', { fromValue: '-3deg'}], position: 2654, duration: 95 }, { id: "eid132", tween: [ "transform", "${_logo}", "rotateZ", '-3deg', { fromValue: '3deg'}], position: 2750, duration: 124 }, { id: "eid124", tween: [ "transform", "${_logo}", "rotateZ", '0deg', { fromValue: '-3deg'}], position: 3464, duration: 999 }, { id: "eid74", tween: [ "transform", "${_img5}", "translateX", '432px', { fromValue: '404px'}], position: 1295, duration: 394 }, { id: "eid81", tween: [ "transform", "${_img5}", "translateX", '23px', { fromValue: '432px'}], position: 1689, duration: 428 }, { id: "eid77", tween: [ "transform", "${_img8}", "translateX", '735px', { fromValue: '707px'}], position: 1623, duration: 326 }, { id: "eid84", tween: [ "transform", "${_img8}", "translateX", '28px', { fromValue: '735px'}], position: 1950, duration: 571 }, { id: "eid90", tween: [ "transform", "${_logo}", "scaleX", '1', { fromValue: '1.44'}], position: 2474, duration: 180 }, { id: "eid111", tween: [ "transform", "${_logo}", "scaleX", '0.54', { fromValue: '1'}], position: 3464, duration: 1000 }, { id: "eid75", tween: [ "transform", "${_img4}", "translateX", '331px', { fromValue: '303px'}], position: 1186, duration: 415 }, { id: "eid80", tween: [ "transform", "${_img4}", "translateX", '17px', { fromValue: '331px'}], position: 1601, duration: 426 }, { id: "eid87", tween: [ "color", "${_stage}", "background-color", 'rgba(255,255,255,0.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(255,255,255,0.00)'}], position: 0, duration: 0 }, { id: "eid95", tween: [ "style", "${_logo}", "opacity", '1', { fromValue: '0'}], position: 2432, duration: 222 }, { id: "eid73", tween: [ "transform", "${_img6}", "translateX", '533px', { fromValue: '505px'}], position: 1396, duration: 407 }, { id: "eid82", tween: [ "transform", "${_img6}", "translateX", '23px', { fromValue: '533px'}], position: 1804, duration: 445 }, { id: "eid97", tween: [ "transform", "${_logo}", "translateY", '-5.4265px', { fromValue: '1.1665px'}], position: 0, duration: 2654 }, { id: "eid106", tween: [ "transform", "${_logo}", "translateY", '-10px', { fromValue: '-5.4265px'}], position: 2654, duration: 55 }, { id: "eid107", tween: [ "transform", "${_logo}", "translateY", '-2px', { fromValue: '-10px'}], position: 2709, duration: 40 }, { id: "eid109", tween: [ "transform", "${_logo}", "translateY", '-5px', { fromValue: '-2px'}], position: 2750, duration: 47 }, { id: "eid122", tween: [ "transform", "${_logo}", "translateY", '29.49499px', { fromValue: '-2px'}], position: 3464, duration: 1000 }, { id: "eid91", tween: [ "transform", "${_logo}", "scaleY", '1', { fromValue: '1.44'}], position: 2559, duration: 95 }, { id: "eid112", tween: [ "transform", "${_logo}", "scaleY", '0.49', { fromValue: '1'}], position: 3464, duration: 1000 }, { id: "eid72", tween: [ "transform", "${_img7}", "translateX", '634px', { fromValue: '606px'}], position: 1541, duration: 327 }, { id: "eid83", tween: [ "transform", "${_img7}", "translateX", '28px', { fromValue: '634px'}], position: 1869, duration: 533 }, { id: "eid125", tween: [ "style", "${_stage}", "height", '131px', { fromValue: '131px'}], position: 0, duration: 0 }, { id: "eid98", tween: [ "transform", "${_logo}", "translateX", '125px', { fromValue: '124px'}], position: 0, duration: 2654 }, { id: "eid121", tween: [ "transform", "${_logo}", "translateX", '-49.85px', { fromValue: '125px'}], position: 3464, duration: 1000 }, { id: "eid71", tween: [ "transform", "${_img2}", "translateX", '129px', { fromValue: '101px'}], position: 1000, duration: 396 }, { id: "eid78", tween: [ "transform", "${_img2}", "translateX", '5px', { fromValue: '129px'}], position: 1396, duration: 353 }, { id: "eid76", tween: [ "transform", "${_img3}", "translateX", '230px', { fromValue: '202px'}], position: 1084, duration: 415 }, { id: "eid79", tween: [ "transform", "${_img3}", "translateX", '11px', { fromValue: '230px'}], position: 1500, duration: 410 }] } } }}; var comp; Edge.registerCompositionDefn(compId, symbols); /** * Adobe Edge DOM Ready Event Handler */ $(window).ready(function() { comp = new Edge.Composition(compId, {stage: "." + compId}, {}); /** * Adobe Edge Timeline Launch */ comp.ready(function() { comp.play(); }); }); })(jQuery, jQuery.Edge, "EDGE-51350699"); |
Ok, here are some general steps:
Replace the header code Code <div id="top">.....</top> Code <div id="stage" class="EDGE-51350699"></div> And paste the scripts into the page code: Code <!--Adobe Edge Runtime--> <script type="text/javascript" src="/test/edge_includes/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="/test/edge_includes/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/test/edge_includes/edge.0.1.3.min.js"></script> <script type="text/javascript" src="/test/edge_includes/edge.symbol.0.1.3.min.js"></script> <script type="text/javascript" charset="utf-8" src="/test/header_edge.js"></script> <script type="text/javascript" charset="utf-8" src="/test/header_edgeActions.js"></script> <link rel="stylesheet" href="/test/header_edge.css" /> <!--Adobe Edge Runtime End--> I am afraid I cannot give you a more detailed guide as it is a coding question and quite non-related to uCoz. I'm not active on the forum anymore. Please contact other forum staff.
|
| |||
| |||