# Graphic Novel

{% embed url="<http://miller.submarinechannel.com/en/>" %}

## Peugeot

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

![](https://paper-attachments.dropbox.com/s_A54F8ED994607321E455EC2FD2CE0A77418FAA3DC8B94C18E6E9B284AAA5FC3A_1473504634535_file.png)![](https://paper-attachments.dropbox.com/s_A54F8ED994607321E455EC2FD2CE0A77418FAA3DC8B94C18E6E9B284AAA5FC3A_1473504693870_file.png)![](https://paper-attachments.dropbox.com/s_A54F8ED994607321E455EC2FD2CE0A77418FAA3DC8B94C18E6E9B284AAA5FC3A_1473504744349_file.png)![](https://paper-attachments.dropbox.com/s_A54F8ED994607321E455EC2FD2CE0A77418FAA3DC8B94C18E6E9B284AAA5FC3A_1473504764601_file.png)![](https://paper-attachments.dropbox.com/s_A54F8ED994607321E455EC2FD2CE0A77418FAA3DC8B94C18E6E9B284AAA5FC3A_1473504859605_file.png)![](https://paper-attachments.dropbox.com/s_A54F8ED994607321E455EC2FD2CE0A77418FAA3DC8B94C18E6E9B284AAA5FC3A_1473504817265_file.png)Similar case&#x20;

## SubmarineChannel

{% embed url="<http://miller.submarinechannel.com/en/>" %}

![](https://paper-attachments.dropbox.com/s_A3C78EFC76D10A15AC7CDB5C2EC19E8FBA5151CF634D8EA70744DF5221FFDF0D_1536425377435_image.png)

## SBS the boat

* <http://www.sbs.com.au/theboat/>
* Detecting mouse position on left or right side to change picture angle
* Parallax scrolling
* The maker :<http://gun.net.au/>
* Interview: <https://screendiver.com/directory/the-boat-interactive-graphic-novel-matt-huynh/>
* <https://threejs.org/>
* <http://www.pixijs.com/tutorials> ← great!!
* <https://twitter.com/ktingvoar/status/593240762172706818?lang=en>
* Animating in Animate CC is the easy part. To code them, you'd probs best off starting at the EaselJS demos

![](https://paper-attachments.dropbox.com/s_A3C78EFC76D10A15AC7CDB5C2EC19E8FBA5151CF634D8EA70744DF5221FFDF0D_1508891524854_file.png)![](https://paper-attachments.dropbox.com/s_A3C78EFC76D10A15AC7CDB5C2EC19E8FBA5151CF634D8EA70744DF5221FFDF0D_1508891576725_file.png)![](https://paper-attachments.dropbox.com/s_A3C78EFC76D10A15AC7CDB5C2EC19E8FBA5151CF634D8EA70744DF5221FFDF0D_1508891595792_file.png)
