In this tutorial we will create a simple smooth horizontal content scrolling effect with just a few lines of jQuery without using any plugin. We will use HTML and CSS for the layout and jQuery for the scrolling.
Archive for 2013
simpleWeather : A simple jQuery plugin
A simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API. You simply provide your US zip code, WOEID or any location in the world and it returns your local weather from Yahoo! This plugin won’t spit out a bunch of HTML full of classes and IDs. It just gives you the returned data for you to use, display and style as you need.
Lush : jQuery Content Slider with CSS3
Lush is a flexible content slider. It uses CSS3 native transition and animations to get the best performance taking advantage of the modern browser features, without lose functionality in older browsers.
It uses a semantic syntax to describe the animation timeline avoiding complex attributes and keywords.
The animation system is completely extensible allowing to add more animations and transitions easily just like adding new CSS classes.
Features:
- Native animations
- Fully Responsive
- Crossbrowser
- Natural syntax animation timeline
- CSS3 3D animation
- Extensible animation system
- Flexslider compatible
- Pages Slider (via iframe)
- CSS skineable
- Powerful API
- 4 different shadow images included
jQuery Waiting – spinners and animations
jQuery plugin to generate spinners and loaders, without images, canvas, or other nonsense. For the developer they need support in every browser, easy customization, and efficiency. Even though all this is possible with fancy CSS transformation, many browsers won’t support it (IE < 10). jQuery Waiting uses standard, widely accepted css to style your waiting spinner, and a little jQuery to make it function.
Yunero : jQuery plugin displays a video feed for YouTube channel uploads
Now you can bring your Youtube uploads to your websites with “Yunero” – a new jQuery plugin that creates a widget on your website. Just specify your youtube channel URL and this widget will display the recent uploads from your channel. You may also specify your youtube playlist URL and video feeds from your playlist will be displayed. A subscription box for you is also shown to attract social people.
retina.js : JavaScript Serve high-resolution Images to Retina devices
retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.
Antiscroll: jQuery cross-browser native OSX Lion scrollbars
OS X Lion style cross-browser native scrolling on the web that gets out of the way.Antiscroll fixes a fundamental problem JavaScript UI developers commonly face: how do I customize scrollbars so that they get out of the way (for example, for different form widgets), but retain their native scrolling properties (like OS widge scrolling velocity, or OS specific inertia)?
Antiscroll addresses this issue by providing a cross-browser implementation of the scrollbars popularized by OS X Lion that retains native properties.
Features:
- Supports mousewheels, trackpads, other input devices natively.
- Total size is 1kb minified and gzipped.
- Doesn’t magically autowrap your elements with divs (manual wrapping is necessary, please see
index.htmldemo) - Fade in/out controlled with CSS3 animations.
- Shows scrollbars upon hovering.
- Scrollbars are draggable.
- Size of container can be dynamically adjusted and scrollbars will adapt.
- Supports IE7+, Firefox 3+, Chrome, Safari
Top Drawer : A smooth dropdown menu with jQuery & CSS3
Top Drawer is a smooth dropdown menu for responsive web design. It is designed to demonstrate smoother reveal menus in small contexts using CSS3 rather than animating with JavaScript.
Tap the menu icon in the top right. The click event will assign the class of active to the drawer container which alters the translate value to bring it into view. Modernizr will detect whether the user’s device is capable of CSS transforms, if it isn’t we simply show and hide the menu after the button is pressed – no point in animating if it isn’t going to work smoothly.
