Really nice effect - I can see this being used on galleries / profiles, etc. What is with the weird scroll behaviour on this page, though? It will refuse to stay where I put it and keeps jumping to odd snap points after a few seconds. Annoying.
The scrolling behaviour make the page impossible to use. The scrolling, and I say this as politely as I can, is fucking horrible and makes me want to smash my phone to little pieces.
Sorry for the negative tone. The actual thing looks cool. It'd be nice to see these gradients being used more often.
Wow, you're quite right - there's no attribution on any of the photos. Also, since they're re-hosted onto tumblr it's hard to tell where they came from.
It's possible that the author may have taken all of the photos themself, but unlikely given the example which you've pointed out. It's also possible that the author has sought private permission to use the photos, but you'd probably expect some attribution if that were the case.
I was going to implement this myself in the future as I need something similar. The main difference is that I thought of using an inline svg to have more flexibility in the way gradients look and are positioned.
Nice tool. Looking at devtools, it generates a gradient in each direction (left, right, top, bottom). Each of these gradients is a single color transitioning from fully-transparent to fully-opaque.
The algorithm looks to be breaking the image into the 4 quadrants and finding the dominant color in each quadrant (eliminating any shades that are too gray). e.g. to get the color for the left-to-right gradient, it finds the most dominant color on the right of the image.
Is the author of this around? There's a rather prominent spelling mistake in the first sentence; it says "prominant" where it should say "prominent" :)
maybe it would be better to weight pixels by the energy density of the image region so that backgrounds (sky, walls) don't dominate the resultant colors over the (usually more significant) foreground/detailed objects
You could blur the image as well. I have tried a similar approach with blur quite awhile ago: http://www.cssdesk.com/VYN67
Change the image URI to see it work on another image.
Biggest site that uses this technique is pinterest. It's a pretty crucial UI "trick", especially over slow internet connections. A user's pinterest home page is mostly images, and if they didn't use this dominant color trick, the page would look awful until things loaded.
36 comments
[ 3.0 ms ] story [ 82.1 ms ] threadhttp://i.imgur.com/WrbsRcM.png
Fix the scroll highjacking please.
https://m.flickr.com/#/photos/lightofthewild/5611692322/
The left margin is broken on Chrome on iOS. http://m.imgur.com/94fzJrc
The scrolling behaviour make the page impossible to use. The scrolling, and I say this as politely as I can, is fucking horrible and makes me want to smash my phone to little pieces.
Sorry for the negative tone. The actual thing looks cool. It'd be nice to see these gradients being used more often.
Wow, you're quite right - there's no attribution on any of the photos. Also, since they're re-hosted onto tumblr it's hard to tell where they came from.
It's possible that the author may have taken all of the photos themself, but unlikely given the example which you've pointed out. It's also possible that the author has sought private permission to use the photos, but you'd probably expect some attribution if that were the case.
window.addEventListener("scroll", function(ev) { ev.stopPropagation(); }, true);
https://github.com/fraser-hemp/gradify/blob/master/gradify.p...
Found a bug - it doesn't follow the "orientation" property of the image, resulting in photos and gradients that are rotated.
I don't do Python myself, but using PerlMagick, the fix is $magick->AutoOrient();
The algorithm looks to be breaking the image into the 4 quadrants and finding the dominant color in each quadrant (eliminating any shades that are too gray). e.g. to get the color for the left-to-right gradient, it finds the most dominant color on the right of the image.
http://www.instructables.com/id/Gradients-in-MIcrosoft-Paint...
maybe it would be better to weight pixels by the energy density of the image region so that backgrounds (sky, walls) don't dominate the resultant colors over the (usually more significant) foreground/detailed objects
Progressive JPEG with a blur filter depending on how much has loaded yet?
That would be the best solution, probably.