Look, people keep using JavaScript when they just don’t need to. Some might argue that it’s okay for JS to be a requirement for any given website nowadays, but does it really have to be? If your site has little-to-no app features, do you really have to use JavaScript for all of your fancy schmancy effects?
Not always, no. There are already hundreds of examples of pure CSS implementations of common JavaScript effects. Chain some of them together, and you can get some pretty advanced animations and other frills. Browsers just keep getting better and better, faster and faster, so browser support isn’t nearly the issue it used to be.
Other bonuses: CSS animation takes better advantage of hardware acceleration for rendering them. Also, pure CSS effects make for easier graceful degradation and/or progressive enhancement. Too often I’ve seen JS implemented in a way that, when it breaks, content just disappears altogether. It doesn’t need to be done that way, but it often is.
So have a look at some of the purely CSS options here, and see if there’s anything that could work for you.
Here are a couple of quick examples from the list:
Responsive Slideshow / Carousel with only HTML5 & CSS3
Testimonial Slider Pure CSS
Here’s a quick and easy example on Codepen.
For modal windows, find out this link. There are ten examples there, so that should be plenty of variety. One of the best image gallery examples I’ve found so far is by a GitHub user known only as mas-5. Here’s a link.
For examples, Free Frontend has compiled a list of 17 CSS Hover Effects for you to play with. As for buttons specifically, you could check out this button pack. Lastly, I’d like to highlight this ripple effect. It’s simple, but cool.
JavaScript should be reserved for doing things that HTML and CSS just can’t, and CSS can do a lot more than people seem to give it credit for. Need more proof? Just check out this post on ByPeople. It’s a list of 60 (at the current count) pure CSS web elements. I’d be willing to bet that you’ll find something you didn’t know you could do.
Other bonuses: CSS animation takes better advantage of hardware acceleration for rendering them. Also, pure CSS effects make for easier graceful degradation and/or progressive enhancement. Too often I’ve seen JS implemented in a way that, when it breaks, content just disappears altogether. It doesn’t need to be done that way, but it often is.
So have a look at some of the purely CSS options here, and see if there’s anything that could work for you.
PARALLAX
Parallax isn’t nearly as prolifically used as it was some months back, but it’s still popular. And nearly every implementation I’ve seen was done with JavaScript. Web designers of the world, this ought not so to be! Mostly because Keith Clark came up with a CSS version as far back as 2014, and further refined his technique in 2015.SLIDESHOWS
That’s right! Slideshows and carousels can be implemented in pure CSS. We’re so used to using jQuery for this sort of thing that even now, it’s a little hard to fathom. But it’s doable. I’d like to thank the guys at Speckyboy for compiling this list of carousel options.Here are a couple of quick examples from the list:
Responsive Slideshow / Carousel with only HTML5 & CSS3
Testimonial Slider Pure CSS
DROP-DOWNS
Ah, drop-downs. Actually, this is probably the UI element that got a JS-free implementation before anything else. I remember when just about every design blog was full of ideas for how to get drop-down menus with this new-fangled CSS thing that was just catching on. It’s safe to say that these techniques are pretty well-supported by now.Here’s a quick and easy example on Codepen.
MODAL WINDOWS AND IMAGE GALLERIES
Want to have hidden content, and then show that content on a click? Turns out CSS can do that, too, all by itself. You can, of course, create simple modal windows, but you can also create full on image galleries.For modal windows, find out this link. There are ten examples there, so that should be plenty of variety. One of the best image gallery examples I’ve found so far is by a GitHub user known only as mas-5. Here’s a link.
BUTTON AND HOVER EFFECTS
Okay, this was probably the thing that CSS developers started on right after dropdown menus. Thus, enterprising CSS3 experts have had years to come up with a variety of interesting effects to apply to buttons, menus, and pretty much anything that uses the :hover interaction on a website. The semi-recently upgraded animation capabilities of HTML5 and canvas, plus the semi-recent surge of support for SVG, have given designers a lot to work with.For examples, Free Frontend has compiled a list of 17 CSS Hover Effects for you to play with. As for buttons specifically, you could check out this button pack. Lastly, I’d like to highlight this ripple effect. It’s simple, but cool.
RANDOM TYPEWRITER EFFECT
I didn’t really have a category for this, so just… here. Look. It’s that typewriter effect people keep using JS for. You don’t have… I’m sure you get the point by now in the article. It’s by Geoff Graham writing for CSS-Tricks.FURTHER READING
To exhort and expound on the possibilities of CSS would be, at this point in the article, a little redundant. But I’m going to do it anyway: This is an age of nearly unprecedented support for relatively new CSS modules. You don’t have to wait a decade for transparent PNGs anymore. These things happen faster.JavaScript should be reserved for doing things that HTML and CSS just can’t, and CSS can do a lot more than people seem to give it credit for. Need more proof? Just check out this post on ByPeople. It’s a list of 60 (at the current count) pure CSS web elements. I’d be willing to bet that you’ll find something you didn’t know you could do.
Post a Comment