برندینگ و برندسازی: javascript - ES2015 parallax scroller program structure?

[ad_1]

I'm trying to build a simple and customizable ES2015 parallax scroller.

My question is about structuring code containing low-level HTML5 instructions such as requestAnimationFrame or setInterval(game_loop_method, 1000 / 60)

Nice to have:

a low size footprint in HTML code, thus to facilitate integration in the header of a webpage (saying a blog or a CMS) and non-intrusive jquerty inside the lib :

<script>
 $(document).ready(function() 
 $.getJSON('parascroll/theme.json', function(theme) 
 var canvas = $('#ps').get(0);
 var ps = new ParaScroll(
 canvas: canvas,
 theme: theme,
 width: '100vw',
 height: '100vh'
 );
 ps.run();
 );
 );
</script>

and a flexible customizable config file based :

{
 "main": 
 "width": "100vw",
 "height": "100vh",
 "background": "#cfe"
,

"layers": [
 
 "name": "floor-background",
 "sprites": 21,
 "velocity": "10",
 "top": "45%",
 "left": "0%",
 "width": "100%",
 "height": "25%",
 "background": "#afd",
 "spritesheet": "parascroll/spritesheet.png",
 "distro": [10, 20, 30, 10, 40] // statiscal distribution of sprites
 ,

 // ... and so forth, for all layers

How to achieve such a result ?

(I'm not considering using some lib as PIXI, my feeling is that code is as-hoc enough not to using 10% of the lib...)

Regards

[ad_2]

لینک منبع

۱۳۹۶ مهر ۸, شنبه

javascript - ES2015 parallax scroller program structure?