Title: Coding to do this effect
Last modified: August 24, 2016

---

# Coding to do this effect

 *  [bangsheet](https://wordpress.org/support/users/bangsheet/)
 * (@bangsheet)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/coding-to-do-this-effect/)
 * Just curious if anyone can tell me how to achieve this black and white changing
   to color scroll down effect used here: [http://thesenatortheatre.com/](http://thesenatortheatre.com/)
 * Much appreciated!

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Moderator [cubecolour](https://wordpress.org/support/users/numeeja/)
 * (@numeeja)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/coding-to-do-this-effect/#post-5971358)
 * I would probably approach this by creating a colour version of the image and 
   the monochrome version – the dimensions of these would need to be identical and
   the monochrome one would use absolute positioning to overlay the monochrome one
   over the colour one.
 * Then use a script to adjust the opacity of the mononchrome image when the page
   is scrolled.
 * Alternatively try the examples given here as a starting point: [http://stackoverflow.com/questions/21771801/adjust-css-opacity-with-elements-scroll-with-jquery](http://stackoverflow.com/questions/21771801/adjust-css-opacity-with-elements-scroll-with-jquery)
 * or adapt the code in the demo at: [http://jsfiddle.net/SEH5M/](http://jsfiddle.net/SEH5M/)
 * It should also be possible to do this with a single image – use the css filter:
   [http://davidwalsh.name/convert-images-grayscale](http://davidwalsh.name/convert-images-grayscale)–
   and animating how the grayscale is applied instead of the opacity.
 *  Thread Starter [bangsheet](https://wordpress.org/support/users/bangsheet/)
 * (@bangsheet)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/coding-to-do-this-effect/#post-5971578)
 * Thanks! Can anyone else give ma additional ideas on how this effect was achieved???

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Coding to do this effect’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [bangsheet](https://wordpress.org/support/users/bangsheet/)
 * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/coding-to-do-this-effect/#post-5971578)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics