├── Ipad Mini ├── index.html ├── index2.html ├── large_a.webm ├── large_b.webm ├── style.css └── utils.js ├── README.md └── iPad Air ├── .DS_Store ├── images ├── .DS_Store ├── 1.jpeg ├── 2.jpeg ├── 3.jpeg ├── 4.jpeg ├── 5.png └── keyboard_logo_svg__ceybeidnzavm_large.svg ├── index.html ├── index2.html ├── style.css └── style2.css /Ipad Mini/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Apple Website iPad Mini Animate 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |

13 | The magic of iPad. 14 | In the palm of your hand. 15 |

16 |
17 |
18 |

19 | Where big ideas 20 |
21 | come to life. 22 |

23 |
24 |
25 |

26 | With power 27 |
28 | that packs a punch. 29 |

30 |
31 |
32 |
33 | 34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | 43 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /Ipad Mini/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Video Scroll experiment 4 | 5 | 67 | 68 | 69 | 70 |
71 | 77 |
78 |
79 |
80 |

81 | Applications for September 2017 entry are now closed. Please see 82 | the FAQ section for application deadlines. 83 |

84 | 85 |

86 | A unique course in the field of theatre and performance practice, 87 | this one-year MA course allows students with a strong, 88 | demonstrable background in performance to re-examine and broaden 89 | their skills in a truly experimental and highly collaborative 90 | framework. 91 |

92 | 93 |

94 | The emphasis throughout the year is on devised and ensemble work, 95 | as you will advance your understanding of performance from a 96 | post-Stanislavski standpoint. 97 |

98 | 99 |

100 | The course, validated by King’s College London, one of the 101 | world’s top 20 universities, explores non-mainstream theatre 102 | craft internationally. Read about some of graduates in the 103 | downloadable PDF 104 |

105 |
106 | 107 |
108 |

109 | The course is built around three strands: 110 |

111 | 112 |

113 | Acting and Performance: Practice and Methodology - Working from 114 | the foundation of the Stanislavski ‘system’, you will be 115 | introduced to the approaches and responses of later practitioners, 116 | including Brecht, Copeau, Meyerhold, and Grotowski. International 117 | historical context is given through exploring the improvisational 118 | and physical practice, developments in experimental theatre 119 | internationally, new writing, and performance since the early 20th 120 | Century. Development of Performance - This dual aspect of the 121 | course builds on your strengths and skills, whilst improving areas 122 | where you are less experienced. The first strand supports you as 123 | you refine and improve your understanding of how to develop as an 124 | individual within an ensemble environment. The second covers vocal 125 | and physical performance training, supplemented by Commedia, 126 | creative writing, improvisation, and singing. Scene Study - Scene 127 | study is woven throughout the course and provides a forum for you 128 | to develop and experiment with the techniques you are learning. 129 |

130 |
131 | 132 |
133 |

Course Details

134 |

135 | Our full time, three-year BA in Acting (conservatoire training) 136 | develops a high level of technical facility, flexibility, 137 | individuality and imagination. The training provides skills in 138 | acting, voice, singing and movement, and students apply these 139 | skills in a wide variety of media including theatre, television, 140 | film and radio. 141 |

142 |
143 | 144 |
145 |

The Program

146 |

147 | The training is classically based because we believe this provides 148 | the best foundation for acting in any form or media. However, the 149 | training also includes a thorough grounding in contemporary plays 150 | and styles as well as classes in camera and microphone technique. 151 | Your work will be continuously assessed with extensive individual 152 | feedback through regular sessions, written reports, and one-to-one 153 | tutorials. 154 |

155 |
156 | 157 |
158 |

The Program

159 |

160 | The training is classically based because we believe this provides 161 | the best foundation for acting in any form or media. However, the 162 | training also includes a thorough grounding in contemporary plays 163 | and styles as well as classes in camera and microphone technique. 164 | Your work will be continuously assessed with extensive individual 165 | feedback through regular sessions, written reports, and one-to-one 166 | tutorials. 167 |

168 |
169 | 170 |
171 |

The Program

172 |

173 | The training is classically based because we believe this provides 174 | the best foundation for acting in any form or media. However, the 175 | training also includes a thorough grounding in contemporary plays 176 | and styles as well as classes in camera and microphone technique. 177 | Your work will be continuously assessed with extensive individual 178 | feedback through regular sessions, written reports, and one-to-one 179 | tutorials. 180 |

181 |
182 | 183 |
184 |

The Program

185 |

186 | The training is classically based because we believe this provides 187 | the best foundation for acting in any form or media. However, the 188 | training also includes a thorough grounding in contemporary plays 189 | and styles as well as classes in camera and microphone technique. 190 | Your work will be continuously assessed with extensive individual 191 | feedback through regular sessions, written reports, and one-to-one 192 | tutorials. 193 |

194 |
195 | 196 |
197 |

The Program

198 |

199 | The training is classically based because we believe this provides 200 | the best foundation for acting in any form or media. However, the 201 | training also includes a thorough grounding in contemporary plays 202 | and styles as well as classes in camera and microphone technique. 203 | Your work will be continuously assessed with extensive individual 204 | feedback through regular sessions, written reports, and one-to-one 205 | tutorials. 206 |

207 |
208 | 209 |
210 |

The Program

211 |

212 | The training is classically based because we believe this provides 213 | the best foundation for acting in any form or media. However, the 214 | training also includes a thorough grounding in contemporary plays 215 | and styles as well as classes in camera and microphone technique. 216 | Your work will be continuously assessed with extensive individual 217 | feedback through regular sessions, written reports, and one-to-one 218 | tutorials. 219 |

220 |
221 | 222 |
223 |

The Program

224 |

225 | The training is classically based because we believe this provides 226 | the best foundation for acting in any form or media. However, the 227 | training also includes a thorough grounding in contemporary plays 228 | and styles as well as classes in camera and microphone technique. 229 | Your work will be continuously assessed with extensive individual 230 | feedback through regular sessions, written reports, and one-to-one 231 | tutorials. 232 |

233 |
234 | 235 |
236 |

The Program

237 |

238 | The training is classically based because we believe this provides 239 | the best foundation for acting in any form or media. However, the 240 | training also includes a thorough grounding in contemporary plays 241 | and styles as well as classes in camera and microphone technique. 242 | Your work will be continuously assessed with extensive individual 243 | feedback through regular sessions, written reports, and one-to-one 244 | tutorials. 245 |

246 |
247 | 248 |
249 |

The Program

250 |

251 | The training is classically based because we believe this provides 252 | the best foundation for acting in any form or media. However, the 253 | training also includes a thorough grounding in contemporary plays 254 | and styles as well as classes in camera and microphone technique. 255 | Your work will be continuously assessed with extensive individual 256 | feedback through regular sessions, written reports, and one-to-one 257 | tutorials. 258 |

259 |
260 | 261 |
262 |

The Program

263 |

264 | The training is classically based because we believe this provides 265 | the best foundation for acting in any form or media. However, the 266 | training also includes a thorough grounding in contemporary plays 267 | and styles as well as classes in camera and microphone technique. 268 | Your work will be continuously assessed with extensive individual 269 | feedback through regular sessions, written reports, and one-to-one 270 | tutorials. 271 |

272 |
273 |
274 |
275 |
276 | 277 | 298 | 299 | 300 | -------------------------------------------------------------------------------- /Ipad Mini/large_a.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heqingsong/Animate/93e5d233bd24b0f55ebd1d12df3a25068a4a81f2/Ipad Mini/large_a.webm -------------------------------------------------------------------------------- /Ipad Mini/large_b.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heqingsong/Animate/93e5d233bd24b0f55ebd1d12df3a25068a4a81f2/Ipad Mini/large_b.webm -------------------------------------------------------------------------------- /Ipad Mini/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f5f5f7; 3 | margin: 0; 4 | } 5 | 6 | h2 { 7 | font-family: Arial, sans-serif; 8 | color: #1d1d1f; 9 | font-size: 48px; 10 | line-height: 1.0834933333; 11 | font-weight: 600; 12 | } 13 | 14 | strong { 15 | color: transparent; 16 | text-fill-color: transparent; 17 | box-decoration-break: clone; 18 | } 19 | 20 | main { 21 | position: relative; 22 | } 23 | 24 | .sticky { 25 | position: sticky; 26 | top: 0px; 27 | height: 100vh; 28 | overflow: hidden; 29 | } 30 | 31 | .content { 32 | position: absolute; 33 | width: 100%; 34 | z-index: -1; 35 | top: 110vh; 36 | } 37 | 38 | section { 39 | margin-left: auto; 40 | margin-right: auto; 41 | width: 980px; 42 | } 43 | 44 | section:nth-child(1), 45 | .timeline-1 { 46 | height: 100vh; 47 | } 48 | section:nth-child(2), 49 | .timeline-2 { 50 | height: 90vh; 51 | } 52 | section:nth-child(3), 53 | .timeline-3 { 54 | height: 270vh; 55 | } 56 | 57 | section .title-1 { 58 | width: 470px; 59 | } 60 | section .title-1 strong { 61 | background: linear-gradient( 62 | 90deg, 63 | rgb(112, 43, 252) 0%, 64 | rgb(242, 59, 255) 100%, 65 | rgb(255, 112, 118) 200%, 66 | rgb(29, 29, 31) 300% 67 | ); 68 | background-clip: text; 69 | -webkit-background-clip: text; 70 | } 71 | 72 | section .title-1 span { 73 | display: inline-block; 74 | width: 320px; 75 | } 76 | section .title-2 strong { 77 | background-image: linear-gradient( 78 | 90deg, 79 | rgb(237, 24, 106) 0%, 80 | rgb(255, 103, 0) 100%, 81 | rgb(255, 203, 57) 200%, 82 | rgb(29, 29, 31) 300% 83 | ); 84 | background-clip: text; 85 | -webkit-background-clip: text; 86 | } 87 | section .title-3 strong { 88 | background-image: linear-gradient( 89 | 90deg, 90 | rgb(0, 158, 119) 0%, 91 | rgb(0, 153, 192) 100%, 92 | rgb(2, 127, 255) 200%, 93 | rgb(88, 86, 214) 300%, 94 | rgb(29, 29, 31) 400% 95 | ); 96 | background-clip: text; 97 | -webkit-background-clip: text; 98 | } 99 | 100 | .media-wrapper { 101 | display: flex; 102 | height: 100vh; 103 | width: 50%; 104 | left: 50%; 105 | align-items: flex-end; 106 | justify-content: center; 107 | } 108 | 109 | .media-wrapper canvas { 110 | display: block; 111 | position: absolute; 112 | width: auto; 113 | height: auto; 114 | bottom: 0; 115 | left: 50%; 116 | transform: translateX(-23%); 117 | max-height: 100vh; 118 | } 119 | 120 | .timeline-wrapper { 121 | position: relative; 122 | z-index: 1; 123 | margin-top: -100vh; 124 | } 125 | 126 | .loading { 127 | position: fixed; 128 | left: 0; 129 | top: 0; 130 | z-index: 3; 131 | width: 100vw; 132 | height: 50vh; 133 | background-color: rgba(0, 0, 0, 0.5); 134 | color: #fff; 135 | font-size: 20px; 136 | text-align: center; 137 | padding-top: 50vh; 138 | } 139 | -------------------------------------------------------------------------------- /Ipad Mini/utils.js: -------------------------------------------------------------------------------- 1 | function createVideo(url) { 2 | const video = document.createElement("video"); 3 | 4 | video.src = url; 5 | video.muted = true; 6 | video.playbackRate = 1; 7 | video.currentTime = 0; 8 | video.setAttribute("muted", ""); 9 | video.setAttribute("playsinline", ""); 10 | video.setAttribute("type", "video/webm"); 11 | video.setAttribute("preload", "none"); 12 | video.classList.add("video"); 13 | video.style.display = "none"; 14 | window.document.body.appendChild(video); 15 | 16 | return video; 17 | } 18 | 19 | function createFrame(video, videoWidth, videoHeight) { 20 | const canvas = window.OffscreenCanvas 21 | ? new OffscreenCanvas(videoWidth, videoHeight) 22 | : document.createElement("canvas"); 23 | const context = canvas.getContext("2d"); 24 | 25 | canvas.width = videoWidth; 26 | canvas.height = videoHeight; 27 | context.drawImage(video, 0, 0, videoWidth, videoHeight); 28 | 29 | return canvas; 30 | } 31 | 32 | function cacheFrame(videoMetaData) { 33 | return new Promise((resolve, reject) => { 34 | const { url, frameCount } = videoMetaData; 35 | const video = createVideo(url); 36 | const framsStore = new Array(frameCount).fill(false); 37 | let videoWidth = 0; 38 | let videoHeight = 0; 39 | let setIn = 0; 40 | let framsNumber = 0; 41 | 42 | video.play(); 43 | video.addEventListener("loadedmetadata", (res) => { 44 | videoWidth = video.videoWidth; 45 | videoHeight = video.videoHeight; 46 | }); 47 | 48 | video.addEventListener("ended", () => { 49 | resolve(framsStore); 50 | }); 51 | 52 | video.addEventListener("waiting", (res) => { 53 | clearInterval(setIn); 54 | }); 55 | 56 | video.addEventListener("error", () => { 57 | reject([]); 58 | }); 59 | 60 | video.addEventListener("canplaythrough", (res) => { 61 | clearInterval(setIn); 62 | 63 | setIn = setInterval(() => { 64 | if (framsNumber >= frameCount) clearInterval(setIn); 65 | 66 | framsStore[framsNumber] = createFrame(video, videoWidth, videoHeight); 67 | framsNumber++; 68 | }, fps); 69 | }); 70 | }); 71 | } 72 | 73 | function renderFrame(ctx, frame) { 74 | ctx.clearRect(0, 0, 1600, 1176); 75 | ctx.drawImage(frame, 0, 0); 76 | } 77 | 78 | function showLoading() { 79 | const div = document.createElement("div"); 80 | div.classList.add("loading"); 81 | div.innerText = "file loading ..."; 82 | document.body.appendChild(div); 83 | } 84 | 85 | function hideLoading() { 86 | document.querySelector(".loading").remove(); 87 | } 88 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Animate Demo 2 | 3 | ## Ipad Mini 4 | 5 | [iPad Mini](https://heqingsong.github.io/Animate/Ipad%20Mini/index.html) 6 | 7 | ## iPad Air 8 | 9 | [iPad Air](https://heqingsong.github.io/Animate/iPad%20Air/index2.html) 10 | -------------------------------------------------------------------------------- /iPad Air/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heqingsong/Animate/93e5d233bd24b0f55ebd1d12df3a25068a4a81f2/iPad Air/.DS_Store -------------------------------------------------------------------------------- /iPad Air/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heqingsong/Animate/93e5d233bd24b0f55ebd1d12df3a25068a4a81f2/iPad Air/images/.DS_Store -------------------------------------------------------------------------------- /iPad Air/images/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heqingsong/Animate/93e5d233bd24b0f55ebd1d12df3a25068a4a81f2/iPad Air/images/1.jpeg -------------------------------------------------------------------------------- /iPad Air/images/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heqingsong/Animate/93e5d233bd24b0f55ebd1d12df3a25068a4a81f2/iPad Air/images/2.jpeg -------------------------------------------------------------------------------- /iPad Air/images/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heqingsong/Animate/93e5d233bd24b0f55ebd1d12df3a25068a4a81f2/iPad Air/images/3.jpeg -------------------------------------------------------------------------------- /iPad Air/images/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heqingsong/Animate/93e5d233bd24b0f55ebd1d12df3a25068a4a81f2/iPad Air/images/4.jpeg -------------------------------------------------------------------------------- /iPad Air/images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heqingsong/Animate/93e5d233bd24b0f55ebd1d12df3a25068a4a81f2/iPad Air/images/5.png -------------------------------------------------------------------------------- /iPad Air/images/keyboard_logo_svg__ceybeidnzavm_large.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 12 | 16 | 18 | 21 | 23 | 26 | 28 | 31 | 34 | 38 | 40 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /iPad Air/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | apple air 8 | 9 | 10 | 11 |
12 |
13 |
14 | product 15 |

Silver

16 |
17 |
18 |
19 |
20 | product 21 |

22 | Space
23 | Gray 24 |

25 |
26 |
27 |
28 |
29 | product 30 |

Rose Gold

31 |
32 |
33 |
34 |
35 | product 36 |

Green

37 |
38 |
39 |
40 |
41 | product 42 |

43 | and
44 | Sky Blue 45 |

46 |
47 |
48 |
49 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /iPad Air/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | apple air 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 23 | 24 | 30 | 31 | 32 | 35 | 36 | 37 | 45 | 46 | 47 | 54 | 55 | 56 | 60 | 61 | 62 | 63 | Silver 64 | 65 | 66 | 67 | 68 | 69 | Space 70 | Gray 71 | 72 | 73 | 74 | 75 | 76 | Rose Gold 77 | 78 | 79 | 80 | 81 | Green 82 | 83 | 84 | 85 | 86 | 87 | and 88 | Sky Blue 89 | 90 | 91 | 92 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /iPad Air/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | height: 900vh; 5 | } 6 | 7 | .wrapper { 8 | position: sticky; 9 | top: 0; 10 | width: 100%; 11 | height: 100vh; 12 | overflow: hidden; 13 | } 14 | 15 | .pages { 16 | width: 100%; 17 | height: 100vh; 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | } 22 | 23 | .wrapper .pages:nth-child(1) { 24 | z-index: 1; 25 | } 26 | 27 | .wrapper .pages:nth-child(2) { 28 | z-index: 2; 29 | } 30 | 31 | .wrapper .pages:nth-child(3) { 32 | z-index: 3; 33 | } 34 | 35 | .wrapper .pages:nth-child(4) { 36 | z-index: 4; 37 | } 38 | 39 | .wrapper .pages:nth-child(5) { 40 | z-index: 5; 41 | } 42 | 43 | .wrapper .pages:nth-child(2), 44 | .wrapper .pages:nth-child(3), 45 | .wrapper .pages:nth-child(4), 46 | .wrapper .pages:nth-child(5) { 47 | clip-path: inset(100% 0px 0px 0px); 48 | } 49 | 50 | .product { 51 | position: relative; 52 | height: 100vh; 53 | display: flex; 54 | align-items: center; 55 | justify-content: center; 56 | } 57 | .product img { 58 | max-height: 90%; 59 | } 60 | 61 | .product h1 { 62 | position: absolute; 63 | left: 65vw; 64 | top: 40vh; 65 | 66 | font-size: 56px; 67 | line-height: 1.07143; 68 | font-weight: 600; 69 | letter-spacing: -0.005em; 70 | font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", 71 | "Arial", sans-serif; 72 | } 73 | .item-1 { 74 | background-color: #e3e4e5; 75 | color: #757576; 76 | } 77 | .item-2 { 78 | background-color: #7e7f83; 79 | color: #dedede; 80 | } 81 | .item-3 { 82 | background-color: #f8d3cc; 83 | color: #b0304e; 84 | } 85 | .item-4 { 86 | background-color: #d2e4ce; 87 | color: #04756e; 88 | } 89 | .item-5 { 90 | background-color: #cad9e5; 91 | color: #142864; 92 | } 93 | -------------------------------------------------------------------------------- /iPad Air/style2.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --ratio: calc(768px / 100vw); 3 | } 4 | 5 | body { 6 | padding: 0; 7 | margin: 0; 8 | height: 600vh; 9 | } 10 | 11 | svg { 12 | --scrolled: 0; 13 | position: fixed; 14 | width: 100%; 15 | height: 100%; 16 | top: 0; 17 | left: 0; 18 | } 19 | 20 | .bg { 21 | x: 0; 22 | y: 35vh; 23 | width: 100%; 24 | } 25 | 26 | g rect { 27 | x: 0; 28 | y: 0; 29 | width: 100%; 30 | height: 100vh; 31 | } 32 | 33 | g image { 34 | x: 45%; 35 | y: 5vh; 36 | transform: translateX(-10%); 37 | height: 90vh; 38 | } 39 | 40 | g text { 41 | transform: translate(60vw, 50vh); 42 | font-size: 56px; 43 | line-height: 1.07143; 44 | font-weight: 600; 45 | letter-spacing: -0.005em; 46 | font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", 47 | "Arial", sans-serif; 48 | } 49 | 50 | path { 51 | fill: none; 52 | stroke: white; 53 | stroke-linecap: round; 54 | stroke-linejoin: round; 55 | stroke-width: 0.5; 56 | stroke-dasharray: 8 8; 57 | } 58 | 59 | #mask1 path { 60 | stroke-dashoffset: calc(8 - 8 * (min(var(--scrolled), 0.15) * 4)); 61 | } /* 0 */ 62 | 63 | #mask2 path { 64 | stroke-dashoffset: calc( 65 | max(0, 8 * (1 - (max(var(--scrolled), 0.15) - 0.15) * 4)) 66 | ); 67 | } /* 0.15 */ 68 | 69 | #mask3 path { 70 | stroke-dashoffset: calc( 71 | max(0, 8 * (1 - (max(var(--scrolled), 0.35) - 0.35) * 4)) 72 | ); 73 | } /* 0.35 */ 74 | 75 | #mask4 path { 76 | stroke-dasharray: 7 11; 77 | stroke-dashoffset: calc( 78 | max(0, 8 * (1 - (max(var(--scrolled), 0.55) - 0.55) * 4)) 79 | ); 80 | } /* 0.55 */ 81 | 82 | #mask5 path { 83 | stroke-width: 1; 84 | stroke-dasharray: 30 29; 85 | stroke-dashoffset: calc( 86 | max(0, 30 * (1 - (max(var(--scrolled), 0.79) - 0.79) * 4)) 87 | ); 88 | } /* 0.79 */ 89 | --------------------------------------------------------------------------------