📕
HTML
  • Course Materials
  • Tools for web basic
  • CodePen Examples
  • WEB1101
    • Rundown1101
    • Video Tutorials
    • Slides
  • HTML and CSS
    • HTML
    • CSS - basic
    • CSS - Object Decoration
    • CSS - Media Query
    • CSS-background-fixed
    • Positioning-sticky
    • Bootstrap
      • Grid and spacing
      • Useful Components
      • Component Cheatsheet
  • jquery
    • jquery basic
    • stick top
    • Progress-status bar
    • Parallax Scrolling
  • Design
    • Works by sketching
    • Movie Control
  • Case Studies
    • Great-cases
      • The Snow Fall
    • Case Studies by students
    • TW Digital 2019
    • Graphic Novel
    • Infographic
    • Ideas bottom-up by skills
    • News media outlet
  • Web1091
    • Student works 1091
    • Rundown1091
  • Appendix
    • The Color
    • File directory (Path)
    • Deployment
  • Data journalism
    • Data-Driven News Reports
Powered by GitBook
On this page
  • Peugeot
  • SubmarineChannel
  • SBS the boat

Was this helpful?

  1. Case Studies

Graphic Novel

PreviousTW Digital 2019NextInfographic

Last updated 4 years ago

Was this helpful?

Peugeot

  • 打破一個窗戶，只讓窗戶碎片和背景輕微移動，在捲動的同時帶來一種破窗的動感，圖片也些微旋轉，讓主角有往下跳的感覺，但事實上全部是靜態圖片，真的很厲害。包含開車、電梯向上、位移主角產生走動、替換圖片產生開燈的感覺。

SubmarineChannel

SBS the boat

  • Detecting mouse position on left or right side to change picture angle

  • Parallax scrolling

  • Animating in Animate CC is the easy part. To code them, you'd probs best off starting at the EaselJS demos

Similar case

The maker :

Interview:

← great!!

http://www.sbs.com.au/theboat/
http://gun.net.au/
https://screendiver.com/directory/the-boat-interactive-graphic-novel-matt-huynh/
https://threejs.org/
http://www.pixijs.com/tutorials
https://twitter.com/ktingvoar/status/593240762172706818?lang=en
http://graphicnovel-hybrid4.peugeot.com/start.html
De Might of Mister Miller - an e-book trailer
De Might of Mister Miller - an e-book trailer