Intro
A while back I wrote a post about how you can fade html elements in and out using jQuery — depending on the width of the browser window. In this tutorial, I will show you how this can be done much simpler using only CSS3.
How to do it
The CSS
|
1 2 3 4 5 6 7 |
.yourelement {-moz-transition: all .5s ease-out;-o-transition: all .5s ease-out;transition: all .5s ease-out;} /*replace .yourelement with the element you want to fade in and out. The transition will last .5 second (half a second). change .5 to whatever you like */ @media screen and (max-width: 925px) { .yourelement { opacity:0;} } |
Note that I am using 925 pixels for the minimum window width required. Replace that number with whatever is appropriate for your site.
Summary of What’s Going On
By initially adding the CSS transition property to the element, we prepare it to animate towards whatever CSS changes may occur. The animation will last .5 seconds (half a second). Using CSS media queries, we set the opacity to be 0 when the window is below 925 pixels wide. Now when the browser window gets re-sized to below 925 pixels, the element will fade out to 0 opacity (invisible). Conversely, when the window gets re-sized to be above 925 pixels, the element will fade in to 1 opacity (totally solid).
