Question

6.1.1 Real World Example: Infographic
Open Resource in New Tab
Infographics are an excellent way to communicate a visual story to the reader.

Check out this example infographic from Custom Made and Gherich & Co. detailing the plastic buildup in our oceans. As the reader scrolls through the page, they read a story explaining the issues surrounding this topic. This visual and interactive form of storytelling engages the reader and helps the storyteller communicate.

What is this story communicating? Is there anything in this infographic that surprises you?

Source:
“Spiraling Out of Control.” CustomMade,
Exercise Project: Tell a Story
10 points
In this project, your task is to create a website that tells a story.

Create a website that tells a story, or teaches the reader something.
Include image filters, animations, and interactions in a way that engages the reader and helps them understand your story.
Avoid repeated CSS code. Use cascading styles wisely.
Your site should have multiple pages for the user to click through in order to tell the story
Read documentation if you get stuck.

6.1.2 Project: Tell a Story:

Answer 1

Brief answers about the infographic, then a detailed plan + examples to help you build the “Tell a Story” website project.

1) About the infographic
- What the story is communicating: it shows how plastic accumulates in the ocean (often in gyres), the scale of plastic waste, sources (single‑use plastics, fishing gear), how it breaks into microplastics, and the environmental/biological consequences (entanglement, ingestion, toxins). It uses a scrolling timeline to reveal facts and images to create a narrative of escalation — “spiraling out of control.”
- Surprising elements many readers notice: the sheer volume and persistence of plastic, how plastics fragment into microplastics, the long time scales (decades/centuries), and how plastic moves and concentrates in particular ocean zones. Also surprising is how much of the problem comes from everyday items and how plastics enter the food chain.

2) Project: “Tell a Story” — goals and checklist
Minimum goals
- A multi‑page website (at least 2–3 pages) that tells a cohesive story or teaches something.
- Use image filters, animations, and interactions to engage the reader.
- Use cascading CSS effectively (avoid repeating rules).
- Responsive and accessible.

Checklist
- Plan your content/story arc (intro → evidence → consequences → call to action).
- Create at least 2 separate HTML pages (index.html, page2.html; can be more).
- Use CSS variables and utility classes to avoid repetition.
- Add filters (CSS filter property), animations (CSS keyframes or transitions), and interactions (hover, click, scroll reveals with Intersection Observer).
- Test on multiple screen sizes and in at least one browser.

3) Ideas for stories (pick one)
- Environmental: plastic in oceans (like the infographic), deforestation, coral bleaching.
- Historical: timeline of a technology (e.g., phones), or a historical event.
- How‑to / tutorial: how composting works, how coffee is produced from farm to cup.
- Personal narrative: a travel story with photos and map interaction.

4) File structure (example)
- /project/
- index.html
- about.html
- resources.html (or article pages)
- css/
- styles.css
- js/
- main.js
- images/
- assets/

5) How to avoid repeated CSS
- Use variables: :root { --accent: #1e90ff; --text: #333; --radius: 8px; }
- Use utility classes for repeated patterns: .btn, .card, .center
- Group shared selectors: header, .hero, .section-title { font-family: ... }
- Consider a small CSS preprocessor (optional) for mixins, but not required.
- Use semantic HTML to minimize class proliferation.

6) Visual techniques to include
- Image filters: CSS filter: grayscale(), sepia(), blur(), contrast(), brightness().
- Example: .muted { filter: grayscale(60%) contrast(0.9) brightness(0.9); }
- Hover interactions: scale, shadow, transform.
- Scroll reveal: fade/slide elements in as they enter viewport (Intersection Observer).
- Parallax: background-attachment or transform on scroll (or simple parallax libraries).
- Animated counters or progress bars to show data growth.
- SVGs and stroke-dashoffset animations for drawing lines.

7) Accessibility & performance
- Provide alt text for images.
- Ensure color contrast and readable font sizes.
- Make keyboard-accessible interactions (focus styles, tabindex for custom controls).
- Lazy-load images (loading="lazy") to improve performance.
- Keep animations subtle and provide a prefers-reduced-motion fallback.

