I am looking for the simplest way to make my page appear in greyscale.
I have found plugin (http://james.padolsey.com/demos/grayscale/), but it has some cons, eg. it doesnt handle background images well.
Do you know any alternatives or updates to this tool?
You could try working with a filter:
http://www.html5rocks.com/en/tutorials/filters/understanding-css/
but this might not work on all browsers, certainly doesn't work on old ones.
If you want a cross-browser solution, you'll probably have to rely on javascript
Here's some solutions that I got as answer to one of my questions:
Grayscale.js
jQuery GreyScale plugin
Hoverizr
Do it with canvas (tutorial)
I have used Grayscale.js and it worked ok for me but you could try the other three.
Related
I have written a Javascript/jQuery script. Its purpose is to serve as a responsive background image slider.
It is viewable here:
http://new.upserver.co.uk/rbis/
My question is this;
While the code functions correctly, it can be slow/laggy. Especially when additional animation related plugins appear on the same page (i.e. nivoslider).
I have seen many similar sliders that handle chunky images perform effortlessly and am concerned and wondering how this code could be optimised to perform better? the javascript in question is located in file http://new.upserver.co.uk/rbis/rbis.js
Many thanks for all suggestions.
Regards
jQuery animate is rarely the right tool for providing animation. Take a look at this rather contrived example I produced recently: http://css3.bradshawenterprises.com/demos/speed.php.
I would recommend using CSS transitions in normal browsers, and only using the old way of doing it using javascript in old browsers.
A good way to do that is to use something like http://playground.benbarnett.net/jquery-animate-enhanced/, though I have had some issues with that, and instead use my own methods of doing it.
I'm trying to dynamically make a kaleidoscope pattern from a source image.
You can see an example in Flash here: http://www.maegpai.com/mademyshirt/tool/ (click an image to start).
I want to create the same effect using either HTML Canvas, CSS (masking) or ImageMagick and PHP.
What would be the best way to create something like this besides Flash?
I'm not concerned about older browsers, if I can get this to work in Safari and Chrome that will be enough.
Here is a CSS one: http://bl.ocks.org/abernier/raw/9070122/ code can be found here: http://bl.ocks.org/abernier/9070122/
If you want it done quickly with the least amount of work on your part, use ImageMagick and PHP, the script is already written for you.
If you want to show off your mad skillz, I'd go for CSS (masking). That seems difficult to me.
If you want to get attention, go with HTML5 Canvas. Everyone thinks it's cool.
Forgive me if this is not the best forum to ask this question in. I'm not sure where to start, so maybe someone here can direct me.
Using html and jquery/javascript, I want an animation of one item flipping over another item. Almost as if someone is taking a page out from a file and replacing it on top of another page in the file.
Please see attached picture for referance.
If (and only if) you need some custom animations, check out this sweet jQuery plugin: http://weepy.github.com/jquery.path/
It should get you going in the right direction. Your general approach:
Create a path that swings Box2 into position in step 4.
Change z-index of Box2 to be on top of Box1.
Animate Box2 back along the same path in the opposite direction.
Addition: here's a good ReadMe for creating your path: https://github.com/weepy/jquery.path/blob/master/README.markdown
Addtion #2: It was asked how to do rotation, so I dug up a couple plugins to do that:
http://plugins.jquery.com/project/AnimateRotation
http://plugins.jquery.com/project/jQueryRotate
If anyone has experience with either of these (I don't) leave a comment below for the OP!
Rotation
http://code.google.com/p/jqueryrotate/
http://code.google.com/p/jqueryrotate/wiki/Examples
This plugin is for images specifically while in CSS3 compatible browser other elements will work in older browsers and IE: don't expect other elements to work.
Example:
$myContainer = $('selector');
$myContainer.rotate({animateTo:45}).animate({'left':100,'top':-100}, function(){
$myContainer.css('z-index', 2).rotate({animateTo:0}).animate({'left':0,'top':0});
});
Maybe try to combine it with http://weepy.github.com/jquery.path/ (credit to Adam Terlson for posting it) for smooth path animation. Looks like a great plugin.
In my experience rotating in IE is always glitchy.
I adopted couple scripts a while back into something that worked best for me: http://pastebin.com/kDK9mu9W however I did this for a project of mine and never test it outside and it does not have animation - you would need to use a interval.
IE7, IE8 & CSS3 compatible browser support for all elements. Images are wrapped in divs to prevent filter conflicts.
Is this a question? You certainly could use jquery to do this and there are already some plugins that offer something similar. See the shuffle type animation of jCycle
http://jquery.malsup.com/cycle/
I'm sure you could take a look at the code there to get some pointers on how to proceed.
There's an excellent tutorial here that explains the basics of sprite animation with jQuery. It's not a solution for your specific question, but it offers a quick introduction to the concepts you'll need.
Have two divs with appropriate Z-scores. Animate div to slide top right, as soon as div is completely free, switch z-score and reverse animation.
I'm looking into a solution for work, where you have a two page spread of the book to preview. Either side of this, you can hover in the corner to create a pseudo-flip and then click the mouse button to actually turn the page. I know there is many Flash solutions out there, but in this case we cannot use it... So we are looking for a possible solution that can work across all major browsers (yes, including IE6)...
I looked a few canvas solutions, but with Google's canvas extension for IE, these will terribly slow. So was thinking about an SVG/VML solution, like Raphael Javascript library. This could be good, but then trying to look into how to code this, without examples, could be a challenge with the time constraint.
Is there a solution out there that fits (or almost fits) this problem?
How about the SVG Flip solution by Paul Brunt? It seems to do exactly what you ask for, using svg and javascript.
Here are a few demos for different browser generations:
Book flip via CSS3 transforms
Book flip via CSS2.1 absolute positioning
Book flip via DHTML
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