scrolling

刚刚意外再次看到tzangms的部落格，没想到已经过了几年的时间了！因为这段日子对javascript开始有了一些研究，所以对它的Banner scrolling 的特效很感兴趣，就顺手研究了一下它的 js code，没想到这么简单就能做到，不知道该说 jQuery 太厉害了，还是想到这种实作方法的人太聪明呢:P 上面这张是他网站的截图，光是版面的配置以及使用的自制图案来看，其实就看得出小巧精美的一面，不过今天的重点是那个Banner，我对于他可以做到卷动的效果感到很好奇，而实际做法其实也就是想像中这么容易，只是他利用了一个CSS background-position的特性，原来当div的background设定成无限延展的时候（预设），就可以利用把position拉到无限远的地方并搭配 Timer（jQuery可以用animate）设定好一个时间差，然后让页面在这个时间内一直偏移position的值来完成卷动的特效。 最后附上测试用程式码，而图档的部分则是以tzangms的banner为例。

视差滚动效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感

网页设计中的多层视差滚动效果 (Parallax scrolling) 观察上面的图片，里面有三张图片，分别放置于不同阶层，如此可以构成一幅具有简单景深的画面。假设我们将三张图作成由右向左卷动的动画，但背景图片动得比较慢，前景图片动得比较快，我们就可以感受到较符合生活经验的景深效果。 这种效果称为视差滚动(Parallax scrolling)，它是电脑图学中一种特别的滑动特效技巧，首次出现于1982年一款叫Moon Patrol的游戏，主要是用来摸拟3D效果

滚动广告灯箱是在户外广告牌中刚刚崛起的一种新的广告方式。它又称为动换画灯箱(Scrolling Panel)， 采用微电脑控制，以转动卷画的方式依次显示4到12幅不同的广告画面，一组灯箱可同步运行。各画面的停留时间可由客户通过专用控制器键盘精确设定，设定范围1至30秒，运行安静，画面变换平稳顺畅