I'm trying to find a way to replace the flash animaton on this page http://www.autopulsen.se/ into jQuery. I could cut the images out and rotate them with javascript but it would require major changes in code. Basically I want to keep the same look without flash.
Is this possible?
Yes, you can.
Your starting point would be having a look at this site, there are a lot of zoom plugins on there, which is the main feature of that flash menu. Then you would want to chain the JQuery Shake effect, and maybe look at the fade effect.
To achieve the slanted look you will want to use the skew css selector as featured here.
I'll throw in GreenSock Animation Platform:
www.greensock.com/gsap-js
which may be worth a look, especially if there's the option of paying for a commercial license, as that includes a pretty nifty throwProps plugin.
you can use CSS3 animation but this one i think so good and hard to built in css3
anyway
giving you some animation generator
ceaser
CSS3animationGenrator
Css3Maker
and this one for Inspiration
At DesignShack
Related
I´m currently developing my first jQuery Plugin. It´s called Fraction Slider and is a Slideshow-Framwork which allows you to animate unlimited elements (with different animations, delay, etc) per slide.
Here you can find a small demo, and also the documentation:
Demo
It´s also hosted in the jQuery Plugin repository
So, introduction is over ;)
Now i have a few question:
The general code. What could i improve, what should be replaced, etc.
As you can see, when us different animations, delays, speeds etc. the html tag for each element will have an awfully lot of data-... attributes. I would like to make that a bit more easy and maybe with less markup (damn, i dont know how to say this in english).
How could i do that - any ideas or suggestions?
What should i add to the plugin? I was think about pager/controls, fading and simple show/hide effect and maybe making it responsive.
Last but not least: i would be happy to get some general feedback about the plugin and its realization.
Looks like it doesn't support chaining. e.g.
$('.step-slider').fractionSlider().remove();
I need to create a sliding billboard ad (just like the one on this website http://www.mlive.com/slidingbillboard/). I would prefer to use jQuery over Flash, for reasons I'm sure most understand. I've been Googling and haven't found a solution. In the end this will be thrown into Google Ad Manager to track click throughs. Any help would be greatly appreciated!
Note: This will go at the top of the site above all content.
This is easily implemented in jQuery
Look here
http://jsfiddle.net/ppumkin/ArRFy/2/
apply a few styles, hover effect.. and 'tadaaa' no flash or UI.
Have you taken a look at jQuery Effects? You can do things like animate cssProperties (i.e. background color, size, etc), you can slide in/out. You can fade in/out among many other operations. you mentioned jQuery already so this might be what you are looking for:
http://api.jquery.com/category/effects/
I have an idea I'm trying to implement.
I want to display half a dozen pictures on a screen, in say a circle shape, and as I hover over one with the mouse it fades from grey and white into full colour, maybe even getting a little larger, or generating a drop-shadow effect which stays while the mouse is over it.
Although I'm not too shabby on VB6 and SQL Server, my web development experience extends about at far as using notepad to generate raw HTML to display some favourite folders, links to websites and documents etc, in Active Desktop.
So guys, what programming resource websites should I be looking at, such as w3schools.com and specifically whether I should be using JavaScript or some other method ... also specific method calls to look at would be good.
I'm not after "here ... try this code" and then 10 screens of code to cut and paste, I'm after tips, such as "for the positioning, look at www.thiswebpage.com and look at XYZ" and "for the fade effect, look at ABC method on JavaScript" or whatever.
EDIT: 14/07/2009 - Just thought that this might be pertinent. I'll be hosting the pages on a Google Apps hosted website.
Also, the black and white fade effect wasn't the only effect I was considering, it was just one possibility. Other nice, subtle effects might be considered.
What you want to implement shouldn't be all that difficult. However if you do not know any JS then W3C schools is a good place to start.
You should also check out Mootools. It is a great framework for all your JS needs. They also have some great demos you can try.
For general effects and starting point for this type of user experience: JQuery
From there - research jQuery plugins that do this type of thing. Good search terms may be carousel.
Raphaël is a very nice Javascript library that can do everything you want. For instance, they have demos with drop shadows on images and with image rotation.
For that type of work I like to use Scriptaculous. It has a number of animation commands that are easy to use. You can run a bunch of effects in parallel on a DIV, so you can easily perform a MOVE and a SCALE effect on the same object and it handles the synchronization.
You can do all of this with regular old JavaScript.
Here is an example of a MOVE:
new Effect.Move('yourDIV', { x: 0, y: 0, mode: 'absolute' });
You could probably get a quite similar effect done by using some JS library which can animate CSS properties nicely. For example Scriptaculous and jQuery can probably fit the task and should be simple to learn.
The basic idea would be that you have an image in a div. The image's transparency can be set to 0.5, so the div's background color shades through it. This way you can get an effect similar to a black and white image with the correct choice of a background.
If you want an exact black and white effect or such, you will have to generate black and white versions of your images, or use the HTML5 canvas element to manually apply color transforms to the images. That won't work in older browsers and internet explorer, though.
Learn JS, you can learn the syntax from http://www.w3schools.com/JS/default.asp
Expand this knowledge with articles from known writers, like Crockford.
Salt it all with learning one of the leading frameworks (I like Mootools).
While doing steps 1-3 code, code, and do more coding.
You will need some form of Javascript, and if I were doing that I would look at the Script.aculo.us library. (An immediate effect could be done with CSS, but for a gradual fade, you will need Javascript.)
Does anyone know how to achieve the cover-flow effect using JavaScript to scroll through a bunch of images. I'm not talking about the 3D rotating itunes cover-art, but the effect that happens when you hit the space bar in a folder of documents, allowing you to preview them in a lightbox fashion.
http://www.jacksasylum.eu/ContentFlow/
is the best I ever found.
a true 'CoverFlow', highly configurable, cross-browser, very smooth action, has relections and supports scroll wheel + keyboard control. - has to be what your looking for!
Not sure if you're talking about Coverflow (scroll through images) or Quicklook (preview files in lightbox), try editing your question.
Here's some JS Coverflow implementations:
MooFlow - Coverflow for MooTools
Coverflow in JS proof of concept
Coverflow using JS and CSS Transforms (Webkit only)
I think this is what you want http://addyosmani.com/blog/jqueryuicoverflow/
I tried using the the Jack's Asylum cover flow but it wouldn't let me easily remove and re-add an entire coverflow. I eventually found http://finnrudolph.de/ImageFlow and not only is it more reliable, it's easier to hook into, uses less markup, and doesn't jitter when flipping through images. It's by far the best I've found, and I've tried several on this page.
There is an Apple style Gallery Slider over at
http://www.jqueryfordesigners.com/slider-gallery/ which uses jQuery and the UI.
jCoverflip was just released and is very customizable.
colorbox has such amazing features..loving it.
Also like this one http://www.webappers.com/2008/03/05/galleria-simple-but-nice-jquery-image-gallery/
Is this what you are looking for?
"Create an Apple Itunes-like banner rotator/slideshow with jQuery" is an article explaining how you can make such effect using jQuery.
You can also view the
live demo.
Try Jquery Interface Elements here - http://interface.eyecon.ro/docs/carousel
Here's a sample. http://interface.eyecon.ro/demos/carousel.html
I looked around for a Jquery image carousel a few months ago and didn't find a good one so I gave up. This one was the best I could find.
Check out momoflow: http://flow.momolog.info
True coverflow effect, and performant on Webkit (Safari and Chrome) and Opera, ok on Firefox.
Just to let you all know, xFlow! has had some major work done on it and is vastly improved.
Go to http://xflow.pwhitrow.com for more info and the latest version.
i am currently working on this and planning on releasing it as a jQuery-ui plugin.
-> http://coulisse.luvdasun.com/
please let me know if you are interested and what you are hoping to see in such a plugin.
gr
the effect that happens when you hit the space bar in a folder of
documents, allowing you to preview them in a lightbox fashion
Looks like a classic lightbox plugin is needed. This is my favorite jQuery lightbox plugin: http://colorpowered.com/colorbox/. It's easy to customize, etc.
This one looks really promising, and closer to the actual Apple coverflow effect than the other examples:
blarnee.com/projects/cflow
I understand how JS is run and I think I understand most of the DOM but I've no idea about animation. Does anybody here know of a good guide that can explain to me how it's done in Javascript?
In addition, should I even consider Javascript for animation? Should I instead be looking to learn flash?
Avoid flash, its a horrible requirement, uncrawlable by Google, unsopported by a bunch of browsers and systems (eg iPhone) and most importantly: it forces you to reinvent web standards (e.g. scroll bars and whatnot), Javascript on the other hand is easier to maintain and code for in the noscript case.
try scriptaculous for your animations;
here's a quickie 3-line tutorial so
you can see it working
here's a more complete tutorial
here's the scriptaculous wiki
note that there are a gazillion JS animation libraries, some really good jQuery comes to mind. Usually they're just a script tag and an onclick event to setup.
Good luck!
/mp
if your animation is simple, change colors over time, move from x to y in 3 seconds. Javascript is fine. If you want all kinds of wizbang buttons and coordinated rotation of the screen, straight up js + dhtml will be clunky at best. Silverlight vs Flash are you questions at that point. Interestingly enough, you program Silverlight with javascript, and that would be the major benefit to simply upgrading to a faster and more dynamic DOM that is implemented in Silverlight but still writing the same code. Flash programmability is very limited in my experience, you can do anything, but it will be slow and take thousands of lines of code to get there. For simple JS animations look at jQuery or Scriptaculous.
Check out a JS animation framework like Bernard Sumption's Animator.js. It's pretty light-weight and has some excellent examples.
Personally, I wouldn't be animating things in JS. Flash FTW.
If you aren't concerned with IE support, you could also try experimenting with the canvas element:
MOZILLA DEVELOPER NETWORK Basic animations