Does anyone know how to use the Pixastic plugin and jQuery to where I could have an image fade from color to completely desaturated?
I am trying to avoid saving out two images and fading one out..
i did the inverse... having desaturated images fade in to color. achieved w/ only 1 image in conjuction w/ pixastic and livequery. i basically cloned the images, desaturated one of the copies, and stacked them on top of each other.... fading the top (desaturated) layer out on hover. i'm sure it could be more elegant, but it mostly works. you can see the effect at chicagointerhandball.org on all the "sponsor" logos
$('.sponsors').load(function() {
$('.sponsors').pixastic("desaturate");
}).each(function(index) {
var clone = $(this).clone().removeClass('sponsors').addClass('sponsors-color').css('opacity',.25);
$(this).parent().append(clone);
});
$('.sponsors-color').livequery(function(){
// use the helper function hover to bind a mouseover and mouseout event
$(this).hover(function() {
$(this).stop().animate({"opacity": 1});
}, function() {
$(this).stop().animate({"opacity": 0});
});
}, function() {
// unbind the mouseover and mouseout events
$(this)
.unbind('mouseover')
.unbind('mouseout');
});
Since all those pixastic image effects are generated on the fly I don't think it would be feasible to fade between saturated and desaturated. The saturation level of the image would have to be redrawn at each step of the fade. Your best bet would probably be to have two images, one saturated and one desaturated, and have them placed on top of one another. Then when you hover over one, fade in the other image.
Edit:
Just saw that you were trying to avoid having two images. Well, that's the only solution I can think of but I'd love to see if there were others. Depending on how many images there are, you could generate all the desaturated images on page load, place them on top of saturated images, hide them, and then fade them in on hover. Just a possibility.
you could get the best of both worlds by dynamically creating a duplication and desaturating that image with pixastic. Position the new desaturated image under the original and fade the original out.
You should be able to, it is in their jQuery documentation section.
// convert all images with class="photo" to greyscale
$(".photo").pixastic("desaturate");
Looks like this is possible with the canvas element.
With this you need to mix jQuery and the standard DOM calls. I was having the same issue just today about this. I couldn't get the hover to work cross platform from the examples given here and on their site. So I decided to think for myself on this one. Came up with a solution, hope it works for you:
http://you.arenot.me/2012/03/26/pixastic-desaturate-on-mouseover-mouseenter-mouseleave/
Related
Alright so I want to add an rgb slider for images if I could, otherwise I want to make buttons with some different color choices that will change the images hue. I've been trying to work with the kineticjs rgb filter but it doesnt seem to work with mine. Can someone look over my code and see how I can add it to mine. http://jsfiddle.net/dsj00qoy/17/ Also here is kinda a code i made up to try but it wasn't working...
document.getElementById('ta3h').addEventListener('click', function () {
BR.img.filters([Kinetic.Filters.RGB]);
BR.img.blue(0);
BR.img.red(100);
layer.draw();
});
You have to cache the image prior to applying a filter:
BR.img.cache();
BR.img.filters([Kinetic.Filters.RGB]);
BR.img.blue(0);
BR.img.red(100);
layer.draw();
Wondering if anybody could help me out. I have the Masonry jquery plug-in which is laying out a set of images and when you zoom in or out in the browser, they change place to fit more/less of the images on the screen. Is there a way to, when i hover over these images, they would fade to black and a description of the image would appear in it's place.
A bit like http://www.flickr.com/ but rather than the small box at the bottom when you hover on an image, a box that covers the whole image and each seperate image can have a seperate description.
some possible hover effects is like Image effects, like grayscale, blur, sepia, etc. I still haven't figure out the best hover effect that have fix height/width.
I want to show a preloader on my website before the content loads,However when i choose a animated preloader image with transparent background the edges look very jagged. How to I modify the image or is there a way to have a transparent background to animated gifs?
I am using the preloaders from preloader.net
The first and probably easiest option you have is to use spin.js. “It dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.”
If a script is not an option or you want to have a different spinner you have to create a .gif with no anti-aliasing that is bigger than the spinner you want to use and scale it down with html.
Original spinner without edges (without anti-aliasing, therefore it has a pixelated edge):
But if this spinner gets scaled down, it looks nice:
Be sure to use
img {
-ms-interpolation-mode:bicubic;
}
to make it also look pretty in older IEs.
You can use a site that helps you generate your spinner. A great option is :
loading.io
I am wondering if there is any library to enable me to upload big image on website and than create animation.
Animation description:
Show are is smaller let's say 300*300 and image uploaded is 1024*768 and I would like the animation to go around the image, zoom out a little, zoom in, etc.
I hope I was clear enough.
Thanks for answers
This can be easliy done with the jquery function animate:
jquery animate() doc
They have some examples in their documentation. You can either work in a div with "overflow:hidden" and put the image in that div or set is as a background image. animate() allows you to manipulate the css styles. Also, you can append animate() calls.
I'm setting up an experimental html5 website using canvas.
I am drawing 3 circles all next to each other and all I want to know is how to be able to select them.
I'd like them to become links, in a way. Not tags, since everything's gonna be created using javascript.
Something like kinetic JS : http://www.kineticjs.com/, but without the extra library.
I have found some scripts that are using ghost canvas and contexts, but the examples are for dragging and stuff. I only want to be able to select my shape and execute some code.
Thank you!
I am thinking you might want to look into the IsPointInPath() method. It will help you figure out whether or not the mouse clicked on your canvas object.
See Detect mouseover of certain points within an HTML canvas?
if you are talented in xml i suggest you to use canvas + SVG (http://www.w3schools.com/svg/)
And follow this simple example.
http://jsvectoreditor.googlecode.com/svn/trunk/index.html
regarding to SVG and Canvas , the differences are obvious, as you can load bitmaps in SVG, and you can draw lines using the canvas API. However, creating the image may be easier using one technology over the other, depending on whether your graphic is mainly line-based or more image-like.