( function() { var app = window.app = window.app || {}; window.ccc = console.log; let anim = { anim1 : { img : "../img/processed/horizontal/DSCI3803-man.JPG", width : 200, //px height : 150, pos : [ 0, 400, 0 ], //in base layer, z is towards observer start: 0, //s own : { animation : [ [ "animation-name", "none" ], [ "animation-duration", 10 ], //s [ "animation-timing-function", "ease" ], [ "animation-delay", 0 ], //s [ "animation-iteration-count", 1 ], [ "animation-direction", "normal" ], //s [ "animation-fill-mode", "none" ], [ "animation-play-state", "running" ] ], "transform-origin": [ 0, 0, 0 ], keyframes:` @keyframes move_${'anim1'} { 0% { transform: translate3d( 0px, 0px, 0px ); } 100% { transform: translate3d( 0px, -100px, 0px ); } }` }, "children" : { "perspective-origin": [ 0, -100, 100 ], //z is perspective = distance to observer "transform-style": "preserve-3d" } } }; //.ugly //Object.keys( scenario ).forEach( ( key ) => { let val = scene[ key ]; ... //.ugly too, who knows better? //browser experimental //var runners = Object.entries( anim ).map( ( val ) => { // return [ val[ 0 ], val[ 1 ] ]; //}); //.not good too: looses "key" //var runners = Object.keys( anim ).reduce( builder, { html : '', style : '' } ); let html = ''; let style = '' //.ugly too, who knows better? let runners = Object.keys( anim ).map( ( key ) => { let an = anim[ key ]; html += `
`; //start : 0, //s translation : [ 0, -100, 0 ], "animation-name": "none", "animation-duration": 10, //0s "animation-timing-function": "ease", "animation-delay": 0, //s "animation-iteration-count": 1, "animation-direction": "normal", //s "animation-fill-mode": "none", "animation-play-state": "running" let wan = an.own.animation.reduce( ( builder, val ) => { return val + ' ' } ); wan = `animation: ${wan} move_${key}`; style += ` -webkit-${wan} ${wan}`; let keyframes = an.own.keyframes; style +=` #${key}: { position: absolute; width: ${an.width}px, height: ${an.height}px, left: ${an.pos[0]}px, top: ${an.pos[1]}px, //do z: pos : [ 0, 400, 0 ], //in base layer, z is towards observer background-image: url('${an.img}'); -webkit-animation: ${animation}; animation: ${animation}; } ${keyframes} }); ccc( runners ); }) ();