Animated/ responsive/ live icons on rollover. Example given - javascript

I'm trying to find out how to recreate the effects of the icons here:
https://designmodo.com/flat/
especially the retina display icon with the moveable lens.
However, after 2 days of trying to look for a solution/ tutorial I still couldn't find anything like that.
I've looked into JS solutions as well as HTML5 Canvas. Perhaps I've been looking in the wrong place or with the wrong search terms.
Can anyone point me to the right direction?
Cheers
Ryan

They're using SVG images (with a PNG fallback for older browsers) and animating certain paths in the SVG using JS and CSS.
Explanation of the technique here http://css-tricks.com/using-svg/

Related

How to move an icon through different points?

This website has an excellent animated map showing the migration patterns of wildebeest in the Serengeti. Unfortunately, they animated their map using Flash.
I wanted to know whether there were alternatives for doing something similar, perhaps with Javascript. I found a plugin called Two.js however the documentation isn't great and it seems to be a bit overkill for what I need.
Does anyone know of any good resources or examples they could kindly link me to?
I think you have two options:
Using HTML5 canvas and animate your objects using window.requestAnimationFrame();
Animate the dom, here you could use GSAP or Web Animation API.
With HTML5 canvas you work with raster image (pixels) instead using the DOM you could animate any HTML elements including also SVG which is vector.

How to draw coordinates for HTML 5 map

I have an outline of Asia as shown below:
I want the countries to fill with red when hovered over, such as this:
The cut-outs exactly fit the map. I've been pretty confused with the information I've found so far on the internet as to how to do this. Some people say HTML 5 maps, others say jQuery, others say SVG... I just want a definitive method of how to accomplish this so I can at least attempt this project. Also, I've found it hard to find good tutorials online, so if a step-by-step method could be told, that would be great (I can find tutorials for each step, just need to know what I should be doing).
Thanks a bunch in advance.
SVG allows you to assign CSS style classes to individual shapes. One possible CSS class is the :hover pseudoclass. This allows you to change the styling when the user moves the mouse on the shape.
An example how to do this, can be found here:
http://css-tricks.com/using-svg/

Javascript 360 degrees panorama

Hi I'm looking for a way to create a panorama view with a 360 degrees photo. I need a solution to do create something like QTVR. There is a lot flash based software out there (I'm trying to avoid that) and also some javascript/prototype/jquery solutions. But none of the solutions I've found have the behaviour I'm looking for. I want to eanable users to look around (just horizontal). Furniture objects on the pictures should react on mouseover, so that I might have multiple "layers" to distort. Is there a way to manipulate images in pure javascript or with jquery so, that it looks like they where bent cylindrical? Or does anyone know good libraries that support that kind of image manipulation? Might webgl be a good solution? I don't really know how to start. Is there anyone who could give me a hint. I'm just looking for a direction. google didn't bring me usable results.
Check out three.js
http://mrdoob.github.com/three.js/examples/webgl_panorama_equirectangular.html
Also, you could possibly do some of the image manipulation via canvas.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
It might be easier (with canvas) to just have a fully processed panoramic image, and figure out which pixels represent your interactive object. Then listen for mouseovers on those pixels.
try out http://panorado.com/en/PanoradoJs.php
There you'll find an excellent HTML5/JS based Viewer.
There are lots of tool to do that. Have you tried www.vtility.net ? Im not sure if it had mouse over layering. But it was the only SEO friendly that I have found.

Consolidating images - sprites vs Base64

On Google some time ago I read an article on optimizing image use. Basically there is a way to combine multiple images...say small icons into one larger image and then use a method to display the part you need for ecah part of the page. Can anyone point me in the right direction on how to do this. Cant' seem to find it on google at the moment. Thanks!
The technique is called CSS Sprites, knowing that will make it easy to find information about it.
You can read about it for example here:
CSS Sprites: Image Slicing’s Kiss of Death
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
This is the best website for this. http://spriteme.org/
It will analyze your website and advise you on what images can be 'sprited' (is that the correct term?) and will generate the new CSS for you and the image(s) sprite(s)

box2d-js element with external image

So far in the samples of varies box2d js implementation I can find only element defined in shapes (ball/box/etc), is there a way to create an element defined by an image, e.g. a boulder?
You can use the b2PolyDef and b2PolyShape objects to create polygons.
This documentation is meant for AS3 but it is relatively simple to figure out the JavaScript equivalent.
If you wanted to automate the mapping from an image's bounding box to the polygon, you could use canvas and getImageData() to seek through the pixels looking for non transparent (assuming your image has a transparent background). This is probably more effort than it is worth though.
Also see Understanding custom polygons in Box2D.
I was trying to solve a same kind of problem when i came across this brilliant answer. Hope this will help you.

Categories