I'm looking for a way to implement some animation on the background on a page when the user scrolls down a page. Think of ... maybe a divided sphere which get closer when the user scrolls down the page and get departed on a scroll up.
I thought of using SVG in combination of JS, but maybe some of you know better ways to implement that kind of stuff.
Maybe some of you already coded that kind of animation?
PS: I don't want to use Flash etc., just HTML5 and existing frameworks.
I found some frameworks, plugins that do exactly I was looking for and I don't want to hold them back. Here are the links:
Scrollorama
Scrolldeck, Parallax
Have a nice day! :)
Sy
I'm trying to make an interactive book for tablets with animations and page flip.
I'm using starling framework.
My idea of page flip is to mask 2 instances of next page with 2 static quads which are moving and rotating (it works great on pc/mac, but slow on tablets).
Using PixelMask is slow/very slow(10-20fps). Using clippedsprite is fast(40-50fps) but cant rotate the mask.
Are there any other options?
EDIT:
During my search I've found the idea of shaders (AGAL in ActionScript3), but I'm not familiar with this. Is it possible to simulate masking by the use of GPU shader?
EDIT2:
This problem was experienced on iPad1, on iPad3 its 60fps :) Dont know how its going to work on iPad2 and iPad4
I'm pretty sure AGAL is the ultimate answer!
But easiest, and still very good, solution is the smart use of ClippedSprites
(Sprites with clipRect since Starling 1.3+)
I've managed to achieve almost static 60 fps on iPad1.
Just needed to remove filters and stop/flatten animations inside Objects!
Filters are massive performance killers!
You can find here a mask class based on FragmentFilter. i got better results with it. But if you want to implement a PageFlip, you can use this class. And here is an improved version of the pageflip with interactive corners. Hope it helps you :D
I discovered the new css controlling scrolling and snapping on http://msdn.microsoft.com/en-us/library/windows/apps/hh466066.aspx
I wonder if there's a tutorial or sample out there explaining how this works and to use those css-attributes.
I'm working on a (angularjs based) calendar and I wonder if it's possible to extend it using css to support touch panning trough the months (like win8 calendar navigating with the fingers).
http://jsfiddle.net/johnnayweiler/FyrtQ/
How to use like -ms-scroll-snap to make the view go with the finger, then snap to the next page? What js events would be recommended to know when the scroll amount reached this snap point(to load the next month).
Also of course, is there something similar in other browsers(this doesnt seem to be a standarts feature)? Probably using javascript, are there some simple solutions for handling momentum and snap?
Thanks for your ideas :)
Theres now an official sample ;)
http://code.msdn.microsoft.com/ie/Scrolling-panning-and-6834aaf9/sourcecode?fileId=68336&pathId=380363024
I have an SVG logo made up predominatly of elements. I want to animate this, or more specifically drop it into a "gravity world". I was hoping to use Box2D (web port).
I'm a noob to Box2D and Canvas really, but I've got as far as converting my SVG into HTML5 canvas using canvg and I'm now reading through the getting started tutorials for Box2dWeb and I can see how to create a world with gravity, but I can't find any examples of walking an existing SVG or Canvas and simply adding the shapes to that world.
It looks like you need to use the Box2D drawing methods. Can anyone point me at a simple example that takes an existing set of shapes (SVG or on Canvas) and simply drops them onto a Box2DWeb gravity world so they simply collapse to the bottom, much like nearly all the existing Box2D demos and tutorials?
Note that with CanVG I'm not adding the shapes to Canvas myself, it is creating the Canvas for me from the SVG.
You can add whatever you want on top of box2d. If you wanted to draw dancing elephants instead of a box shape, that's up to you. Otherwise games would look pretty boring.
Nothing prevents you from using either SVG, canvas, WebGL or even HTML with box2d, you don't need to use the box2d drawing methods if you don't want to.
See this blogpost (and code) for using box2d together with raphaël (SVG). Dmitry Baranovskiy (the author of Raphaël) has also shown some demos of a custom box2d port/wrapper called newton.js. It's not yet released AFAIK, but it promises a simpler and more javascript-like API.
Please check out these links,
1) Box2D orientation for the JavaScript developer
2) Box2dweb Study Notes Series
3) BOX2D JS – PHYSICS IN HTML5 & JAVASCRIPT GUIDE
Regarding the html elements to apply box2d effects i also can't find any other links expect the one you mentioned in your answer.
I had been hoping that with a bounty somebody would be able to illustrate for me the "hello world" of 'gravity demos' that could animate some arbitrary shapes. Articles and links I've been shown (and found) so far are much more complicated than I'm looking for.
Whilst I hate to answer my own question, I'd just like to set the bar. This is EXACTLY what I'm looking for;
http://mrdoob.com/projects/chromeexperiments/google-gravity/
This script for this code is licensed under GPL3 I understand and I've tried it out successfully on my site. In fact, it just causes all the DIVs on my page to drop, so it's just the ticket, and I could use it.
It's not however, a simple script. I'd have preferred a simple stand-alone sample if it were possible. Failing that, hopefully this answer will help anyone else looking for something similar.
[Updated]
I've also since found this plugin, although it's a little CPU intensive and crashed Chrome for me.
http://tinybigideas.com/plugins/jquery-gravity/
I'd still be delighted to award the bounty for any better answers.
I'm pretty sure that this is what you want, it uses Gravity Script (the file's so large because it includes jQuery and Box2d.js):
Demo: http://jsfiddle.net/SO_AMK/Cf7jn/
JavaScript: None! It's in it's default configuration.
I don't really know 'Box2d', and I'm not sure if this is what you mean but just to clarify if it comes to where you need it, in HTML5, it works like having the background or style to a <table>, Which if you don't know is just about the same thing as a table in MS Word.
Sample Canvas:
<canvas id="myCanvas" width="200" height="100"></canvas>
More Color & Style:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
And If Allowed in 'Box2d' add some javascript:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Well, Dmitry's newton.js is not yet public. But like #cirrus, I needed something similar. So I've gone ahead and created my own newton.js. It is not well tested, but has API similar to what I can see in Dmitry's video + my own requirement (I wanted to create a game engine on top of Raphael as a renderer)
Please fork at - https://github.com/dbose/newton.js
#cirrus, it also has a simple test.html, which takes a simple Raphael element and add it to the Box2D "world"
Contextually, I needed this because the core of my app (Mixow) was a Raphael editor and later I wanted to create a game maker out of it. (http://www.mixow.com)
I have a class which extends a SWC , in the swc i have two boxes, front and back and an animation on the same timeline. The animation works fine without swapping when I swap them the animation stops working. Anyway I can make it work?
I have the following code :
var frontTemp:DisplayObject = this.animationInstance.getChildByName("front");
var backTemp:DisplayObject = this.animationInstance.getChildByName("back");
this.animationInstance.swapChildren(frontTemp,backTemp);
this.animationInstance.gotoAndPlay("animation");
The short answer is, you should avoid using both frame animations and scripts on the same objects. Basically, frame animations and scripts are two different ways to control the properties of clips (position, size, stacking order, etc). And if you use them both, Flash has no unambiguous way to know which set of instructions should take precedence. The way Flash deals with this problem is, once you use scripts to update something, it is no longer affected by frame animations from then on (unless it gets removed from the stage and re-added).
I posted a couple of general ways to fix this kind of issue in answer to this question - please have a look.