Sonic.js - Generate Canvas Loaders - Nuefolio Magazine. jQuery quickie: Colourful rating system with CSS3. Today, we're going to do a relatively simple jQuery tutorial.
Rating systems are used a lot on websites, for example to rate how good a certain product, article or comment is. I slightly wanted to improve this idea, by making it more visually attractive. By using the jQuery Color plugin, we can animate colours. Simply use the animate() function from jQuery to have colours fade to another colour. When using this technique, combined with some CSS3 feautures (rounded corners and drop shadow), we can create a Colourful rating system. As usual, since CSS3 isn't supported (yet) by every browser, the demo page only fully works on those browsers that support it (Firefox, Safari and Chrome). Should I do more jQuery "basic"/quickies in the future?
Demo video For those who don't have a CSS3 supported browser, here's the demo page using Firefox. Simple, beautiful yet effective, right? Yup - that's all there is to it! Just like the HTML, the CSS of this isn't very advanced. jQuery. Guiders.js - JavaScript Library For Guiding Users. Fathom.js - Present JavaScript in Its Native Environment. Fathom.js is javascript library that allow you to create presentation with javascript.
Write your slideshow in HTML, style it with CSS and control it with some jQuery-powered JavaScript. When you’re done, Fathom.js even lets you sync the video of your presentation quickly and easily. It has some customization option that allow you to configure Fathom.js to suit your needs, such as displayMode, margin, portable, video , timeline and more. Fathom.js comes with mouse, keyboard and scroll bar navigation built in and provides a simple API for creating your own custom interfaces. Content Rotator with jQuery. Today we want to share a fancy content rotator with you.
It shows some image with a headline and sub-headline in each slide and allows navigating through the slides using the thumbnails that also contain a headline. Hiding the thumbnails will reveal a scrollable text container and the navigation arrows will move up so that one can navigate to the previous or next slides. View demo Download source The beautiful images are by Andrey & Lili. The images are licensed under the Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License. We also use the jQuery Mousewheel Plugin by Brandon Aaron and the jScrollPane Plugin by Kevin Luck. Examples We have two examples, one with autoplay and one without: For the HTML structure we will have a main container, the content wrapper and the container for the thumbs. The default options are the following: We hope you like this little content rotator and find it useful!
View demo Download source. Create an Awesome Zooming Web Page With jQuery. Want to create a really unique and eye-catching effect for your site?
How about an animation that zooms into a specific portion of the page when you click on it? It may sound like a lot of work but with jQuery and Zoomooz.js, it’s a snap! I’ll walk you through the process step by step as we build a stunning zooming thumbnail gallery. What We’re Building Live Demo: Click Here Zoomooz.js: Basic Introduction When working with new libraries, it’s always best to start out with a dead simple example, just so you can get a feel for how everything works. HTML: The Inclusions This project has a ton of stuff to include in the head portion of your HTML. With that in mind, our little experiment will require the following code to begin:
Circular Content Carousel with jQuery. Today we want to share a simple circular content carousel with you.
The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the "more" link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original posi View demo Download source Today we want to share a simple circular content carousel with you. The beautiful animal icon set in the ZIP file are by Cyberella and they are licensed under the Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0) License. The HTML Structure.
Make a Rotatable 3D Product Boxshot with Three.js. Home : Articles : Make a Rotatable 3D Product Boxshot with Three.js Tutorial by Matt Doyle | Level: Intermediate | Published on 12 August 2011 Categories: Learn how to use the Three.js JavaScript library to create a 3D rotatable product boxshot in the page.
No Flash required! Works best with Chrome, Firefox, or any other WebGL-enabled browser To say that JavaScript has come a long way in recent years is a bit of an understatement. One area where JavaScript has improved in leaps and bounds is 3D graphics. Building on top of these layers, some enterprising folks have started creating JavaScript libraries that make it easy for the average coder — that is, someone without a degree in computer graphics — to create realistic, animated 3D scenes, right in the browser.