Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth. As I planned to re-design my personal website, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I’ll show you how I did it.
Fancy Product Designer : jQuery plugin
Let me introduce the first Product Designer here on jQueryRain. You can use this plugin for any type of product. Use it as T-Shirt Designer, Business Card Designer, Device Designer….no limits!
You do not need any vectors files for the plugin, you just set png images for your elements and you tell the plugin which element can be colorized by the user. If its can be colorized, the image will be converted in a HTML5 canvas element.
Features:
- Converts png files in HTML5 canvas for colorization
- Let the user add custom texts to the product
- Add unlimited motives
- Colorizable elements by static colors or colorpicker
- Let the user drag, move, remove or rotate the element
- Great API to integrate it in any Shop System
- Add unlimited custom fonts to the font dropdown, you only need the woff file of your font
StackSlider: A Fun 3D Image Slider with jQuery & CSS3
StackSlider is a highly experimental jQuery image slider plugin that explores a different and fun viewing concept for thumbnails, utilizing CSS 3D transforms and perspective. The idea is to navigate through two piles of images where the transition resembles an item being lifted off from the top of the stack and moved/rotated to the center of the container to be viewed. The previously viewed image falls on the opposite stack.
slimScroll : jQuery nice Scrollbar
slimScroll is a small jQuery plugin that transforms any div into a scrollable area with a nice scrollbar – similar to the one Facebook and Google started using in their products recently. slimScroll doesn’t occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.
jQuery Responsive & Touch-Friendly Audio Player
A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used. The jQuery plugin itself would be pretty much useless without the respective CSS which is responsible for the looks and some of the features summarized below.The plugin replaces targeted <audio> elements with some HTML and JavaScript events attached to it.
Don’t confuse this player with the whole media centre like iTunes or so. It is nothing like that. This is a tiny, lightweight player with a very clear purpose: to play a single audio file. I have built it having this credo in mind: “don’t solve problems that do not exist”. You don’t need complex plugins or ugly Flash players with thousands of useless functions to play that damn audio file. Be innovative, be subtle.
plasma.js : Creating Plasma Fractal in JavaScript
Plasma fractal also known as Random Midpoint Displacement Fractal is not only a cool visual effect but also an extremely useful algorithm often employed in the computer games industry. Also known by its other name – “diamond-square algorithm” is used to create realistic heightmaps for 3D computer graphics and it can also create clouds or smoke effects. But most of all, it creates wicked plasma effect you can see above. And what is cooler than programatically generated plasma? Programatically generated plasma in JavaScript!
Feedget : jQuery RSS Reader
Feedget is a jQuery based RSS Feed reader plugin that allows you to easily include a simple RSS Feed widget on your website. There are several configuration options available that allow you to include feed images, navigation buttons or the Facebook Like button. Feedget is integrated with jQuery UI, so it’s very easy to customize. Compatible with all major browsers.
