This is a secondary navigation intended for users who want a quick overview of the page content, and be able to easily move from one section of the page to the other. A fixed navigation with smooth, jQuery powered scroll. Nothing fancy here, yet a handy snippet for creating a secondary menu to quickly surf through the page content. A good example I can think of is Disqus For Websites. A nice touch is to…
This is a great 3D Rotating Navigation tutorial by Codyhouse.(Claudia Romano).It is powered by CSS transformations.Sometimes you just want your website navigation to be bold. Design agencies, for example, use their portfolio to show off their skills and push a little usability standards. Another good example is mobile apps: animated elements are key ingredients of the user experience. In this case a 3D menu can’t just be fun. It has to be efficient.
This is a collection of effects for revealing sharing buttons. You can use them in your portfolio, image galleries and more.Most of the different transformations and effects on the demos are done exclusively via CSS, so they should appear bug and lag free (if you are running a modern browser).
This is a responsive and easy to customize navigation for mega-sites enriched by subtle CSS animations and support for devices with javascript disabled.Created by Sebastiano Guerriero.It works on all major browsers. Sebastiano used SASS and Bourbon (http://bourbon.io/) for resources. If you don’t use SASS, just use the .css files that you find in the css folder. You can delete both sass and partials folders.
Here is another great tutorial from Codrops.Resizing and Cropping Images With Canvas.In this tutorial you will learn how to resize and crop images using JavaScript and the HTML5 Canvas element using controls, commonly seen in photo editing applications. You do this by creating an HTML5 canvas element and drawing the image to the canvas at a particular size, then extracting the new image data from the canvas as a data URI. Most browsers have good…
Today’s free design resource Mobile App Introduction Template with tutorial comes from Codyhouse.A basic template to showcase the best features of your app, enriched with a video slider for a better user understanding. The template turns into video slider on desktop screen. Note: all videos in the demo have been created in Adobe After Effects, and exported as .mp4 using Adobe Media Encoder.
You have probably all seen the “drawer menu/off-canvas” navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but it would be cool to try and do this with the new cool features of css. You can choose between 9 different effects and where you want your drawer to appear.Pure Drawer works in all modern browsers. Gracefully degrades in IE9.You can create different…
Today’s free development resource has been created by Codyhouse – Rounded Animated Navigation with CSS3 & JQuery inspired by Ping iOS app This is an experimental full-screen navigation, animated using CSS and jQuery, that expands within a circle.Velocity.js has been used and it’s supported by all major browsers.
Client Testimonials Carousel is a responsive carousel showcasing selected client testimonials powered by CSS and jQuery that can be easily integrated into your design. 2 plugins have been used to built this resource: FlexSlider for the carousel, and Masonry layout to build the grid for the testimonials modal page. If the user wants to see more feedbacks,a button has been added that links to a modal page with more testimonials with a nice CSS3 transition.…
Today’s free inspiration and tutorial comes from Tympanus. The full-page background image header has been a web design trend for some time. Recently people have been turning to animation to add more visual interest to their website headers. This collection uses JavaScript and Canvas to create various header animations. Each demo uses its own JavaScript file, but they each have similarities. Each example has: – an animation loop using requestAnimationFrame – shapes (circles, triangles, lines)…