I am looking for jquery image slider plugin, that slides images and text layer at different speed similar to http://www.apple.com/imac/
This question is similar to Using javascript modulus to iterate through text slider with for loop, but I want to know if a javascript library exists before working on it.
Thanks
The rendering on that many objects when converted to jQuery will become choppy. For that effect they are using webkit / mozkit animation
Related
I'm pretty new to JS and CSS so i'm looking for help to make a Grid container in which I drag into an icons in different sizes and I want them to arrange themselves based on the size of each icon and the amount of them.
Let's say the minimum size that each icon can scale down is 20% of its original size.
I tried a lot of methods without finding the perfect way..
If anyone can send me a complete example of something like that I would be thankfull!
There's no magic solution here. You're asking few questions - each has to be addressed separately and depends on the js framework you use. I'm going to assume you're using vanilla js / jQuery.
Grid layout - Bootstrap is a trendy and working-out-of-the-box framework. Here's a simple grid example.
Drag n drop - There's no shortage in drag & drop libs like interactjs, jQueryUI, and Draggabilly (example)
Don't attempt to achieve all your goals at once. Instead, implement the grid, understand it, then move to drag n drop and sort by size logic.
In slideshows using libraries such as jQuery/jQueryUI, it is common to split a slide and disperse the fragments for disappearing the current slide. I am curious about the trick to do this with Javascript. I mean pure JS to understand the process, not implementing with an available library.
As I searched over the internet, a common way to split a image by Javascript is to set the image as a background and show fragments by CSS, but I doubt this is the method used for creating slideshow effects.
How Javascript can split an image/slide?
You could try using the canvas tag in HTML 5. You can import an image on the canvas and work your magic on it from there. I do not have an example in hand but you could give it a try yourself.
browser-based application, currently running on php/js/html5, jquery the only framework I'm using.
If I've got enough 64x64 images to fill up my screen about 100x, what technique would you recommend to move the images so that it looks like it's scrolling?
Think oldschool top-down RPG's if you will.
What I'm currently considering:
HTML5 Canvas
array1 with all the images, array keys being coords for each image
array2 with just the images currently on the screen
when moving to the left:
move all images 64px to the right (so that it moves in increments)
fetching the lacking images from the array1, stripping the ones that dropped off the screen
removing the images that dropped off the screen from the canvas
It's not an actual game, but that is the effect I'm trying to achieve.
I'll take any hints/tips I can get for this; from "use html tables instead of Canvas" to "impossible to streamline this for the web".
My main concern: speed. I'd like to be able to zoom out as well, to the point where I'd be using a LOT more images on the screen (32x32, perhaps even 16x16) but I'm aware that browser-based applications might not be up to that task.
I suggest using the MelonJS framework to handle this for you. It can use maps from Tiled Map Editor, which is just plain awesome.
I'm looking for a jQuery version of the Dynamic Drive slideshow here
I have used the jQuery cycle plug in many times, but want to display more than one image at a time in a continuous scroll. Any suggestions? Thanks!
Why do you need it to be jQuery? The one you post the link to is in Javascript which is just as crossplatform and crossbrowser as a jQuery one would be.
I have had a cursory look for any jQuery implementations anyway, but like you say, most people seem to just display one image at a time in their image carousels/slideshows.
Can somebody suggest me how to create text effects (like we can create in flash) in HTML 5 using javascript/jquery. And also the custom font for whatever text is appearing there? Is it possible? any example?
Thanks in advance.
You really need to look at Css3 for text based effects. But if you want to create full animations then Canvas would be your HTML5 tech of choice.
Try taking a look here:
http://canvas-text.googlecode.com/svn/trunk/examples/animation.html
http://aaronwinborn.com/blogs/aaron/cuf%C3%B3n-alternative-sifr-image-replacement
Cufon draws fonts onto canvas so you could then animate them with javascript.
http://www.8bitrocket.com/2010/05/15/html-5-canvas-creating-gaudy-text-animations-just-like-flash-sort-of/
http://speckyboy.com/2009/11/16/20-easy-to-use-jquery-text-effects-and-animations/
here:
http://www.catswhocode.com/blog/8-examples-of-stunning-css3-text-effects
here:
http://www.addictivefonts.com/various/css3/css3-text-effects/
and here:
http://code.google.com/webfonts