I understand that there are many methods to creating a slideshow on a website, but that isn't my question.
What I really want to know is what is the most mainstream method of creating a slideshow on a website.
What do you recommend?
So far I've seen Jquery, Javascript, CSS & DHTML, and Flash. The first thing that comes to mind for me is flash, then second Javascript.
What are your thoughts?
Personally, I would go for jQuery over Flash. It's likely that a jQuery implementation will be far more lightweight than Flash, and jQuery provides such a rich set of effects it makes it easy to create great-looking slideshows.
Plus, there are literally hundreds of existing jQuery implementations around on the web, so you can just find one that provides all the features you require and drop it in to your site.
I would go for a basic slideshow in Javascript. Lots of webdevelopers are steering away from Flash for basic stuff like this. One of the reasons is that Flash doesn't run great on mobile devices. For myself I don't use flash because my visitors ain't waiting to be amazed by my super fancy slideshow. Mostly if they use a slideshow they want to see pictures.
That doesn't mean that you can't create super fancy slideshows with Javascript.
Related
I have been asked to create a website where the homepage consists of a fading image slideshow and a navigation bar at the bottom of the page. The client wants the image to cover the entire screen with the exception of this nav bar with a pause/play button at the top right of the screen.
I have built this using the supersized jquery function and made a few tweaks, but there seems to be performance issues with the fading effect (its very static and transitions dont appear to flow very smoothly).
Before I get stuck into the remainder of the site, I want some advice from the seasoned experts out there on using this function, or the jbgallery jquery function I have recently come across. Alternatively what is the general consensus on building the whole site in flash.
I haved used flash sparingly before due to CMS issues (which I have now worked around) and ipad display problems etc so would need to do a bit of learning to go down this route but am more than happy to adopt the approach if people really think it is worthwhile. My experience to date has consisted of including swf animations and components within php pages populated via mysql using xml files.
Looking forward to any and all advice (not simply for this project but future ones aswell!).
Thanks
JD
I'm actually trying to work out the exact same problem right now. I don't have a perfect/easy solution yet, but here's something that might work:
http://playground.benbarnett.net/jquery-animate-enhanced/
It's a jQuery plugin that takes your standard animate() calls (and a few others) and uses CSS3 transforms when possible. This will theoretically improve the frame rate of transitions since CSS3 effects perform better in modern browsers. I have smaller demos working, but am having trouble getting a lower frame rate for full-browser images.
With apple browsers not supporting flash or silverlight, there is a real incentive to avoid flash / silverlight to avoid losing that audience when building a web site. That being said there is certain functionality that it seems like you can only really do in flash / silverlight
for example alot of simple games where you can move things on the screen like this site all seem to be built in flash. also, a lot of drag and drop functionality where you can drag one object onto another like these game sites.
After lots of searching I can't find any that are not either flash or silverlight based.
In particular i am looking for drag and drop support of one element onto another
my question is if you need this type of functionality is javascript / html 5 able to do this type of stuff (so you can support iphone / ipad) or are you out of luck.
is there any resource that highlight examples or suggestions of trying to do this type of interactive functionality and how / if you can do this type of stuff without silverlight / flash. also, if anyone has any good examples of existing site who are doing that today that would be great as well.
This is going to be a long discussion about the ability of html5 to compete with flash.
In my opinion jquery is not any close to performance flash or silverlight animation give.
if the comparison is in terms of drag-and-drop, menu dropdowns, fadeIn.fadeOut - jQuery is competitive.
If i will see the jQuery cartoons with lot of layers and objects moving simultaneously - i will probably agree that jQuery has competitive performance.
the things are compare to see the difference:
magnifying glass over the raster picture
smoke/water/fire emulation
compound 3D objects like fractals with deep branches
when HTML5 will have it - then i will agree that it has competitive performance. All that i see today is picture slideshows and couple of games that work on html5.
You can check Easel.js by Grant Skinner, used in Pirates Love Daisies.
Also, other frameworks are:
enchant
limeJS
akihabara
JQuery UI has that for long time, works in all modern browsers, not just HTML5
JQuery UI Demos
You should checkout canvasdemos.com. It has a lot of good examples of what can be done. You can take a look at the source code behind these - some even help you in that regard. e.g. the pool game
Other good examples include the doom like "game" (you can walk around in 3D dungeons).
The Frog Log game was the winner in the 10KB coding challange
Also this was the first result for a search of html5 animation demo in google. It has links to 48 demos. Some of them are really cool. Unfortunately the code for a lot of these have been minified, but they still might give you a few ideas about what you can achieve.
So it's fine for making simple dressup type games. However, if you are looking to make anything that's CPU intensive, you should look into some performance benchmarks like this. HTML5/Canvas based animation is still quite far behind flash in terms of performance. Getting consistent behaviour across the various browsers will also be an issue.
HTML5 and related technologies (WebSockets, WebGL, web storage, File API, media capture, etc) are quickly moving towards parity with (and in some cases exceeding) what can be done in Flash/Silverlight.
The HTML5 Rocks slides are a reasonable starting point to see what is possible (you need an HTML5 capable browser). In particular, the Canvas example demonstrates image manipulation (drag, rotate, resize) which is the core functionality needed to implement dress-up games.
Flash was designed for animation. The tweens were meant to be used for animating drawings. Because it was marketed to every Tom, Dick and Harry, people started using it to animate hideous menus and flying content text. And Adobe complied to this new use, building an abode of total chaos.
Flash is still the best animation engine for the web, it should never have catered to full flash websites.
Many HTML5 fans out there, but it needs to be said: Canvas is a decade behind Flash. But for everything other than animation, Flash is an abomination.
In old browsers, you can emulate drag'n'drop of elemnts from the DOM but in new browsers, you can also drag'n'drop files (like images) and there are events for it: https://developer.mozilla.org/en/DragDrop/Drag_and_Drop
For flash-like animations, it's been possible with JavaScript for a long time but doing some bug ones was really hard and often slowing down the page.
Now, there is canvas and WebGL that allow you to do it in a more convinient way (for the complex ones).
And with canvas, WebGL, CSS animations (if you use the tric to make the browser think it's 3D), you get CPU accelerated so it's way faster.
There is also requestAnimationFrame that allows to optimise the reflows and therefore the script.
The best example I know on what can be done is the Quake II port to the Web :
Video: http://www.youtube.com/watch?v=XhMN0wlITLk&feature=player_embedded
Project's site: http://code.google.com/p/quake2-gwt-port/
as said in soe of the answers above, I'm pretty sure jquery's draggable/droppable plugin will do the job for you if you just need a basic drag and drop dress me up type of game. Basic premise is this:
in the default example, your avatar to wear the clothes would be a div with a png/gif.jpg background image of a girl/boy whatever(instead of an orange drop here background)
the clothes will be the "drag me to my target" objects in the example. you can create them as divs or even image tags that have the draggable class in them so you can drag them around and drop them in the orange boxes/avatars.
you can save the data using ajax, which is also covered in the examples there(or other tutorials in the net, it's easy)
???
PROFIT
Just try it out and see for yourself. If you need any help you can just ask here again, but I do think that the jquery UI answers are valid answers to your problem.
I don't have an example site to show you, but I'm pretty sure given some images and stuff I can whip out something...if I had the time lol.
You can definitely do these "flash-like" things now in HTML5 web browsers. Check out the examples at http://www.chromeexperiments.com/
In fact HTML5/CSS3/JS can do anything flash can do. But there are some drawback :
It is not yet mature. Lot of bugs, lot of difference in implementation depending of browsers and many people simply don't have yet browsers that support it.
Adobe has a really nice set of tools that help making complex flash applications. This doesn't exist (yet ?) at the same level for HTML5.
On a side note, neither flash, neither HTML5 will really shine on mobiles phone. People prefer native applications anyway. You might need to provide a web version, but you'll need too a app version (one per big phone player).
We can speculate how HTML5 will rule the word in the next few years, but as of now, impact are limited outside of nice looking demo that consume 100% of CPU (really, really bad for mobile device).
For drag and drop support, anybody can do that - in HTML4 and in any browser with a few lines of javascript - inside one page, or can think to do it on between 2 browser windows of the same website. Doing drag & drop between browser and any native desktop application is another thing.
For a great example of what you can do with HTML5 in terms of drag and drop, I suggest you take a look at this article and in particular the short demo at the beginning. The article also highlights a few other goodies that come with HTML5, such as localStorage and the HTML5 Canvas.
For a more detailed tutorial on the HTML5 drag-n-drop API specifically (really it is a Javascript API), take a look at this other article. It is dated from December 2009 but still valid.
Lastly, this video gives you a good insight on some of the cool visual effects that you'll be able to do with HTML5 (SVG, Canvas, CSS3, WebGL, ...). More of a marketing video I'll admit but a good illustration of some of the more powerful HTML5 features (at least from a visual stand point) and of what we'll start seeing in our browsers in a not so distant future...
Disclaimer: I don't work for Mozilla. I just happen to have researched this topic in the past and found that the material produced by Mozilla, and in particular the demos from Paul Rouget, to be the most instructive.
jQuery UI is an amazing library...
Drag: http://jqueryui.com/demos/draggable/#default
Drop: http://jqueryui.com/demos/droppable/
I belive that the droppable examples will answer your question of "In particular i am looking for drag and drop support of one element onto another"
I'm considering attempting a redesign of a flash website with jquery effects and transitions in place. I just wanted to reach out to the community to maybe see how feasible this really is considering the particular transitions and effects this website has.
Here's the link:
http://antonynicoli.com/english.html
The gallery I guess can be recreated by carousel plugin, but there are so many out there so maybe could suggest a stable one that would be be best suited to this job. The other items that really caught my attention in which I wouldn't really know where to start is the navbar and the effect that looks like a book opening when you click on a link on the navbar. Any and all input would be appreciated. Thanks.
This is probably doable, but I'm wondering about the motivations behind changing to an HTML/jQuery solution when it looks pretty good right now (as Brad pointed out above, it would require a total rework). I see a couple of things going on:
Carousel: jCarousel (http://sorgalla.com/jcarousel/) (never used it but it is popular)
Animations: jQuery Animate (http://api.jquery.com/animate/)
Other widgets/interactions: jQueryUI: (http://www.jqueryui.com)
Not sure how you would go about the open-book animation, but I suspect you could accomplish it with some clever jQuery animations.
The best way to see if it could be done is: start doing it! jQuery has tons of resources and you'll get good help here on StackOverflow.
After looking at the site i do believe most of the effects can be recreated fairly well using jQuery. Of course, your end-result might not be as smooth as the flash implementation but i think it can be done.
If you look at using HTML 5 i believe a lot of animations such as page transition with the opening book can be simulated with the canvas element. Same with the navigation elements.
https://developer.mozilla.org/en/canvas_tutorial
http://diveintohtml5.ep.io/canvas.html#divingin
As you mentioned some of the effects such as the carousel can be recycled from existing plugins. The only holdback really is how much time do you want to invest in porting a design to a language not as well suited to do the job. jQuery is an excellent framework but it is far from a drop-in replacement to create effects that are trivial to create in Flash/Actionscript.
the whole site can be done with jquery. all you have to do is map out all the animation done on the site and write it on paper. then look for the jquery alternatives online and check them off one by one. some things might not be exact but it will do the job.
Ok - have been tasked with possibly an impossible (or at least a potentially nightmarish) scenario.
Need to come as close as possible to reproducing PowerPoint-like effects via HTML/JavaScript (the spec is large and ugly, so I will spare you the details).
Ultimately, I am looking for a solid launching point. I have used both Prototype/Scriptaculous as well as jQuery in many projects, and based on what I am seeing, it appears jQuery has the more plug-in available, so am leaning towards using jQuery.
Can anyone point me to some plug-ins, articles, or anything else that would help me in accelerating the research on this so I can define to my client what can and cannot be done.
Any other suggestions from you jQuery gurus are welcome of course.
Thanks -
What do you mean with "PowerPoint-like" effects. If you mean animations between slides you should look into
the Effects available with the standard jQuery download (fadeIn, fadeOut, slideDown, slideUp, ...)
the jQuery Easing plugin
the jQuery Cycle plugins effects browser
I would certainly look at jQuery UI as well, which adds a number of effects. See here for a current list. Click on the link for each to see several demos, there are quite a few options for some that are powerpoint-ish.
For example, try the various options in the dropdown here.
The jQuery documentation is very good:
jQuery animate docs
However, if you are trying to achieve very complex effects you will almost certainly benefit from using a different framework. jQuery is a fantastic tool - particularly with the DOM, but animation isn't its strongpoint.
MooTools has a particularly good animation library (MooTools began life as a JavaScript animation framework) with a number of core modules that give you flexible tools to create complex animation chains yourself as well as a number of official and community-provided plugins. My recommendation would be to at least have a look at that first. You can certainly achieve this in jQuery but you will be making it more difficult for yourself!
MooTools homepage
Mootools Core Documentation
My $0.02: If you're doing complex effects, you need the library that runs the fastest, not the library that is the easiest to work with.
Has anyone tried recreating the page flip effect with images like you commonly see in Adobe Flash with JavaScript and HTML 5's canvas tag?
Are there any frameworks or JQuery plug-ins that do this type of effect?
The page flip in Flash allows you to grab a corner of the simulated book page and flip the page like you would flip a real book's page.
I really want to learn how to do this with JavaScript and HTML 5's canvas tag, but not sure where to start nor what formulas would be necessary.
Example page flip in flash
You might have a look at another (nice one) implementation of HTML5-based page flipper: http://jpageflipper.codeplex.com/
It's really nice and it's implemented as a jQuery plugin.
You can try jFlip, it's a jQuery Plugin, It's not IE-compliant but I guess it's not a problem for you since you are asking for HTML5.
This one is a jquery plugin and pretty nifty
http://www.turnjs.com/#home
see this http://www.20thingsilearned.com/home
Here is an HTML5 Page flip App that I built using HTML5's Canvas Element & jQuery. It's called RectoVerso.
I also ran across this one: http://romancortes.com/ficheros/page-flip.html
Which is done with only CSS3.
There is a clear and informative case study about creating your own page flip effect based on the one in the 20 Things I Learned About Browsers and the Web book that Narendrakumar linked to. It’s a great implementation to imitate, the case study is clear with relevant code samples, and it was written by a senior interactive developer for Fi, the company who developed the book.
http://js1k.com/2010-first/demo/441
As compact as possible :D
http://www.romancortes.com/blog/pure-css3-page-flip-effect/
This is better done with SVG's <foreignObject> element and SVG transforms. This blog post by Mark Finkle has some info on rotating stuff as you would need to do in a "page flip/turn" effect. As far as I know, only Gecko 1.9+ and WebKit support this.