Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items.
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. Here are small set of effects that take the page and move it in 3D to reveal a navigation.
Bigfoot.js is a simple jQuery plugin that detects footnotes on the page and makes them better. It creates clickable buttons out of the original footnote link and creates a popover when the footnote button is clicked. Finally, the script make sure the popover is appropriately sied and positioned so that it looks great on any screen size.
Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones.
It can be extended with many plugins, has a easy to use and well-documented API and a simple, readable source code.
Mobify.js is an open source library for improving responsive sites by providing responsive images, JS/CSS optimization, Adaptive Templating and more.
Mobify.js also provides a “Capturing” API for manipulating the DOM before any resources have loaded, giving developers the ability to enable the listed features above without changing any backend markup.
TouchSwipe is a jQuery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc.
SlickNav is a responsive mobile menu plugin for jQuery.
Vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. It's tiny, has a clear and simple API, works on mobile devices, and can be customized to match your style in seconds.
RTP.Slider.js is a versatile and flexible slider. Strong support for fluid / responsive Designs, mobile browsers and touch devices. It has nearly every feature that you can find in other sliders on the web.
SimpleSlideView is a jQuery plugin for simplest sliding views (incoming views that “push” old ones off-screen) with the ability to activate/deactivate for responsive layouts.
Touch Image Gallery is a simple image gallery that caters to mobile and desktop browsers alike, by being touch/swipe friendly, in addition to the traditional way of navigating. The gallery can be navigated in the following intuitive ways:
The gallery itself consists of just a regular
<ul> list with images defined inside it. A simple to implement, cross device friendly gallery this is.
A tutorial on how to create a mobile-friendly and responsive expanding search bar.
Summarized, this is what we want the search component to do: