Animation & Effects

Animation & Effects • Using JQuery

What is jQuery? • jQuery is a lightweight, JavaScript library. • The purpose of jQuery is to make it much easier to use JavaScript on your website. (JavaScript - sometimes abbreviated as JS, is a prototype-basedscripting language. JavaScript is used to add functionality to HTML tags like key press and mouse move) • jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. • jQuery also simplifies a lot of the other complicated things from JavaScript.

What is jQuery • Put simply jQuery is a way to capture events from the browser, and then do something when this event occurs. • eg when a user clicks we might want the page to animate or we may want to insert a new class to modify a pages CSS style rules. 3

Using JQuery • To use jQuery the first thing you need to do is download the library and include a reference to it in your document <head> • . There are several ways to do this. You can: • Download the jQuery library from jQuery.com • <script src=”js/jquery-1.9.1.min.js” type=”text/javascript”></script> • Include jQuery from a CDN (Content Delivery Network) like Google (One advantage of this is that many users already have downloaded jQuery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.) • <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 4

jQuery Syntax The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).action() - $ is just an abbreviation for jQuery - (selector) is a “query” to find an HTML id or class - action() is a jQuery method you want to use on that element. Examples: $(this).hide() - hides the current element. $("p").hide() - hides all <p> elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test".

jQuery Selectors jQuery selectors are one of the most important parts of jQuery. Selectors allow you to select and manipulate HTML elements. The three main jQuery selectors you will encounter are element selectors, #id selectors and .class selectors. An element selector selects elements based on the element name. An #id selector uses the id attribute of an HTML tag to find the specific element. A class selector finds elements with a specific class. **All selectors in jQuery start with the dollar sign and parentheses: $().

jQuery Events • What are Events? • All the different visitor's actions that a web page can respond to are called events. • An event represents the precise moment when something happens. • Examples: • moving a mouse over an element • selecting a radio button • clicking on an element • In jQuery, most events have an equivalent jQuery method. • e.g. - To assign a click event to all paragraphs on a page, you can do this: • $(“p").click(); • The next step is to define what should happen when the event ‘fires’. You do this by passing a function to the event: • $("p").click(function(){ • // action goes here!! • }); 7

Commonly Used jQuery Events • click() • The function is executed when the user clicks on an HTML element. • dblclick() • The function is executed when the user double-clicks on an HTML element. • mouseenter() • The function is executed when the mouse pointer enters an HTML element. • mouseleave() • The function is executed when the mouse pointer leaves an HTML element. • mousedown() / mouseup() • The function is executed, when the left mouse button is pressed down / released, while the mouse is over an HTML element. 8

jQuery Effects • Now that we understand the basics of jQuery Selectors and events, we can start to add interactivity to our sites using jQuery effects. • There are two main sorts of effects you will probably find yourself using initially: • Showing / Hiding Content • the show(), hide(), slideUp(), slideDown(), fadeIn() and fadeOut() methods are all pretty self explanatory. • toggle(), slideToggle() and fadeToggle() toggle between visible / invisible states, depending on the current visibility of the element • Manipulating Css Styles • css() — changes the css of an element • addClass() and removeClass() — adds and removes CSS classes 9

EXERCISE 1 Exercise 1 intro to jQuery.

JQuery Plugins • To make life easier there are many JQuery Plugins around. • Plugins are extentions to JQuery framework that let you quickly and easily create specific functionality • Some popular plugins include, galleries, video players, calendars, image sliders & Page Scrollers • http://www.moretechtips.net/2013/03/14-most-popular-jquery-plugins-of.html

EXERCISE 2: Page Scroller Plugin • http://pagescroller.com/ • STEP1: Download the plugin • STEP 2: Add the JS file to your document <head> • STEP3: Initiate the Plugin • STEP 4: Set ‘nav’ element • STEP 5: Add sections (class=“section) to your page

Alternative Page Scrollers • Vertical Scroller • http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/ • Parallax Scrollers • http://smashinghub.com/7-jquery-parallax-and-scrolling-effect-plugins.htm • http://dev.jonraasch.com/scrolling-parallax/docs#.UEdsS0SIv98 • http://jonraasch.com/blog/scrolling-parallax-jquery-plugin

Animation & Effects