CodeMyUi Snippets Collection of Animated Effects

Why do we enjoy code snippets so much? One of their greatest beauties is that they save loads of our time and effort when developing a website and enhancing its layout with cool effects. When we were thinking about specific snippets that we would like to share with you, we decided to handpick stunning animated code snippets from CodeMyUI.

Below, you can find 4 blocks (menu, image effects, social icons, and input fields) containing 5 cool animated snippets each. You can see each snippet in action, test how it works on your site, and share it with the community. All snippets are free and can be used both for personal and business purposes.

Navigation Menu Snippets

A thought-out, user-friendly navigation is essential for a good accessibility of your website. With all of them being developed with the primary purpose to guide people through your site's content, menus vary in their style and functionality. Below you can find a hand-picked selection of snippets that will make it far easier to enhance your site with a usable navigation element.

Circle Menu Effect

This creative and interactive circle menu pops items around a hamburger icon as you click on it. By selecting any item of the menu, the icon gets animated and the background is painted with the color of the one selected.

Fullscreen Flexbox Overlay Navigation Using Velocity.js

Here is an impressive color-rich flexbox fullscreen overlay that appears/disappears with a click on the hamburger menu icon.

Pure CSS Sliding Navigation Button Animation

This is a cool navigation element that is placed on the left side of your web page. Presented by means of round-edged white tabs, each menu item comes out as a long rectangular tab with a name label put on top of it on the mouse-over.

Menu button expands to navigation menu on click

Looking rather clean and minimalist, this rounded menu icon will expand to a fully-featured navigation panel on click.

Navigation Menu Effect Using Bootstrap 3

This fully-responsive element displays a fly-out vertical navigation panel on click. The menu items feature a hover effect, which highlights the chosen item with elegant purple hues.

Image Effect Snippets

Images are widely considered as the most powerful attention-grabbers. These can be featured in literally every element of your web design - header, slider, posts, galleries, portfolios, Mega Menus, thumbnails, etc. To make your online presentation far more lively, you can enhance visuals with some cool image effects. The following selection of CodeMyUI snippets will come in handy.

Suspending in Air using Pure CSS

The effect will be of special use to websites focused on the presentation of a certain product (or a few items). With the help of an image of an item suspended in the air, you can draw users' attention to your offer. The effect is intended to work well on both product and eCommerce item pages.

Scrolling Effect on Fixed Headings

The effect will work impressively well on websites with large hero sections. It works like this - a fixed heading is placed front and center. When a user scrolls up or down the page and gets to the next image, the text changes to the next title.

3D Animation for Flyers

If you want to add a 3D illusion to your website, take a closer look at this snippet. Intended to showcase flyers on a web page in an interactive manner, it lets your visitors interact with your offerings much cooler.

Hero Image Slider Scroll Animation

Use this snippet to add a non-standard hero slider to your web page. Stunning animation with a fly-out effect is perfectly combined with a split screen technique, letting you present visual and written data in a captivating, well-balanced way.

Color Manipulation On Images Using Input Type Color

The snippet is intended to help you change the color of the images by simply picking the necessary hue or defining a custom one.

Social Icons Snippets

Social icons are important for every website. These are intended to increase traffic to/from social accounts and boost brand awareness. Making them recognizable and user-friendly is indispensable if you want your clients to join your social media followers and spread the word about your content online. Making social media icons animated you can enhance your site's interactivity to a great degree. Here are several cool snippets that will help you animate social media icons in a number of ways.

Pure CSS Social Share Icon Hover Animation

Here is a set of 3 animated "hover me" cards. Although they may seem to look similar at first glance, each card features a different hover effect. Thus, when putting a mouse-over the first card, you will see a set of social icons showing up from the center. In the second card, the hover me layer slides down while the share icons slide up. In the third card, the hover me layer fades as a layer of social icons slides in.

Social Media Icon Hover Tooltip

The snippet is designed to make each social media icon clear for your site visitors. Thus, when they hover over any of the SVG icons, they will see a tooltip with a text label above it.

Simple Social Icon Hover Animation Using SVG

If you are a fan of minimalist web designs but would like to spice up your online project with slight animation, use this snippet. With its help, people will see elegantly animated social icons on hover.

Social Connect Buttons With Hover Effect & Followers Count

The snippet is developed for Facebook, Twitter, and Instagram exclusively. The icons are large and airy. Each of them displays the number of your followers on each platform. Hover animation invites people to like or follow your official profiles.

Stacked Social Media Icons Expand on Hover

The name of this snippet speaks for itself. When hovering over stacked icons, the users will see them expanded, revealing each individual icon.

Input Field Snippets

Just like all the aforementioned elements, input fields are essential for a web page. These are intended to enhance its usability and functionality to a great degree. Input fields vary from text fields, search bars and toggle switches to animated log-in and sigh-up forms.

Animated Search Icon to Input Field Transition

This is an animated search element. When you click on the icon, an input field is displayed. You can either enter your search request or click an "x" at the end to close the search box.

Owl Login Form Replica From Readme.io

Add some fun to your website with this cute replica of owl hiding its eyes as you type in your password.

Custom Range Input Slider With Labels

The custom input range slider includes a wide selection of numbers equally available to the users. There are pre-defined upper and lower limits of the range, so people can play with the input within the range specified.

Pure CSS Checkbox Toggle Animation

The snippet features both flat and 3D looks of checkbox toggle animation.

Pure CSS Minion Themed Toggles

Let's end this compilation with something funny. Minion switches buttons will make our design so much lively and entertaining.

Here we go. We hope that you will find this collection of CodeMyUI snippets useful. Animate your site, enhance its presentation with more captivating effects, and speed up your web development!