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.
Related
I want to be able to create lots of customized playing cards using HTML and CSS, and then convert all cards (divs) to image files. I have used the dom-to-image library to do this, but the problem is that the images within the divs are not recreated. Is there a way to do this with the dom-to-image library? Or is there some easier way to turn HTML elements - including img tags - into images?
Edit: I found a way around it in a program I am using, so not in dire need of help anymore, thanks.
So I have a fairly well established paint app using HTML5 canvas! It has painting, erasing, undoing, etc. I would like to be able to add dynamic images, text, and shapes (drag and drop abilities as well as easy manipulation).
I just came across the KinectJS library, and it would be perfect!!! The only issue that I have is that I would rather not rewrite my entire application for KinectJS as this is for a container, not a canvas tag.
question:
Is there any way to add KineticJS layers/stages into a canvas tag so that they still can be made with Kinetic and have the different options, but my app will still function?
alternative:
I understand that this could be impossible...if this is so, can I apply my regular canvas functions to a Kinetic container so that the whole thing is in the kinetic container, but I do not need to rewrite the code.
note:
If both of the above are impossible, please explain why
From what I know the answer is no.
Kineticjs create the canvas DOM element within the container you give that is why most people use a div element as the container and that is why if you directly put a canvas it won't work. The thing is, it shouldn't change much of your code. You'll just have to call getCanvas().getElement() instead of your normal reference to the canvas and all your previous code will work.
Here is a jsfiddle of it.
I need to display a runtime-generated image (mostly consisting of nice-looking boxes, lines and text) on a webpage. We're currently using ASP.NET MVC3.
The problem is, I haven't really done web development before, and I have no idea how to go about drawing an arbitary diagram on a webpage. Do I use some sort of javascript? How, and what do I use? Do I generate the image on the server somehow and simply display it? Something else?
I have no idea where to even start, let alone solve the actual problem...
It depends on the target browser.
If you target the most modern browsers, you can use an HTML5 Canvas and draw on it using JavaScript (see http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/).
If you're targeting other browsers (as well), the easiest is probably to generate an image on the server side (GIF/JPG/PNG). Your HTML page then contains an IMG tag with the SRC parameter set to the page that generates and returns the image. You can find an example at this page: http://www.sitepoint.com/generating-asp-net-images-fly/ (this uses ASP.NET to generate the image).
Roy Dictus fairly well described the overall approach you'll want to take. If you decide to target modern browsers and use javascript, I'd suggest you look at Processing.js. It's a javascript port of a popular Java library, and the web page has some code samples to show how you can create both static drawings and animations with some simple code.
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
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