Sec. 0 Resource

bootstrap_template(zipped) Assets folder

Sec. 1 HTML and CSS

1_main: Learning HTML and CSS

Sec. 2 bootstrap

2_bootrap(template) 2_bootrap: Using bootstrap as CSS framework

Sec. 3 Fixed Background

3_1 twofixed: Fixed background of two adjacent divs 3_2 fix_content: Fixed background with content over it 3_3 fix_absolute: Fixed background with absolute object over it 3_p1 thinking: long or fixed background

Sec. 5 Affix objects to top

5_1 scroll2fix_bs: affix objects by bootstrap 5_1 Practice: affix 2nd object by bootstrap 5_2: scroll to fix by jquery

Sec. 6 Detect current positions

6_1 Scroll to control status bar 6_1 Practice: Move something from right to left 6_2 Scroll to control video play 6_2 Practice scroll to change images 6_3 Scroll up/down to play different video clips 6_4 Scroll to trigger animation: keyframe 6_5 Scroll to trigger animate.css 6_6 Scroll to tell story with sections

Sec. 7 ScrollSpy: detect current element

Sec. 8 Parallax Scrolling Vertically

8_1 Using id to assign different speed 8_1p Using id to assign different speed 8_2 Using class and each to assign differetn speed 8_3 Using data- to assign position 8_4 Using data- to assign position and speed 8_5 Parallax scrolling with a leading div

Sec. 9 Area map

Interactive Map by mapbox d3: areamap

Sec. 11 Horizontal Scrolling

11_1 Scrolling one div horizontally 11_2 Scrolling 3 divs horizontally 11_3 Scrolling divs horizontally with a vertical scrolling block before

Sec. 12 Scrolling to animate

Sec. 13 Comprehensive

13_1 Scroll to control image opacity