Shutterstock

When it comes to sites that look beautiful and perform well, less is usually more. Minimalist designs can be ideal foundations for sites and web apps, but sometimes you want that little something extra to make it pop. Whether it’s a subtle navigation bar reveal as you scroll down a page or a little hover effect to give your CTA more splash, adding animated JavaScript, jQuery or CSS components to your theme can be relatively quick, painless projects you can engage a freelancer to tackle.

Here’s a look at a few JavaScript- and CSS-powered flourishes to try on your site without having to redesign your entire UI.

1. Content animation

Whether you’re using animation to add some visual appeal or giving users a hint about an action you’d like them to take when used sparingly and strategically animations can make a strong impact. Let’s talk about a few different approaches to try with your UI.

Scroll-based animations are popular stylistic touches right now and are all about encouraging engagement. Say you want blog post previews to gradually appear as a visitor scrolls down the page. A JavaScript component like ScrollReveal.js can be applied to specific containers on your page—the blocks of content that house images, icons, text, etc.—so only those elements animate.

[Image via.]

There are other animations to explore that solve certain design conundrums, like when and where to place your logo. For example, say your logo appears in the main content block of your homepage, but not also in your navigation bar (because that’d be overkill). However as users move down below the fold and your logo is no longer visible, you’d like it to then appear in your navigation bar. A JavaScript animation can make the logo pop into the navigation bar once the user scrolls past a certain point, then vice versa—beautifully demonstrated on this restaurant website.

A fade up effect is another JavaScript effect that causes a slight, purposeful delay in how an element is loaded, like text or images. The quick pause (and timing is everything) adds some drama and emphasis to what you’re fading up, but be sure to use it selectively—users don’t want to wait repeatedly for text to fade in before they can read it.

[StudioPress Genesis Infinity Pro theme image courtesy LeagueWP.com.]

Animated typed text—which looks a bit like you’re watching someone type out the words before your eyes—is another neat effect when used in the right instance. It draws attention to text by gradually revealing it, making it especially helpful for instructional text you don’t want visitors to skip by or miss, or step-by-step information. Below is a comparison of two ways of accomplishing this effect with JavaScript and CSS.

Remember: Animations can quickly become overkill, and not only because they can be distracting to a visitor. Too many can affect page load times, and animated elements can even appear static or blank until the animation code is loaded. There are CSS workarounds, however, so be sure to talk to your developer about ways to minimize side effects.

2. Hover effects

Hover effects are animations that are driven by events like clicks or mouseovers, and with some creative thinking, they can really add some punch to your UX. While mobile touch functionality is definitely something to take into account when implementing hover effects, many are supported and they are an effective way to beef up the more interactive elements your UI.

There are countless options for animating text or logos with hover effects. Check out animation libraries like Animate.css for some ideas—there are fun and unusual effects like the rubber band snap, shake, bounce, and the Jello wiggle.

[Image via.]

Try using Javascript and CSS hover effects on CTA buttons to give users a clear indication of what to do. For example, transform the words “Learn More” within a button into a lightbulb icon when a user hovers over it. Or, use them on photos and navigation menus to make either element become a bit larger or even full-screen when clicked.

[Image via.]

Another idea is to add a hovering tip, suggestion, or explanation to an icon or selected piece of text, so users can learn a bit more about that item without having to click away or open a new tab. Try Hover.css for some CSS-powered options.

3. Icon effects

Animating icons can accomplish a few things. Ever noticed how clicking “Like” or “Share” on a page change that icon, so you know you’ve completed that particular action? That’s an icon effect. You can also add a splashy effect to a like button, thumbs up button, or share button.

Think of icon effects as visual verifications. They can help smooth out UX by letting users keep track of what they’ve interacted with on-screen (say, toggling options on or off, selecting items to go into a cart, or adding items to a reading list), or they can just add a little extra excitement, like a starburst behind a thumbs up icon. The sky is the limit, if you want to think outside the box and custom create your own animated icons. One fancy example out there is an animation that looks like water rising inside a button.

Or, use an animated icon to show users the progress of an action they just took—like a loading bar or an attached file, pictured below. This type of effect can be helpful for retention rates, e.g. clarifying that a behind-the-scenes action in progress isn’t just a lag or frozen screen.

[Image via.]

4. Transition effects

Transitions are big in 2018, offering a new way to keep users on page longer and more engaged without page refreshes. When used well, they can improve UX, tell stories, and highlight products in unique ways.

Transitions are another effect that should be implemented with care, and they venture into more complex territory (and total site redesigns). But even on a small scale, they can create very immersive experiences that draw users into your site without reworking much. Some transitions you may not even know are there—like smooth scrolling—while others like display and hide masks, rotations, and scene switches are more obvious and should be used with care.

In some instances, transition effects have replaced homepage sliders to give sites a more narrative feel.

[Image via.]

There are a slew of jQuery plugins for page transitions, or they can be created in JavaScript or CSS Animations.

5. Parallax scrolling

You might have encountered a parallax-effect background and not even known it. The effect adds depth and an atmospheric feel and can be accomplished a few ways: JavaScript, Pure CSS, or HTML and CSS. Essentially, it causes the background image to move a bit slower than the foreground images, creating a realistic sensation of being in a 3-dimensional environment. It’s popular in 3D game design but also makes for gorgeous, immersive homepage experiences.

[Image via.]

Check out the DynCSS library for some parallax effects to try on your site or web app.

Ready to try one of these animated effects on your WordPress site or web application? Bookmark a few samples you love from around the web, brush off Git repository, and find a developer on Upwork to get started.