iframe videos can be a pain for responsive pages. MediaWrapper is a plugin for wrapping iframes and embedded videos to behave more like images.
Illustration by akselkreis
SecretNav is a small jQuery push menu plugin that slides out an off-canvas navigation from the edge of the screen while pushing the main content away with a fancy CSS3 powered 3D perspective effect.
The plugin requires jQuery 1.7 or higher, and Modernizr.
Illustration by minnix
It supports the latest version of Google Chrome and the current and previous major releases of desktop Firefox, Internet Explorer, and Safari on a rolling basis. Mobile support is tested on the most recent minor version of the current and previous major release for the default browser on iOS and Android (e.g., iOS 9.2 and 8.4).
Illustration by minnix
scrollSpeed is a lightweight jQuery extension for custom scrolling speed in modern web browsers. Supports vertical or horizontal scrolling direction, including user-defined easing. After setup, reference the
scrollSpeed() method and modify the
speed parameters to create the desired scrolling effect. The
step parameter defaults to
100 units, while
speed defaults to
800 milliseconds; custom easing is optional.
Illustration by akselkreis
If you are looking to add a little flair to your anchor scrolling, this plugin can help. AnchorScroll.js is a lightweight, easy-to-use jQuery plugin for smooth scrolling to anchor targets that can also add classes to elements on scroll events. You can add blur effects, bounce effects or even text to let your user know you are scrolling to the right spot.
TypeIt is a high quality jQuery plugin that types text a given string or strings of text on a page. Its responsive, lightweight and easy to customize.
To get started you can either pass in settings object, use data-typeit-* attributes, or You can define your string by dropping it directly in the HTML element. You can have it play back multiple strings and even set it to delete the previous string before starting a new one for that realistic effect. You can also alter details like speed, and even pacing to make it feel like a person is doing the typing.
Large data sets can pollute DOM with used tags. This can cause a scroll lag as you display the data. Cluserize.js elegantly solves this issue with a clever solution that splits your data into clusters and only loads it as you scroll. This gives you a smooth and fast scroll no matter how many rows of data there are.
You can apply Clusterize.js to a table, ordered list, unordered list or a div. They have a very useful sandbox on the demo site.
HTML5 Upload Image, Ratio with Drag and Drop is a tool to help you upload images, making full use of HTML5 with canvas. The drag and drop feature makes this an ideal, and easy, solution for use in a content management system.
Key features include:
- Use canvas to crop images (no server scripts needed)
- Full HTML5 support
- Touch support so everything works great on tablet and mobile devices
- Responsive design
- Save images with AJAX or use the traditional FORM input file element
- Uses ratios to fit screens or elements
- Easy to use
- Additional options to configure
- Works with Bootstrap 3.1
- Works with jQuery 1.9
HTML5 Upload Image is a premium tool and is available from the Envato Market for $11, which includes quality checks, future updates and 6 months of support.
jQuery Lightgallery is a customizable, modular lightbox gallery plugin. The fully responsive tool helps you make the most of images for almost any type of website design.
The key features of jQuery light gallery include responsive design, touch and drag navigation, animated thumbnail options, plenty of customization options and support for video from YouTube and Vimeo. The tool is also designed as modules – thumbnail, full screen, zoom, etc – to make it easy for you to create exactly what you want. Plus, you can add your own modules and detach elements that you don’t need.
The plugin also comes with more than 20 animations built in, and each one uses CSS3 transitions for super-fast performance. Finally, the tool includes a dynamic mode that can be instantiated and launched programmatically by setting dynamic option to true and populating dynamicEl option by passing array of objects representing the gallery elements.
jQuery Lightgallery is available on GitHub and you can find plenty of examples of its usage in the detailed documentation.
Flavr is a fresh and stylish popup dialog for your next flat website. It is built to be responsive, able to adapt its layout and position to any screen size of your viewer with the power of CSS.
To get the best user experience, flavr is animated using the popular animate.css. And most importantly, flavr works on any modern browser (IE8+), any device and any screen size.
Features of flavr include:
- Clean and modern flat design
- Well documented
- Fully responsive
- Lightweight, yet powerful
- Bootstrap compatible
- CSS3 animated in modern browsers
- jQuery powered
- Cross browser support
This plugin is available for $6 from the Envato Market and is quality checked and comes with future updates and 6 months of support. Additional support is also available.
If you are looking for a lightweight jQuery plugin for complex two-way data binding in real time, jQuery.my might be the perfect solution.
Here are a few more features:
- jQuery.my recognizes standard HTML controls and complex composites created using rich UI plugins. Controls built with jQuery UI, Select2, CodeMirror, Ace, Redactor, CLeditor, jQuery Mobile are supported out of the box.
- jQuery.my provides comprehensive validation, conditional formatting, complex dependencies, runtime form structure manipulation. $.my forms can run nested, each jQuery.my instance can be a composite control for parent form.
- Syntax of $.my manifest is very simple, lean and unobtrusive. There exist specialized in-browser IDE for $.my apps authoring. This IDE is a built-in component of cloudwall.me system.
The result is a fully interactive set of tools, tables, curves and layouts that can work in a variety of applications. Check out the demo to see how it can work for you.
Royal Video Player is a responsive player that can play local videos, streaming videos or YouTube videos. (It’ll play pretty much anything with an mp4 format.)
What makes it pretty awesome is that this player works on mobile devices and desktops and with any browser and supports unlimited playlists. This is a pretty robust tool for any site that used plenty of video.
The player comes with plenty of features as well. These include:
- Responsive layout and design
- Optional deep-linking for playlists and videos
- Optional embedding and sharing
- Ability to load any type of playlist
- HTML markup playlists that can be created manually or from a database
- Multiple hover effect options
- Video description tooltips
- Multiple positioning options
- Customizable thumbnails
- One skin for all videos, regardless of source
- Autoplay, loop and shuffle options
- Plenty of great play, volume and other buttons
The player is a robust tool with plenty of features. It is available for $14 from the Envato Market.
Mmenu makes it easy for you to create a native-style mobile sliding menu for your website (including WordPress). The menu has a stylish look and feel behind a hamburger icon and works with almost any type of design.
Mmenu is an easy to use but customizable jQuery plugin. It includes a wide range of options, extensions and add-ons to fit your needs. No matter how large your nested menu structure is, everyone already is familiar with the sliding submenus used in native apps. The fixed header, search field and sub-item counters make navigating your menu even easier.
Customize everything about this plugin to make it your own. Choose from options such as:
- Background color
- Menu position
- Navigation style and flow
- Search fields
- Header or footer buttons
- Include photos, logo or other images
And what’s great about this little jQuery tool is that it looks great. With so many options — and in a style users are familiar with — this might be the only tool you need to finish up your mobile website design.
TwentyTwenty is a tool that can showcase the difference between two images. The nifty little trick makes it easy to show users precisely what you want them to see.
TwentyTwenty works by stacking two images on top of each other. As the slider moves across the image, it makes use of the CSS clip property to trim the image on the left. This allows the image on the right to show through the container.The widget uses jQuery custom movement events to support this slider movement.
The plugin has two dependencies: jQuery and jQuery.event.move, so that actions will work on touch-based devices.
The tool is fairly easy to set up and offers various customization options for display of the images. These options include:
- Stroke width
- Circle width
- Triangle color, size and position
- Handle radius
- Overlay and associated colors, labels, padding and spacing
- Label radius
This widget is responsive and works across all devices, doesn’t require images to work properly and works with Zurb Foundation right “out of the box.” (This tool was built by the team at Zurb.)