Web Tutorials

Slides and Materials

Download all matrials Web108 Rundown (Slide) Web02. HTML+CSS (Slide) Web03. Intro. to Bootstrap (Slide) Web04. jQuery (Slide) Web05. Scrolling (Slide) d3 basic (Slide) geo map

Useful resources

getbootstrap starter template jquery cdn W3.CSS templates BS: bootstrap templates: w3school BS: bootstrap templates II CSS: box-shadow examples CSS: box-shadow generators CSS: animate.css CSS: keyframe animation generator svg drawer I svg drawer II svg drawer III Map: geojson drawer Fullpage: reveal.js Fullpage.js

Sec. 1 HTML and CSS

1_main: Learning HTML and CSS

Sec. 2 CSS

2_2_images_vignnete.html

Sec. 3 Bootstrap

3_0_bs_template.html 3_0_bootstrap_basic.html 3_1_bs_images.html: Displaying images by bootstrap 3_2 twofixed: Fixed background of two adjacent divs 3_3 fix_content: Fixed background with content over it 3_p1 thinking: long or fixed background An Example: Using bootstrap as CSS framework

Sec. 4 jquery

4_1 jqeury for index.html

4_2 scroll2fix_bs: affix objects by bootstrap 4_2p Practice: affix 2nd object by bootstrap 4_3: scroll to fix by jquery 4_4_scrolll to fix by bs4

Sec. 5 Scrolling detection

5_1 Scroll to control status bar 5_1p Practice: Move something from right to left 5_2 Scroll to control video play 5_2 Practice scroll to change images: Using jquery array 5_3 Scroll up/down to play different video clips 5_4 Scroll to trigger animate.css 5_5 Scroll to trigger animation: keyframe 5_5_1 Scroll to trigger animation: keyframe2 (WAIT)13_4 Scrolling to trigger animation from different directions: Comic players 5_6 Scroll to tell story with sections:trigger multiple movies by sections 5_7 Media query 5_8 Scrollspy detect divs 5_9 Scrollspy by waypoints

Sec. 6 Chart presentation

6_1 Animating chart: the simplest method 6_2 Animate_chart_keyframe 6_3_animate_chart_js

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 different 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 8_6 Parallax comprehensive 8_7 Parallax scrolling with vh

Sec. 9 Area map

Interactive Map by mapbox d3: scrolling map d3_3: areamap for population density d3_4: areamap for population density by index (Better))

Sec. 10 Reading data

Reading data from a published google sheet. Loading data by AJAX

Sec. 11 Horizontal Scrolling

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

Sec. 12 Scrolling to animate

12_1 animate storytelling 12_2 animate storytelling 2 12_3 animate storytelling 3 12_4 animate storytelling 4 12_5 animate storytelling 5(Graphic Novel) 12_6 animate storytelling 6 by transform?

Sec. 13 Comprehensive

13_1 Scroll to control image opacity 13_2 Scroll single div 1 13_3 Scroll single div 2 13_4 Search keywords by jquery 13_4 Scrolling to trigger animation from different directions: Comic players 13_5 Animating svg by scrolling 13_6 Triggering svg by scrolling

Sec. 14 Playing multimedia

14_1 Scroll to stop video playing

Sec. 15 d3.js

d3_1 Basic: Display bart chart by d3.js

Appendix: Great Examples

ex_1 parallax + detecting in viewPort div

Web storytelling