Web storytelling

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:

1. HTML, CSs, and Bootstrap

• Learning HTML and CSS:
• Bootstrap basic example: container and grid:
• Bootstrap refernece: essential components:
• Boostrap reference: image styling:

2. Background-attachment-fixed

• 2_1_bg_fixed: fixing background-image (two sections)
• 2_2_bg_fixed_content: with content over it
• 2_3_bg_fixed_practice: more examples
• 2_4_bg_fixed_idea: to create leveled long-form style

3. Sticky-top

• 3_1_sticky_top_bs4: sticky one section
• 3_2_sticky_top_sections: sticky more sections:
• 3_3_sticky_top_sections_imgs: sticky sections with images
• 3_4_sticky_top_sections_comprehension.html: sticky-top to control audience reading time: A comprehension

4. jquery basic

• 4_1_why_document_ready:
• 4_2_jquery_media_query:
• 4_3_sticky_top_jquery_add_remove_class:

5. jquery-application

Progress-bar, scrolling horizontally

• 5_1_progress_bar:
• 5_1_progress_bar_bg_fixed_sticky_top:
• 5_2_move_obj_horizontally.html:
• 5_3_move_objs_explaining_relative_absolute_position:
• 5_4_scroll_move_horizontal_scroll:
• 5_5_scroll_move_horizontal_scroll_with_banner:
• 5_6_horizontal_scroll_within_section:

V. Video storytelling

• v_1_scrolled_video:
• v_2_scrolled_video_with_content:
• v_3_scroll_to_trigger_video:
• v_4_scroll_trigger_mov_waypoints:
• v_5_scroll_trigger_mov_play_one_time_control: Need to implement
• v_6_scroll_change_status_play_videos:
• v_7_loading_video.html

6. Scroll to trigger

• 6_1_scroll_trigger_animate_css: See codepen
• 6_2_scroll_trigger_to_animate_keyframe.html: See codepen
• 6_2p_scroll_trigger_animate_keyframe.html:
• 6_3_scroll_trigger_animate_fullpage.html:
• 6_4_scroll_trigger_text_bg:
• 6_5_scroll_change_image.html:
• 6_6_scroll_change_imgs_sticky_top:
• 6_7_scrollspy_div:
• 6_8_trigger_comic_player:

7. Chart presentation and Data

• 7_1 Animating chart: the simplest method:
• 7_2 Animate_chart_keyframe:
• 7_3_animate_chart_js:
• 7_4_generating:
• 7_5_sheetData: Reading data from a published google sheet
• 7_6_jqAJAX: Loading data by AJAX

8. Parallax Scrolling basic

Using id, class, and data-attribute to assign different speeds to differetn objects.

• 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: to fix
• 8_7 Parallax scrolling with 3 vh:

9. Scrolled control II

Moving large-bg, Changing opacity

• 9_1_scrolled_opacity.html:
• 9_2_scrolled_opacity_change_imgs:
• 9_3_scrolled_opacity_zoom_move:
• 9_4_scrolled_opacity_zoom_move02:
• 9_5_scroll_move_large_bg: Scroll to move very large image back
• 9_6_scrolled_parallax_images: with a vertical scrolling block before
• 9_7_scrolled_svg: Scrolling and moving with svg

10. Map and GIS

• 10_1_mapbox: Interactive Map by mapbox
• d3: scrolling map:
• d3_areamap_1: areamap for population density:
• d3_areamap_2: areamap for population density:

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. 15 d3.js

• d3_1 Basic: Display bart chart by d3.js:

Appendix: Great Examples

• ex_1 parallax + detecting in viewPort div: