15 Stunning Effects With JS and CSS3

Hello designers, have you reached the point where your brain refuses to function any more?

15 Stunning Effects With JS and CSS3

If you have and are looking for ideas to make websites turn out to be the next big thing after A Song of Fire and Ice (Game of Thrones series for the non-book-reading populace) without raking your brains, check out these 15 CSS3 effects we’ve rounded up for you.

From tutorials to deals, we get you 15 amazing effects that will transform websites from blah to wow!

Parallax Effect

Have you browsed through the ihatetomatoes website celebrating 25 years of the Nintendo Game Boy? Where you also got to play some Tetris?

Or maybe browsed through Rimmel’s website blown away by how brilliantly the items pop up against a colorful background of models?

Parallax Effect

The 3D-esque effect that seems to be all the rave in designing now is technically called the Parallax Effect. Designers love to play around with these, but you need to be subtle and strategic as it can backfire and end up creating a jumbled mess.

The Parallax effect or the Parallax scrolling is the result of the background loading at a slower speed than your foreground, creating more of a 3D look. Does it sound like a lot of work? Not for someone who works smart, get a Parallax theme completely done-up already at Cyberchimps.

Ken Burns Effect

The documentary filmmaker pioneered the concept of panning and zooming into a static image. Graphic designer used this effect abundantly and you might have even come across this on a lot of websites.

The effect not just guides eyeballs, literally, to where you want the focus to be but also adds a dash of intensity to an image. Do you recall watching a movie where an old photograph was flashed across the screen, and the narrator speaks about something in the picture, while the frame slowly pans and zooms to that subject?

Ken Burns effect has become quite popular and rightly so as it gives an instant facelift to any boring website.

Semicircular Navigation Menu

You don’t have to go all out to change the look of your website. Sometimes as little as doing away with the old and boring men option can help.

Semicircular Navigation Menu

In its stead, go for a stylish circular or semicircular navigation option that helps showcase a number of menu options. Some designers only include this for social media sharing buttons, but you’d be surprised by its versatility.

From the obvious music console and social media sharing icons, to the primary menu and profile icons, there are a lot of ways to leverage this.

Don’t want to rake your brains creating this CSS3 effect from scratch? Get one as a freebie from DealFuel.

Show/Hide Login panel

Sliding panels are commonly used these days but that’s mainly to lighten the load of too many tabs. Not enough designers experiment with the potential of this option, because sliding panels can be beneficial in so many ways.

Showcase content topics, create a de-cluttered look, hike up the aesthetics or just be different from conventionally designed websites. The Show/Hide login panel is a must for every WordPress website, it gives an overview of the dashboard with multiple menu options once you login. Know more about this panel here.

Slider Login Form

Another login panel option that slides to reveal more content is a great move when you want subscribers to put in a bit more information than just e-mail address and name but at the same time don’t want to overwhelm them.

Slider Login Form

Cutting down on space too, definitely check this out, as it would come handy when you’re creating minimalistic-themed websites.

3D Ribbons and 3D effects

If you are still intimidated by the Parallax effect and fear you’d mess up, start small. Use 3D ribbons, different shades and shadows to create an overall illusion of depth in your website, thus rendering a 3D effect.

3D Ribbons and 3D effects

The 3D ribbons in themselves look absolutely amazing. Use this to highlight a part of the website or on an official certification document that you want to put up, these would increase the overall visual appeal of the page.

Know how to create the effect using CSS3 on pvmgarage.

Coverflow effect

Coverflow effect

Predominantly used on book-based websites, you have definitely seen this effect on your Mac or Apple device when you browsed through pictures. The Coverflow effect showcases a number of items – like book covers – where you can then swipe either left or right to view the cover, get some pop-up details and select them.

Does this sound interesting? Would you like to implement this in a project? If yes, then definitely browse through this piece.

CSS3 Transitions

Designers who play smart rather than hard know that it doesn’t take a lot to add mojo to your website, a change of theme here, a few shade and shadow elements there and you can actually transform your page. Another way to do that is by animating your page content through CSS3 transitions.

From letter spacing to text-shadow, play around all you like to see what suits best. Also, here’s a great freebie comprising a comprehensive range of transition effects.

Snow-Themed CSS3 Animation

Still reeling in the after-effect of the holiday season? Snow-themed CSS3 animations not just have a festive touch to it but also work remarkably well for certain website like that of an ice-cream brand.

Snow-Themed CSS3 Animation

It’s quick and easy to use and can change the look of your website or blog page to complement a theme or a season.

Animation

Animations can work wonders for websites, even it’s a subtly done one. It grabs attention plus helps with conversions too since the attention is directed to the call to action.

Or simply, it adds to the face value of a page if nothing else. Here are some great special animation effects you can check out.

Letterpress Effect

You’ve probably seen those Instagram quote posts with the de-bossed text look? That’s what the Letterpress effect looks like and is also becoming quite popular in web designing.

Letterpress Effect

This does have an inverse-typewritten feel to it but it exhibits an elegant and sleek look. Definitely recommended if yours is an online publication or a blog. Also, if you want to put in a touch of professional without going all C-suite, this would help. Here’s a tutorial on how you can use the letterpress effect with CSS3.

Flipping Circle

A little info not just never hurt anybody but could also be the website’s USP. A website like the one that throws random facts with every refresh could be worked into a sort of gallery with pictures having a little handle, which when clicked opens to show some fun trivia.

Flipping Circle

But even in regular websites, a flipping circle is of a lot of importance. It compresses information, so you don’t have a teeming-with-text page. And it also has a cool 3D feel to it. Here’s a tutorial on how to create a flipping circle.

Mega Menu

You’ve probably seen them on e-commerce websites where a lot of categories need to be put right on the landing page but without creating a crowded menu bar.

Mega Menu

The Mega Menu option is also a must for the education industry, have a university website that showcases all the major courses, admission information, and student’s results and a lot more?

The Mega Menu can help de-clutter, create a sharper sleeker menu bar option and not confuse readers into clicking on the wrong option because of longer, stuffier menu options. You can also score a great deal by grabbing responsive Mega Menu for free.

Accordion Gallery

There are two ways to keep readers engaged on your site, belt out powerful content and draw their attention to said powerful content. A static page might catch the reader’s eyes but something interactive like an Accordion Gallery will catch the reader’s eyes.

Accordion Gallery

Accordion galleries – whether you choose to showcase your best portfolio piece or get attention to your bestselling product – will always work. You only have 6 seconds to get the reader’s attention and keep them on the page, use the Accordion gallery to get and keep their attention on your website for far longer. Here’s a great adaptable Accordion Gallery plugin that you can grab for free.

Lightbox

How important is a grid gallery? If you’re a photographer, an artist or simply a blogger, it could mean your next big gig.

Lightbox

A grid gallery puts all your best pieces right on display! From the stunning shot of the sunset atop a hill to that intense street portrait, wow them, get the word out or simply entice them to win a contract, a grid gallery could be your best resume forward.

As a designer, this is something you shouldn’t just consider for your client’s work but also for your own website. Get your work to champion for you and vouch for your creative prowess, a grid gallery is worth its weight in gold.

But you get it for naught in this deal, so go grab it now!

Which of these would you recommend to a friend?

Like it? Share it.

2 Comments

  1. I liked the concept of the parllax effect of Rimmel’s website with the 3D-esque effect that use,
    the 3D Flipping circle is also outstanding!

    • Hey Chawki,

      Glad to know that you liked it.

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *