|
   |
| 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.
|
| |||
| |||
Need help? Contact our support team via
the contact form
or email us at support@ucoz.com.