Sometimes it’s doing the small things that can make a big difference.
And web designers know just how far a small simple effect can go in separating a website from the competitors.
Most of the effects are created with JavaScript or CSS3, so we rounded up some amazing JS and CSS3 effects that will transform your website.
Parallax Effect
The classic game effect is all the rage now in the web-designing world. Parrallax effect, where the foreground and background load at different speeds creating a 3D look without having to include any 3D effects, is a great attention-grabbing technique too.
Designers use this effect not just as themes but also for galleries and headers and footers, depending upon where you want to direct the reader’s attention.
Ken Burns Effect
Ken Burns is a great documentary filmmaker and an avid photographer whose panning and zooming technique is commonly used in movies. And now even used in web designing where a static image is panned and zoomed into.
Abundantly used in websites where you want certain items to stand out, the Ken Burns effect easily adds mojo to any website without you having to break a sweat.
Use it in themes or exclusively for certain sections of the website.
Semicircular Menu
The Menu bar is an indispensable part of any website, it’s a summary of what your site is about plus how to quickly navigate to a certain part of the website.
But unfortunately menu options are boring and limited as not a lot of designers experiment with these.
You can give your website a good facelift by changing something as little as a menu option. Like the semicircular menu for instance, it has a sleek unconventional feel to it when you put in social media or main menu options.
These are widely used for music-based websites but you can easily use this for any niched website too. Use this for social media sharing or for added important menu options that you don’t want readers to go hunting in the main menu bar.
Here’s a great semi-circular menu you can download for free.
Mega Menu
While stylish menu options are great for the overall aesthetics, sometimes certain websites require putting in too many menu options, like an e-commerce. In that case, instead of a number of tabs, use the mega menu options to showcase tons of options.
Mega Menu not only puts all your categories on display but gives you the leverage to organize as per you see fit. Plus you can add corresponding icons to it for increased user experience and better navigation.
Always try to choose a responsive mega menu option so options are displayed correctly and completely even when viewed on a mobile device. Here’s a responsive mega menu in CSS3 from DealFuel.
Accordion Gallery
Besides putting your best content on display, an accordion gallery cuts through the monotone of content overload and adds to the overall appeal of the site.
Don’t overwhelm your readers with an overabundance of images or miss out on opportunities by not displaying a good quantity of it. The accordion gallery is a saving grace for both – you show your best pieces and in a stylish way that also makes your website visually appealing.
This Accordion Gallery comes with good customization choices like horizontal and vertical display, scroll images and autoplay and whether or not to allow hovering over images.
Animation
Talk about doing half the work to double the impact, special effects change the face of your website without you have to make a lot of technical changes. And animations are one of the easiest special effects to put on a website.
Certain animations complement the theme of your website while some renew the feel for it perfectly in tune with a certain season or for a particular event.
Take snow animation for instance, it instantly spells winters and even the festive season. Or use them for a particular page or for certain posts too.
Lightbox
Some experts argue that the Lightbox effect is too much in the face. The fact that this technique is based on expanding a certain image or a video while dimming out the rest of the screen can make it look like it’s popped up at you. But this technique – when done right and subtly – can be a game changer especially if you’re putting up portfolio work for display.
By giving your choicest piece the center stage, it does indeed bring the right attention to them. But keep in mind that Lightbox scripts are dependent on the JavaScript support of a browser.
Here’s a grid gallery with Lightbox effect compatible with Opera, Chrome, IE9, IE10 and Safari.
Letterpress Effect
Letterpress effect was originally (and still is) used in business cards. It has a beautiful de-bossed look that gives it a professional and sleek touch.
The letterpress effect is perfect for blogs and online publications as the typewritten feel that this effect exudes goes perfectly with anything literary. Use this effect also to break the monotone of text on a regular website or on invites and postcards too.
Circle Hover Effects
This is a neat little effect if you have a cool trivia website that springs up random facts, this would be a great inclusion. You can put an image on each circle and then hovering on it would present some facts on it. But that’s just one way to use it.
You can work the circle hover effect in for long-form posts, web content, web presentations and manuals too where breaking up text with these circles would both add some interactive element to it plus inch up the visual appeal.
Expanding Search Bar
This addition to the list is on account of its functionality. The search button that when clicked on turns into a full-fledged search bar comes handy when you have a lot of content to display and don’t want to clutter up the page.
A neat simple page without an overabundance of content or flashy CTAs works best if you want your readers to stay on the page for longer. And this expanding search bar is one little but effect way to do so.
We hope you found these 10 awesome effects worth looking in to. We’d love to hear what other freebies would you like us to source for you.