Posts in category JavaScript
Pure HTML5 file upload
- 09
- Dec
Pure HTML5 file upload
Today we will be developing a great HTML5 file upload form with progress bar and preview (at client-side). We have already gave you jQuery based solution, but today’s application don’t require jQuery at all. All made in pure HTML5 Javascript. I’m going to use FileReader (html5) to implement live preview (without uploading to server), and, going to use XMLHttpRequest to send data to server.
Read more
HTML5 animation – patterns with loops
- 03
- Dec
HTML5 animation – patterns with loops
I have prepared new HTML5 tutorial for you. This is not quite regular ‘html5 game development’ tutorial, but I like to show you another demonstration of html5 canvas animation. We will create patterns with loops and animate it. Today I have prepared nice demo with the sun and with three cars.
Read more
HTML5 Game Development – Lesson 4
- 21
- Nov
HTML5 Game Development – Lesson 4
Today we continue a series of articles on game development in HTML5 using canvas. Today we going to learn next elements: animation with sprites and basic work with sound. In our demonstration you will see a flying dragon. We will hear the sounds of wings all time (we will loop this sound), and another sound – dragon’s roar (on mouseup event). And finally we will teach our dragon be closer to the mouse cursor (when we hold down the mouse).
Our previous article you can read here: Developing Your First HTML5 Game – Lesson 3. Our new script is new enhanced version of previous one.
Read more
Creating an Image Zoomer in HTML5 Canvas
- 20
- Oct
HTML5 canvas – Image zoomer
New interesting tutorial – I will show you how you can create nice and easy Image zoomer using HTML5. Main idea – to draw a picture on the canvas, add event handlers to mousemove, mousedown and mouseup (to move the enlarged area of ??the motion while holding the mouse).
Read more
HTML5 Game Development – Navigating Your Spaceship- Lesson 3
- 19
- Oct
HTML5 Game Development – Lesson 3
Today we continue a series of articles on game development in HTML5 using canvas. Finally, today we will start adding animation, and few more interesting features. Our demonstration will include a spaceship flying through space, and a new element – the Dialogue. The dialogue will contain two pages, and our button will toggle the dialog pages + hide the dialog on the second click.
Our previous article you can read here: Developing Your First HTML5 Game – Lesson 2. Our base script will taken from previous letter.
Read more
Creating a Photo Array in WebGL
- 18
- Oct
Creating photo array in WebGL
Today we continue HTML5 WebGL examples. I prepared a nice photo gallery for you. Images in this gallery will be replaced by a mouse click.
Read more
Creating HTML5 Image Effects App – Adding Horizontal Flip
- 26
- Sep
HTML5 Image Effects App – Adding Horizontal Flip
Today we going to continue HTML5 canvas examples, I hope you enjoy this series of articles. Even for me, working with graphics, images brings pleasure. Sure that you like this too. Today we will be adding new filter – Horizontal Flip.
Read more
Creating an Animated 3D WebGL Demonstration
- 12
- Sep
Making 3D WebGL demonstration
Today we continue HTML5 canvas examples. And today we will try to begin learning WebGL. In my demonstration I will show you how to initialize WebGL and draw simple 3D object. Also we will animate this object too.
Read more
HTML5 Image Effects App – Adding Noise and Invert
- 10
- Sep
HTML5 Image Effects App – Adding Noise and Invert
Today we continue HTML5 canvas examples, I hope you enjoy this series of articles. Even for me, working with graphics, images brings pleasure. Sure that and for you too. Today we will be adding two new filters – Noise and Invert.
Read more
Creating a Rotating Slider with Easing Effects in jQuery
- 05
- Sep
Creating rotate slider with easing effects
Today I decide to make another one slider (jQuery), where image is scrolled on its axis (emulating 3D). Also I will allow to use custom easing effects for switching of images. In result – this will our own jQuery plugin.
Read more
