Wayout Menu is a responsive menu written with Bootstrap 2.3.1, jQuery and CSS3. CSS transitions are used for navigation level openings.
Features:
This time I will show you other five examples of hover effects using different CSS properties compared to the old tutorial posted on Codrops.
In summary, we seek the same method but we will act especially using the border property, as we shall see later that allows us to create very particular effects.
Please note that this will only work properly in modern browsers that support the CSS3 properties in use.
Bootslider is the ultimate premium Bootstrap Slider Plugin offering the capability to show images, videos, html markup and captions paired with modern and fancy 3D transitions. Even more important, it is fully responsive and mobile optimized and can take on any dimensions.
Features:
Tram.js is a cross-browser CSS3 transitions in JavaScript.The idea behind Tram is to take the performance and flexibility of CSS transitions and define them in JavaScript – offering a more powerful, expressive API with auto-stopping, sequencing, and cross-browser fallbacks.
Tram currently depends on jQuery for a few reasons: (1) Per-element data API, (2) Cross-browser CSS getters/setters, and (3) scrollTop/Left offset helpers.
Examples:
An easy to use, CSS3/jQuery Responsive Navigation built on the Superfish menu and HTML5. This was developed in part because of the lack of nested responsive menus.
Included:
Royal Audio Player is a powerful responsive HTML5 mp3 player for your website that runs on all major browsers and mobile devices like iPhone, iPad, IOS, Android and Windows8. Royal Audio Player supports unlimited playlists and each playlist can have unlimited tracks. The playlists can be loaded from a simple HTML markup, XML file, Podcasts url or SoundCloud playlist. Packed with a huge amount of features like, external API, deeplinking and facebook share button, it is one of the most impressive HTML5 mp3 players available on sale.
Features:
Responsive layout.
A collection of loading indicators animated with CSS3.SpinKit uses CSS animations to create smooth and easily customizable animations. The goal is not to offer a solution that works in every browser. If you’re building a site with users running IE9 and below, you’ll want to detect support for the CSS animation attribute, and implement a fallback animation (e.g. a GIF.)
Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects.
Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. The approach reflects some practices in app design where “views” are shown with animations. We’ve experimented a bit and we’ve come up with a small set of effects that take the page and move it in 3D to reveal a navigation (or some other content if you like). What’s nice about this is that we literally put the site into perspective, allowing for an interesting view on the content and the navigation possibilities.
Buttons with built-in loading indicators, effectively bridging the gap between action and feedback.A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing.
