jquery4u.com - Archives (novembre 2014)
1 jQuery Fan Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets.
The CSS Class selector is very useful when you need to manage or apply CSS styles to multiple elements. Additionally the CSS Selector has performance advantages and can be overloaded. This becomes more exciting when jQuery is used to add/remove or toggle classes. In this screencast, we’ll take a look at how jQuery makes it […]
Continue reading %Video: Playing with jQuery and the CSS Class Selector%
One of the most discussed web design trend of the last few years is the parallax scrolling effect. Whether you like it or not, it is used by a lot of websites. In this tutorial I'll give you a brief introduction to parallax scrolling and show how we can reproduce it in a website using a jQuery plugin called Stellar.js.
What's Parallax Scrolling?
Parallax scrolling involves the background moving at a different rate than the foreground, creating a 3D effect as you scroll down the page. This effect can be a nice addition to any website, but unfortunately if abused it can be quite annoying. From time to time you'll find websites completely powered by this effect and your experience won't be graceful. Because this effect usually animates images in the background, the total weight of the website is heavily increased, resulting in a very slow load. Some examples of such abuse, in my opinion, are the Saukoni website that presented the Kinvara 3, and the well-known Oakley - I am invincible website whose weight is ~20Mb (previously it was ~50Mb!). Now that you have an idea of what this effect looks like, let's see how we can employ Stellar.js to create it.What is Stellar.js?
Stellar.js is a jQuery plugin that allows you to easily add a parallax scrolling effect to your website. Despite the fact that it's no longer maintained, it's still very stable, compatible with the latest versions of jQuery, and a lot of developers employ it in their websites. This jQuery plugin is popular on the jQuery plugin registry, so you may have already heard of it. Now that I've described what this plugin does, let's see how you can use it in your website.Getting Started with Stellar.js
Getting started with Stellar.js is very easy. The first step is to download the plugin and include it in your page. You can obtain Stellar.js by visiting its GitHub repository or through Bower. If you want to employ Bower, you have to type the command:bower install jquery.stellarscript element after you have included jQuery as shown below:
[html]
[/html]
After completing this step you're all set up to adopt a parallax scrolling effect in your pages. This plugin allows you to apply the effect to any scrolling element, for example the window object or any other element you may have. To do that you have to select the element using jQuery's constructor and then invoke the stellar() method on it.
A minimal example that employs this library upon the window object is shown below:
[js]
$('#someElement').stellar();
[/js]
For the window object, the library also provides a nice shorthand, shown below:
[js]
$.stellar();
[/js]
At this point the library will search for any parallax backgrounds or elements within the specified element and reposition them when the element scrolls.Continue reading %An Introduction to Parallax Scrolling Using Stellar.js%
The time has never been better to learn mobile application development. For many app ideas, you don’t even need any prior native development knowledge. You can get started today with knowledge of HTML, CSS and JavaScript. Unlike native mobile development, mobile applications using web technologies can support many mobile platforms.
There are many tools and framework available to help you create Mobile applications. In this article, we’ll look at our top 7.
Continue reading %The Top 7 Hybrid Mobile App Frameworks%