Artdm170 Week4 Java Script Effects

816 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
816
On SlideShare
0
From Embeds
0
Number of Embeds
54
Actions
Shares
0
Downloads
4
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

    ×