ARTDM 170, Week 4:
 JavaScript Effects
          Gilbert Guerrero
         gguerrero@dvc.edu
gilbertguerrero.com/blog/artd...
Turn in Homework
         
Put your files in my dropbox

•   Web page with a rollover animation
•   Put files in a folder with your
    lastname and fir...
JavaScript Effects
JavaScript Frameworks
•   Prototype and Scriptaculous
    ‣   http://prototypejs.org
    ‣   http://script.aculo.us
•   jQ...
jQuery
Download http://jquery.com
Create a New Web Page
     Open Dreamweaver
Add CSS and an image
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
 www.w3.org/TR/xhtml1/DTD/xh...
Add jQuery to the page
• Put this between the <head> tags, all on
 one line
 <script type="text/javascript"
     src="js/j...
Hide and Show
$('#box').hide();
$('#box').show();
Example:
<div id="box"><img src="pic1.jpg" /></div>
<a href="#" onclick=...
Toggle
$('#box').toggle();
Example:
<div id="box"><img src="pic1.jpg" /></div>
<a href="#" onclick="$('#box').toggle(); re...
Effects
•   jQuery includes a set of simple,
    standard animations
    ‣   List of effects
Fade Out and Fade In
$('#box').fadeOut(1000);
$('#box').fadeIn(1000);
Animate
$('#box img').animate({width:'90%'}, 1000);
Events
•   jQuery includes a set of methods with
    behaviors that respond to user
    interactions
    ‣   List of events
DOM Ready Function
•   By adding this to the head of your Web
    page you can be sure the elements are
    loaded before ...
Load function
•   We can also use this to show a loading
    animation that disappears when the page
    and all of its im...
Functions
function slide() {
    $imgs.eq( pos++ ).fadeIn(1000, function() {
            if( pos == $imgs.length ){
      ...
Add an overlay to your group
project site
•   Make the overlay open when user
    clicks a button or image
•   Add a close...
Group Projects
...thereʼs one more thing!
Homework due Feb 23
•   Create a Web page with jQuery
    ‣   Make an image fade in, grow, and
        fade out
•   Work o...
Upcoming SlideShare
Loading in...5
×

Artdm170 Week4 Java Script Effects

681

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
681
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Artdm170 Week4 Java Script Effects

    1. 1. ARTDM 170, Week 4: JavaScript Effects Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170/
    2. 2. Turn in Homework  
    3. 3. Put your files in my dropbox • Web page with a rollover animation • Put files in a folder with your lastname and first initial • Example:      smith-h myPage.html anim1.gif
    4. 4. JavaScript Effects
    5. 5. JavaScript Frameworks • Prototype and Scriptaculous ‣ http://prototypejs.org ‣ http://script.aculo.us • jQuery ‣ http://jquery.com
    6. 6. jQuery Download http://jquery.com
    7. 7. Create a New Web Page Open Dreamweaver
    8. 8. Add CSS and an image <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>page title</title> <style type="text/css"> <!-- --> </style> </head> <body> <div id="box"><img src="pic1.jpg" /></div> </body> </html>
    9. 9. Add jQuery to the page • Put this between the <head> tags, all on one line <script type="text/javascript" src="js/jquery-1.4.1.min.js"> </script>
    10. 10. Hide and Show $('#box').hide(); $('#box').show(); Example: <div id="box"><img src="pic1.jpg" /></div> <a href="#" onclick="$('#box').hide(); return false;">Hide</a>  <a href="#" onclick="$('#box').show(); return false;">Show</a> 
    11. 11. Toggle $('#box').toggle(); Example: <div id="box"><img src="pic1.jpg" /></div> <a href="#" onclick="$('#box').toggle(); return false;">Show/Hide</a> 
    12. 12. Effects • jQuery includes a set of simple, standard animations ‣ List of effects
    13. 13. Fade Out and Fade In $('#box').fadeOut(1000); $('#box').fadeIn(1000);
    14. 14. Animate $('#box img').animate({width:'90%'}, 1000);
    15. 15. Events • jQuery includes a set of methods with behaviors that respond to user interactions ‣ List of events
    16. 16. DOM Ready Function • By adding this to the head of your Web page you can be sure the elements are loaded before applying effects to them <script> $(document).ready(function () { //add your functions here }); </script>
    17. 17. Load function • We can also use this to show a loading animation that disappears when the page and all of its images are loaded <script> $(window).load(function () { $('#loadingBox').fadeOut(); }); </script>
    18. 18. Functions function slide() { $imgs.eq( pos++ ).fadeIn(1000, function() { if( pos == $imgs.length ){ pos = 0; $imgs.css("display","none"); } slide(); }); }
    19. 19. Add an overlay to your group project site • Make the overlay open when user clicks a button or image • Add a close button to the overlay to allow the user to close it • Use jQuery
    20. 20. Group Projects ...thereʼs one more thing!
    21. 21. Homework due Feb 23 • Create a Web page with jQuery ‣ Make an image fade in, grow, and fade out • Work on Group Projects • Read Chapter 1: Using Flash and ActionScript 3.0 in the class textbook AS 3.0 Game Programming University • Get ready for Adobe Flash next week
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×