There are several plugins for viewing interactive 360-spin images of products, such as this: https://www.ajax-zoom.com/index.php?cid=home&tag=spin360
However, my question is whether there are any current or proposed solutions for this that are browser-native, so don't require any plugins? One analogy would be how gifs are now natively supported by most browsers without the need for a plugin.
Many thanks!
First, it is important to differentiate between the common types of 360 spin:
Spin from images
Spin from 3D model
You are asking about a spin from a set of images (photos). There is no native file format for 360 spins generated from a series of images. The spinning effect is achieved with JavaScript and browsers don't have the capability to display these animations natively.
The closest you can get is what Sirv does, to generate a .spin file, which can be viewed as a standalone URL like this:
https://demo.sirv.com/example.spin
However, it is rendered as an HTML file and in the background it still serves up all the unique images and JavaScript required to create the spinning effect. That file cannot be embedded in a page like native files (e.g. images or videos) with an img or other tag - it still need the .js to be embedded in the page too, like this:
<script src="https://scripts.sirv.com/sirv.js"></script>
<div class="Sirv" data-src="https://demo.sirv.com/example.spin"></div>
If instead you wanted to embed a 3D model, then yes, WebGL is the browser-native solution.
Related
Let's say I have figured out the interface of a video editor in plain HTML5. I have all the necessary tools I need for the user to be able to create a video - except rendering it to a MP4 or MOV or whatever.
I also want to create the video using HTML, CSS & CSS animations, as then it would be easier. There is NO JavaScript framework of any sorts which is changing the HTML that will be used to make a video.
So, is there a program (preferably server-side) which can convert Styled HTML and CSS animations/transitions into an actual video that can, say for example, be uploaded to YouTube?
This may be what you are looking for: https://www.remotion.dev
Essentially, it is a ReactJS framework that uses SVG and WebGL to create complex motion graphics, which can include videos and images.
(I have no relation to the framework or its developers)
flipbook created by createjs and preload js and it takes 15 min. to load the page.
it contains more than 300 images.
http://www.mentalimage.com.au/perkins/05/index.html
How can I resolve this problem?
You can get a little bit of filesize back by optimizing your pngs using something like ImageOptim.
There are also a bunch of duplicate frames. For example, the same open animation plays again when closing, so frames 30 & 70 are identical. You could reuse different frames to reduce this
However, the approach you have taken for your assets is not optimal. Building this as a full frame-by-frame image sequence is not ideal.
Consider animating separate pieces, so things like the people frames can only be exported once, and the page flip is a separate PNG sequence. Tools like Adobe Animate can help with this, and also export your content directly to an EaselJS library
You might want to use a video instead. A frame-by-frame animation is going to be VERY heavy, especially at the dimensions you are using.
Overall, I would recommend a different approach to your animation. If you don't want to rebuild it to be more dynamic, then video would be a better approach.
I have a WordPress site with lots of custom fields that contain images in .svg format.
Now I want to add support to IE8, which won't display SVG, so I need to find a solution.
The first thing I think of is to add custom fields to add a .png along with every .svg on the site, but this means to go through each and every custom fields to modify them...
I've also seen that there's a library called Raphael.js that supports IE, but it's intended to draw the SVGs, and I already have many complex SVGs created with Illustrator, so this is not a solution for me...
Is there any way (i.e. JS library) that, each time you want to load a SVG with:
<img src="http://mydomain/Homepage-1.svg" alt="Image Alt">
it automatically converts it to plain image?
You can include a call for Adobe's SVG Viewer for IE8
see:
http://www.iegallery.com/en-us/Addons/Details/444
It still works nicely for svg including filters.
Adobe SVG Viewer was discontinued in 2009. I still have clients from time to time that have need of support for IE8. This page has a few polyfills worth trying:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#svg
You'll need to decide what you want your fallback to be, Flash, Canvas, Silverlight, and then choose the right solution for you.
I'm currently planning a web project that has a few animated sequences that need to run on the site.
I need the site to be as cross browser compatible as possible (duh!) and wanted to get fellow developers thoughts on different options.
Canvas is not an option mainly because of IE. IE9+ only support isn't good enough, even though the 'progression' of browser stats for IE is near on laughable
http://www.w3schools.com/browsers/browsers_stats.asp (13% for IE in March 2013 (AND IT COMES AS DEFAULT WITH ALL WINDOWS MACHINES) going slightly off topic...
I was planning on preloading a series of animated gifs for different stages of animations for example 'run', 'walk', 'fly' and then swap the src of an img tag as and when required. I haven't tested anything like this yet, but i invisage delays even with preloaded images (though javascript http://www.preloadjs.com )
although im not too keen on the quality of animated GIFS. taking this idea a little further, using the same method but with each from as a seperate PNG? is that feasible?
Or could a DOM element with a spritesheet attached as the background image work, changing the background position on each step?
Any thoughts or examples ;) would be very helpful! :)
Cheers,
Rory!
---EDIT
im also open to different javascript libraries.. although currently included in my project are jQuery and Rapheal
jQuery animate is going to be your best bet. Buf you have time to generate a sprite sheet to show different animation stages, then you may have enough time to look into a good jquery plugin like gameQuery, which allows you animate sprite sheet items.
I have a web page with around 70 images. I am looking for a way to bundle these images into a resource file. This isn't to improve client side performance as caching etc will take care of this. It's more for asset management on the sever side via our cms - I'd like to be able to deploy a single resource into the cms rather than having to create 70 individual resources.
Are there JavaScript libraries that will let me bundle images?
It is easy to do that using Image Sprites and you need not use JavaScript. A Sprite is a single image file with a collection of images positioned in it at specific locations. I recommend to use a transparent PNG image with your images in it.
Below you can see transparent PNG sprites used by Google, Windows Live and Facebook.
Once the sprite is loaded in web page, it is easy to display images in another page since the browser normally caches images to improve page loading speed. You can display specific image in a sprite by defining it's specific location in the sprite using CSS, like;
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
Finally, Spritebox is a handy tool to create your own custom image sprites.
I think what you need is CSS sprite.
Using CSS sprite you can have more than one image in a single image and use that image to show individual image as your requirement.
The main advantage of this is that you need single request for this image instead of request for for each images.
For knowing more about CSS Sprite check below link
http://www.w3schools.com/css/css_image_sprites.asp