I have a project I'm working on with a full sized fixed background image. What I'm trying to figure out is the best way to have the image start in grayscale, then as the user scrolls down, the color becomes more saturated, until at the end of the page it's full color. I'm looking for a smooth gradual fade in/out of color.
I was thinking of having 2 images, one color and one grayscale on top of each other and change the opacity to get the effect, but that would mean loading 2 large images. Is there a better way by using only one image?
Some of Your options are
do as you say and load 2 images
load just one and use a canvas element to do the desaturation
use the new filter css properties
Best to do a combination of option 1 and 3, using modernizr to determine support
Related
So I'm making some sort of interactive map for a roleplaying game I have, where I want to be able to hover a country and it can scale up a bit and have a hover effect and so you can be able to click on it and it will give you main info of the country and stuff. Now the issue comes that I'm trying to check if there is a way to have multiple PNG layered up on HTML, CSS, JS and avoid having the transparent background of the top layer hover only that specific one. I'm trying to check if there is a way for the code to detect only the colored area of the img or if this is not possible.
I've tried layering with the z-index, but that doesn't really resolve the issue.
The background customer gave us has 4:3 aspect ratio and looks horrible when repeated on modern screen. I thought if I can mirror each repeat horizontally it would look nicer. Is this possible with plain CSS?
Not with background images. You can mirror single elements, but not a part of a single element (as a background image is).
I guess the best option would be to save the image including its mirrored version into one graphic file and repeat this one.
I have a sprite sheet where black pixels stand for transperency. So, when I load a sprite from this sheet, I don't want those pixels to be shown.
Therefore my question is the following: Is there an easy way to tell Phaser that opacity of a certain color of a sprite should be turned transparent?
If you need to do this just one time, then you could do it with the help of online tools like lunapic.com.
Upload your sprite, select a color you want to make transparent and thats it.
I was looking at this site and noticed how the background image seems to move and animate as the user scrolls. Upon inspection of the source code, it showed that this was achieved by changing the background image as the user scrolls. Essentially, it jumps through many frames of images giving the illusion of an animation.
What would be the quickest and easiest way to achieve this? I am using the ScrollMagic library if that would make it easier.
The quickest, easiest way is to listen for scroll events on the element, then change the background url via CSS to the file you want to show. You'll probably need to convert the pure scroll value to a percentage (to account for varying screen sizes), and you'll need an array of images that map to those percentages.
Fairly simple, if you use the cycle plugin for jquery and create a slideshow the transition between slides allows what's beneath the slides to show. I want to avoid this and have one slide truly fade into the other rather than kind of fading into the background and then into the next slide.
Is this possible?
Thanks!
Example:
http://www.sonicinteractive.com.au/_WIP/slider_problem/
See how the white line (and background) come through..
Place an image below them but above the page with a neutral colour that blocks out the page background in the region of the image (i.e. create it from the same mask used for the images themselves).
Hi I have solved the problem by removing the background colour of the wrappers containing the slider as well as the "main wrapper". For the latter I only left the backgound-image to do the job.
Hope that this helps