8) Simple starter code examples

index.html (outline)
- link to CSS and JS
- hero with filtered background image
- navigation to other pages (about.html, details.html)
- a few sections that reveal on scroll

CSS (styles.css — concise examples)
/* variables and base */
:root{
--bg:#fff; --text:#222; --accent:#0a84ff; --radius:10px;
}
*{box-sizing:border-box}
body{font-family:system-ui, Arial, sans-serif;color:var(--text);margin:0;background:var(--bg);line-height:1.4}
.container{max-width:1000px;margin:0 auto;padding:2rem}

/* reusable components */
.btn{background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:6px;text-decoration:none;display:inline-block}
.card{background:#fff;border-radius:var(--radius);box-shadow:0 6px 18px rgba(0,0,0,.08);overflow:hidden}

/* image filters */
.hero-img{width:100%;height:60vh;object-fit:cover;filter:grayscale(40%) contrast(1.05) brightness(.95);transition:filter .4s ease}
.hero-img:hover{filter:grayscale(0) contrast(1.05) brightness(1.02)}

/* scroll reveal utilities */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* small animation */
@keyframes pulse{
0%{transform:scale(1); opacity:1}
50%{transform:scale(1.03); opacity:.9}
100%{transform:scale(1); opacity:1}
}
.pulse{animation:pulse 3s ease-in-out infinite}

JS (main.js — intersection observer to reveal)
document.addEventListener('DOMContentLoaded', function(){
const observer = new IntersectionObserver((entries)=>{
entries.forEach(e=>{
if(e.isIntersecting){ e.target.classList.add('visible') }
});
}, {threshold: 0.15});

document.querySelectorAll('.reveal').forEach(el=>observer.observe(el));
});

Example of an interactive filter toggle (user-controlled)
HTML:
<button id="toggleFilter" class="btn">Remove Filter</button>
<img id="mainPhoto" class="hero-img" src="images/ocean.jpg" alt="Ocean">

JS:
const btn = document.getElementById('toggleFilter');
const img = document.getElementById('mainPhoto');
btn.addEventListener('click', () => {
img.classList.toggle('no-filter');
btn.textContent = img.classList.contains('no-filter') ? 'Add Filter' : 'Remove Filter';
});

CSS:
.hero-img.no-filter{ filter: none; transform:scale(1.01); transition:filter .4s, transform .4s }

9) Multi‑page navigation tips
- Use a consistent header/nav across pages. Put nav styles in one CSS file so all pages share them.
- Use relative links: <a href="page2.html">Next</a>.
- For a single‑page alternative, use sections with IDs and link anchors (#section2) and animate scroll behavior (scroll-behavior: smooth).

10) Example story layout for “Plastic in Oceans”
- index.html (overview / hero): big image with filter + short hook + CTA (Next →)
- how-it-accumulates.html (mechanisms & gyres): interactive map or animated SVG showing accumulation
- impacts.html (animals, microplastics): image gallery with hover captions and “reveal on scroll” stats
- how-you-can-help.html (actions & resources): buttons, links, downloadable checklist

11) Where to read docs & useful resources
- MDN Web Docs for HTML/CSS/JS (Intersection Observer, CSS filter, keyframes).
- CSS Tricks for examples (parallax, SVG stroke animations).
- W3C / WebAIM for accessibility guidance.

12) Grading considerations (what instructors usually look for)
- Clear story arc and content quality.
- Use of filters, animations, interactions that add to comprehension (not just decoration).
- Clean, non-repetitive CSS (variables, utility classes).
- Multi-page navigation and coherence between pages.
- Accessibility and responsive design.

If you want, I can:
- Sketch a concrete page-by-page wireframe for your chosen story topic.
- Write a complete starter project with 2 HTML pages, CSS and JS you can copy and paste.
- Review your current files and suggest improvements.

Which would you like next? (Pick: sketch wireframe, full starter code, or review my files.)