Practical prototype and part 41: The information in this book is distributed on an "as is" basis, without warranty Although every pre-caution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. | CHAPTER 10 INTRODUCTION TO EFFECTS 235 is far more focused than the other core effects. It animates the scrolling of the browser viewport to bring the specified element into view. In other words it s a time-lapse version of Prototype s Element scrollTo function. To illustrate this effect let s change the CSS so that our box is below the fold on page load. My viewport isn t very tall so bumping it down 500 pixels will do it. Let s also change the height of the page so that we ll have some space below the box CSS box position absolute width 50px height 50px top 500px left 0 background-color 999 border 2px solid 000 font-family Helvetica Neue text-transform uppercase text-align center line-height 50px font-size 10px body height 1500px JS new box This effect shown in Figure 10-14 simulates the smooth scrolling behavior that s now used in many applications. It helps the reader jump to a different part of the page without losing her original position. 236 CHAPTER 10 INTRODUCTION TO EFFECTS Figure 10-14. animates the viewport s scroll offset. Introduction to Combination Effects We ve only scratched the surface of effects. As I mentioned earlier the true power lies in writing combination effects groups of core effects that run in parallel to create more complex animations. You ll get to write your own effects later on but first let s look at some of the combination effects given to you out of the box. CHAPTER 10 INTRODUCTION TO EFFECTS 237 The first three examples of combination effects illustrate different ways to animate hiding and showing elements each pair is a time-lapse version of Element hide and Element show. There are many different ways to get from visible to invisible. and The first pair and animate the opacity of the element. Thus will decrease the element s opacity until
