You are previewing Supercharged JavaScript Graphics.

Supercharged JavaScript Graphics

Cover of Supercharged JavaScript Graphics by Raffaele Cecco Published by O'Reilly Media, Inc.
  1. Supercharged JavaScript Graphics
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Audience and Assumptions
      2. Organization
      3. Conventions Used in This Book
      4. Using Code Examples
      5. Safari® Books Online
      6. How to Contact Us
      7. Acknowledgments
    3. 1. Code Reuse and Optimization
      1. Keeping It Fast
      2. What and When to Optimize
      3. Homespun Code Profiling
      4. Optimizing JavaScript
      5. Optimizing jQuery and DOM Interaction
      6. Other Resources
    4. 2. DHTML Essentials
      1. Creating DHTML Sprites
      2. Converting into a jQuery Plug-in
      3. Timers, Speed, and Frame Rate
      4. Internet Explorer 6 Background Image Caching
    5. 3. Scrolling
      1. CSS-Only Scrolling Effects
      2. Scrolling with JavaScript
    6. 4. Advanced UI
      1. HTML5 Forms
      2. Using JavaScript UI Libraries
      3. Creating UI Elements from Scratch
    7. 5. Introduction to JavaScript Games
      1. Game Objects Overview
      2. The Game Code
    8. 6. HTML5 Canvas
      1. Canvas Support
      2. Bitmaps, Vectors, or Both?
      3. Canvas Limitations
      4. Canvas Versus SVG
      5. Canvas Versus Adobe Flash
      6. Canvas Exporters
      7. Canvas Drawing Basics
      8. Animating with Canvas
      9. Canvas and Recursive Drawing
      10. Replacing DHTML Sprites with Canvas Sprites
      11. A Graphical Chat Application with Canvas and WebSockets
    9. 7. Vectors for Games and Simulations
      1. Operations on Vectors
      2. Creating a JavaScript Vector Object
      3. A Cannon Simulation Using Vectors
      4. Rocket Simulation
    10. 8. Google Visualizations
      1. Limitations
      2. Chart Glossary
      3. Image Charts
      4. Interactive Charts
    11. 9. Reaching the Small Screen with jQuery Mobile
      1. jQuery Mobile
      2. TilePic: A Mobile-Friendly Web Application
      3. PhoneGap
    12. 10. Creating Android Apps with PhoneGap
      1. Installing PhoneGap
      2. Creating a PhoneGap Project in Eclipse
    13. Index
    14. About the Author
    15. Colophon
    16. SPECIAL OFFER: Upgrade this ebook with O’Reilly

Chapter 3. Scrolling

Browser scrolling is the typically mundane action of moving scroll bars up and down or left and right. You use scrolling to move a viewport over content that is too long to view in its entirety within the confines of the browser window or designated browser element. In this chapter, we will examine more graphically creative uses of scrolling, initially from a purely CSS perspective, and then move on to more advanced scrolling effects that JavaScript makes possible.

Why even bother covering CSS scrolling in a book about JavaScript graphics? One reason is to highlight the limitations of using just CSS versus programmed effects in JavaScript. In addition, you can add some nice touches with just CSS, and those are worth investigating.

CSS-Only Scrolling Effects

CSS can provide some basic control of scrolling content, which you can use to good effect. In the atmospheric Retro Theater sample on the CSS Zen Garden website (Figure 3-1), the main website content within the cinema screen is surrounded by div elements that contain the cinema architecture images. As the user moves the browser’s vertical scroll bar, the main website content within the cinema screen (the viewport) is transformed into what appears to be black-and-white movie credits that move vertically.

This simple but effective use of CSS in Retro Theater by Eric Rogé creates a convincing scrolling cinema screen effect ()

Figure 3-1. This simple but effective use of CSS in Retro Theater by Eric Rogé creates a convincing scrolling ...

The best content for your career. Discover unlimited learning on demand for around $1/day.