Elastic SVG Elements

We’d like to share some inspiration for adding elasticity to elements. The idea is to integrate an SVG element into a component and then animate it from one path to another with an elastic animation.

Continue reading Elastic SVG Elements

Tutorial for animated scroll loading effects with Animate.css and jQuery

You may have come across websites where when you scroll down, the page contents come into the viewport with some cool animation effects. I needed to use an effect like that for one of my project and I looked around to figure out how it is done.

Continue reading Tutorial for animated scroll loading effects with Animate.css and jQuery

Mobile building continuous user interfaces

SamsaraJS is a library for building continuous user interfaces. A continuous UI is one where many visual elements are animating in coordinated ways. For example, you may want to fade the opacity of a nav bar while a settings menu is translated by a user’s swipe gesture. Or maybe you want to blur and scale a banner image when a user scrolls some content past its limits, and add a springy bounce at the end.

Continue reading Mobile building continuous user interfaces

Easy way for responsive menu

Without any additional configuration, both the original and mobile menus will be displayed. It is recommended to use media queries to hide the original menu and display the mobile menu when appropriate. Modernizr or similar can be used for graceful degradation.

Continue reading Easy way for responsive menu

Vertical Fixed Navigation

A side navigation which allows users to easily browse the page, selecting one of its sections and smoothly scrolling to it. It doesn’t necessarily replace the main website navigation, but comes in handy for pages packed with content.

Continue reading Vertical Fixed Navigation

Bootstrap responsive ink-portfolio teamplte

We have launched our new Bootstrap responsive ink-portfolio. A template created with perfection with fine modern design. This will be your perfect choice to portray about your Business and present your product in the best possible way.

Continue reading Bootstrap responsive ink-portfolio teamplte

Auto hiding navigation and sticky header

A simple navigation that auto-hides when the user scrolls down, and becomes visible when the user scrolls up.

Auto-hiding navigations have been around for quite some time now, in particular on mobile devices. The idea behind this UX pattern is simple yet efficient: we want the navigation to be easy to reach all the time, so we stick it on top. However, we auto-hide it when the user scrolls down, to create more room for the content. If the user scrolls up, we interpret his behaviour as a will to access the navigation, so we bring it back.

Continue reading Auto hiding navigation and sticky header