October 31, 2019
Advice I Wish I Could Take For Myself
Using JQuery & The CSS Transition Property To Create Interesting Transitions

I had the idea today of making the top of the website, the header images, transition more fluidly. I don't like how they fade in so abruptly, even though that's a good solution for them to just pop in. I used to use jQuery's $().animate({ }); to animate things like opacity and whatnot. In order to animate CSS Filters to create a more robust animation you have to use the CSS Transition property. If the starting point of your image's CSS looks like this...

  • <img></img>
  • <style>
  • img{
  • filter: grayscale(1); /* image is turned to grey on load */
  • opacity: '0'; /* image has zero opacity, meaning it's invisible */
  • transition: '2s'; /* any change in CSS will require a 2 second transition */
  • }
  • </style>

...you will be able to transition that element to full opacity and color by changing the CSS by adding this...

  • <script>
  • $('img').css({
  • 'filter':'none', //-> remove the greyscale filter, producing color
  • 'opacity':'1' //-> change opacity to 1, meaning fully visible
  • });
  • </script>

The element will fade in, the color will fill, all within two seconds, which is what the transition property stated when you originally set the CSS of the image. I found that pretty interesting.

 Profile Picture