IT3115 Instructional Strategy Discovery
Web Trends Workshop: Scrolling Web Panes
goal
Instructional
Strategy
Instructional Activity
Show end
result first
Demonstration
Connectivism
Demonstration
Introduction
Create engagement
Show relevance
Show industry trend
module outcomes
Websites using the scrollpane and
parallax techniques.
Social
Share
Participants share their background
and sites they like
Module 1 Mouse Parallax
Outcome: Assemble a parallax webpage element
Assessment: Element moves with mouse movement and matches the standard
element for the module
Spend time focused on
topic and not set-up
scaffolding
Starter Kit
Provide pre-built starter files with basic
structure
Instructionalism Follow-a-long
Demonstrate a step.
Students complete the step.
reflection
Stop and Share
how this technique could be used in a
design
Module 2 Scroll Peeler
Outcome: Assemble a scroll-peeler webpage
Assessment: Webpage scrolls and matches the standard webpage without errors
Spend time focused on
topic and not set-up
scaffolding
Starter Kit
Provide pre-built starter files with basic
structure
self =>content
Self-paced tutorial
reflection
Stop and share
web-based
how this technique could be used in a
design
Module 3 Scroll Parallax
Outcome: Assemble a scroll-parallax webpage
Assessment: Webpage scrolls with moving animations and matches the standard
webpage without errors
Spend time focused on
topic and not set-up
scaffolding
Starter Kit
Provide pre-built starter files with basic
structure
Challenge,
involve with
content
JS script – Match Game
2 students per group with script handout
and a list of script sections and actions.
Students match list of items to the
script.
Instructionalism
Demonstration
Demonstrate a step.
Students complete the step.
discovery
Do Your Own
Students create element animations
from a list of possible configurations
Module 4 Personal scroll-parallax webpage
Outcome 1: Create design workflow sketches and simple Photoshop comp
Assessment 1: Workflow sketches and comp meet standard
discovery
Create Workflow
Provide flow diagram shapes of paper
and worksheets. Students assign the
workflow steps to the shapes and place
them into a workflow order.
Instructionalism Provide Photoshop base
correct layer set-up
Practice
Create Photoshop Comp
Provide Graphic Library – themes
Students select graphics from library
Module 4 Personal scroll-parallax webpage
Outcome 2: Build a functional webpage from templates based on the personal design
Assessment 2: Webpage has scroll panes, animated elements, is built without errors
and reflects the design
Spend time focused on
topic and not set-up
scaffolding
Starter Kit
Provide pre-built starter files with basic
structure
Practice
Build Webpage
Social Learning
Share Work
Instructionalism
Reference Guide
to take home