├── README.md ├── css ├── component.css ├── demo.css └── normalize.css ├── favicon.ico ├── img ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg ├── 9.jpg └── dmaps │ ├── 2048x2048 │ ├── clouds.jpg │ ├── crystalize.jpg │ ├── fibers.jpg │ ├── pointilize.jpg │ ├── ripple.jpg │ └── ripple_2.jpg │ └── 512x512 │ ├── clouds.jpg │ ├── crystalize.jpg │ ├── fibers.jpg │ ├── pointilize.jpg │ ├── ripple.jpg │ └── ripple_2.jpg ├── index.html ├── index2.html ├── index3.html ├── index4.html ├── index5.html ├── js ├── TweenMax.min.js ├── demo.js ├── imagesloaded.pkgd.min.js ├── main.js ├── main2.js ├── main3.js ├── main4.js ├── main5.js └── pixi.min.js └── pater ├── hotjar.png └── pater.css /README.md: -------------------------------------------------------------------------------- 1 | # Liquid Distortion Slideshow 2 | 3 | A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP. By Yannis Yannakopoulos. 4 | 5 | ![Image Title](link) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=32454) 8 | 9 | [Demo](https://tympanus.net/Development/LiquidDistortion/) 10 | 11 | ## Credits 12 | 13 | - [PixiJS](http://www.pixijs.com/) 14 | - [GSAP](https://greensock.com/gsap) 15 | - Images from [Unsplash](https://unsplash.com/) 16 | 17 | ## License 18 | This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used. 19 | 20 | ## Misc 21 | 22 | Follow Yannis: [Twitter](https://twitter.com/neundex) 23 | 24 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/) 25 | 26 | [© Codrops 2017](http://www.codrops.com) 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | canvas { 2 | display: block; 3 | position: absolute; 4 | left: 0; 5 | top: 0; 6 | } 7 | 8 | .scene-nav { 9 | font-size: 1.15em; 10 | position: fixed; 11 | top: 50%; 12 | transform: translateY(-50%); 13 | z-index: 10; 14 | background: none; 15 | border: 0; 16 | right: 0; 17 | padding: 1.5em; 18 | color: var(--color-nav); 19 | } 20 | 21 | .scene-nav:focus { 22 | outline: none; 23 | } 24 | 25 | .scene-nav--prev { 26 | left: 0; 27 | } 28 | 29 | .slide-wrapper { 30 | display: none; 31 | } 32 | 33 | .icon--arrow-nav-next { 34 | transform: rotate(-180deg); 35 | } -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | background: #000; 9 | } 10 | 11 | body { 12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 13 | height: 100vh; 14 | overflow: hidden; 15 | color: #fff; 16 | color: var(--color-text); 17 | background-color: #000; 18 | background-color: var(--color-bg); 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; 21 | } 22 | 23 | /* Color schemes */ 24 | .demo-1 { 25 | --color-text: #fff; 26 | --color-bg: #000; 27 | --color-link: #8fe8ff; 28 | --color-link-hover: #fff; 29 | --color-info: #72af3a; 30 | --color-nav: #fff; 31 | } 32 | 33 | .demo-2 { 34 | --color-text: #fff; 35 | --color-bg: #000; 36 | --color-link: #9cf9db; 37 | --color-link-hover: #fff; 38 | --color-info: #f3a145; 39 | --color-nav: #fff; 40 | } 41 | 42 | .demo-3 { 43 | --color-text: #fff; 44 | --color-bg: #a9b1b7; 45 | --color-link: #201b18; 46 | --color-link-hover: #224d94; 47 | --color-info: #fff473; 48 | --color-nav: #fff; 49 | } 50 | 51 | .demo-4 { 52 | --color-text: #81838c; 53 | --color-bg: #000; 54 | --color-link: #96e23e; 55 | --color-link-hover: #fff; 56 | --color-info: #ea7836; 57 | --color-nav: #fff; 58 | } 59 | 60 | .demo-5 { 61 | --color-text: #fff; 62 | --color-bg: #000; 63 | --color-link: #fff; 64 | --color-link-hover: #2a3cbb; 65 | --color-info: #f7fb40; 66 | --color-nav: #fff; 67 | } 68 | 69 | /* Fade effect */ 70 | .js body { 71 | opacity: 0; 72 | transition: opacity 0.3s; 73 | } 74 | 75 | .js body.render { 76 | opacity: 1; 77 | } 78 | 79 | /* Page Loader */ 80 | .js .loading::before { 81 | content: ''; 82 | position: fixed; 83 | z-index: 100000; 84 | top: 0; 85 | left: 0; 86 | width: 100%; 87 | height: 100%; 88 | background: var(--color-bg); 89 | } 90 | 91 | .js .loading::after { 92 | content: ''; 93 | position: fixed; 94 | z-index: 100000; 95 | top: 50%; 96 | left: 50%; 97 | width: 60px; 98 | height: 60px; 99 | margin: -30px 0 0 -30px; 100 | pointer-events: none; 101 | border-radius: 50%; 102 | opacity: 0.4; 103 | background: var(--color-link); 104 | animation: loaderAnim 0.7s linear infinite alternate forwards; 105 | } 106 | 107 | @keyframes loaderAnim { 108 | to { 109 | opacity: 1; 110 | transform: scale3d(0.5,0.5,1); 111 | } 112 | } 113 | 114 | a { 115 | text-decoration: none; 116 | color: #5d93d8; 117 | color: var(--color-link); 118 | outline: none; 119 | } 120 | 121 | a:hover, 122 | a:focus { 123 | color: #423c2b; 124 | color: var(--color-link-hover); 125 | outline: none; 126 | } 127 | 128 | .hidden { 129 | position: absolute; 130 | overflow: hidden; 131 | width: 0; 132 | height: 0; 133 | pointer-events: none; 134 | } 135 | 136 | .message { 137 | background: var(--color-text); 138 | color: var(--color-bg); 139 | text-align: center; 140 | padding: 1em; 141 | display: none; 142 | position: relative; 143 | z-index: 100; 144 | } 145 | 146 | /* Icons */ 147 | .icon { 148 | display: block; 149 | width: 1.5em; 150 | height: 1.5em; 151 | margin: 0 auto; 152 | fill: currentColor; 153 | } 154 | 155 | main { 156 | position: relative; 157 | width: 100%; 158 | } 159 | 160 | .content { 161 | position: relative; 162 | display: flex; 163 | justify-content: center; 164 | align-items: center; 165 | min-height: 100vh; 166 | margin: 0 auto; 167 | } 168 | 169 | .content--fixed { 170 | position: fixed; 171 | z-index: 10000; 172 | top: 0; 173 | left: 0; 174 | display: grid; 175 | align-content: space-between; 176 | width: 100%; 177 | max-width: none; 178 | height: 100vh; 179 | padding: 1.5em; 180 | pointer-events: none; 181 | grid-template-columns: 50% 50%; 182 | grid-template-rows: auto auto 4em; 183 | grid-template-areas: 'header ...' 184 | '... ...' 185 | 'github demos'; 186 | } 187 | 188 | .content--fixed a { 189 | pointer-events: auto; 190 | } 191 | 192 | /* Header */ 193 | .codrops-header { 194 | position: relative; 195 | z-index: 100; 196 | display: flex; 197 | flex-direction: row; 198 | align-items: flex-start; 199 | align-items: center; 200 | align-self: start; 201 | grid-area: header; 202 | justify-self: start; 203 | } 204 | 205 | .codrops-header__title { 206 | font-size: 1em; 207 | font-weight: bold; 208 | margin: 0; 209 | padding: 0.75em 0; 210 | } 211 | 212 | .info { 213 | margin: 0 0 0 1.25em; 214 | font-style: italic; 215 | color: var(--color-info); 216 | font-weight: bold; 217 | } 218 | 219 | .github { 220 | display: block; 221 | align-self: end; 222 | grid-area: github; 223 | justify-self: start; 224 | } 225 | 226 | .demos { 227 | position: relative; 228 | display: block; 229 | align-self: end; 230 | text-align: center; 231 | grid-area: demos; 232 | } 233 | 234 | .demo { 235 | margin: 0 0 0 0.15em; 236 | } 237 | 238 | .demo:hover, 239 | .demo:focus { 240 | opacity: 0.5; 241 | } 242 | 243 | .demo span { 244 | white-space: nowrap; 245 | text-transform: lowercase; 246 | pointer-events: none; 247 | } 248 | 249 | .demo span::before { 250 | content: '#'; 251 | } 252 | 253 | a.demo--current { 254 | pointer-events: none; 255 | } 256 | 257 | /* Top Navigation Style */ 258 | .codrops-links { 259 | position: relative; 260 | display: flex; 261 | justify-content: center; 262 | margin: 0 1em 0 0; 263 | text-align: center; 264 | white-space: nowrap; 265 | } 266 | 267 | .codrops-icon { 268 | display: inline-block; 269 | margin: 0.15em; 270 | padding: 0.25em; 271 | } 272 | 273 | .scene { 274 | position: fixed; 275 | top: 0; 276 | left: 0; 277 | width: 100%; 278 | height: 100vh; 279 | pointer-events: none; 280 | z-index: 1; 281 | } 282 | 283 | @media screen and (min-width: 55em) { 284 | .demos { 285 | display: flex; 286 | justify-self: end; 287 | } 288 | .demo { 289 | display: block; 290 | width: 17px; 291 | height: 17px; 292 | margin: 0 4px; 293 | border-radius: 50%; 294 | background: var(--color-link); 295 | } 296 | a.demo--current { 297 | background: var(--color-link-hover); 298 | } 299 | .demo span { 300 | position: absolute; 301 | line-height: 1; 302 | right: 100%; 303 | display: none; 304 | margin: 0 1em 0 0; 305 | } 306 | .demo--current span { 307 | display: block; 308 | } 309 | } 310 | 311 | @media screen and (max-width: 55em) { 312 | .message { 313 | display: block; 314 | } 315 | .content--fixed { 316 | position: relative; 317 | z-index: 1000; 318 | display: block; 319 | padding: 0.85em; 320 | } 321 | .codrops-header { 322 | flex-direction: column; 323 | align-items: center; 324 | } 325 | .codrops-header__title { 326 | font-weight: bold; 327 | padding-bottom: 0.25em; 328 | text-align: center; 329 | } 330 | .github { 331 | display: block; 332 | margin: 1em auto; 333 | } 334 | .codrops-links { 335 | margin: 0; 336 | } 337 | } 338 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/favicon.ico -------------------------------------------------------------------------------- /img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/1.jpg -------------------------------------------------------------------------------- /img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/10.jpg -------------------------------------------------------------------------------- /img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/11.jpg -------------------------------------------------------------------------------- /img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/12.jpg -------------------------------------------------------------------------------- /img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/13.jpg -------------------------------------------------------------------------------- /img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/14.jpg -------------------------------------------------------------------------------- /img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/15.jpg -------------------------------------------------------------------------------- /img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/2.jpg -------------------------------------------------------------------------------- /img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/3.jpg -------------------------------------------------------------------------------- /img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/4.jpg -------------------------------------------------------------------------------- /img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/5.jpg -------------------------------------------------------------------------------- /img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/6.jpg -------------------------------------------------------------------------------- /img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/7.jpg -------------------------------------------------------------------------------- /img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/8.jpg -------------------------------------------------------------------------------- /img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/9.jpg -------------------------------------------------------------------------------- /img/dmaps/2048x2048/clouds.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/dmaps/2048x2048/clouds.jpg -------------------------------------------------------------------------------- /img/dmaps/2048x2048/crystalize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/dmaps/2048x2048/crystalize.jpg -------------------------------------------------------------------------------- /img/dmaps/2048x2048/fibers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/dmaps/2048x2048/fibers.jpg -------------------------------------------------------------------------------- /img/dmaps/2048x2048/pointilize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/dmaps/2048x2048/pointilize.jpg -------------------------------------------------------------------------------- /img/dmaps/2048x2048/ripple.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/dmaps/2048x2048/ripple.jpg -------------------------------------------------------------------------------- /img/dmaps/2048x2048/ripple_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/dmaps/2048x2048/ripple_2.jpg -------------------------------------------------------------------------------- /img/dmaps/512x512/clouds.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/dmaps/512x512/clouds.jpg -------------------------------------------------------------------------------- /img/dmaps/512x512/crystalize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/dmaps/512x512/crystalize.jpg -------------------------------------------------------------------------------- /img/dmaps/512x512/fibers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/dmaps/512x512/fibers.jpg -------------------------------------------------------------------------------- /img/dmaps/512x512/pointilize.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/dmaps/512x512/pointilize.jpg -------------------------------------------------------------------------------- /img/dmaps/512x512/ripple.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/dmaps/512x512/ripple.jpg -------------------------------------------------------------------------------- /img/dmaps/512x512/ripple_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/img/dmaps/512x512/ripple_2.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Liquid Distortion Effects | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 36 |
37 |
38 |
39 |
40 | 41 | 42 |
43 |

Liquid Distortion Effects

44 |
45 | 46 | 53 | 54 |
55 |

​Get feedback from your website visitors

56 |

Now you can get instant visual feedback from your website visitors. Learn more

57 | 58 |
59 |
60 |
61 |
62 | 63 |
64 |
65 | 66 |
67 |
68 | 69 |
70 |
71 | 72 | 73 |
74 |
75 | 76 | 77 | 78 | 79 | 80 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Liquid Distortion Effects | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 36 |
37 |
38 |
39 |
40 | 41 | 42 |
43 |

Liquid Distortion Effects

44 |

Click & hold on the image

45 |
46 | 47 | 54 | 55 |
56 |

​Get feedback from your website visitors

57 |

Now you can get instant visual feedback from your website visitors. Learn more

58 | 59 |
60 |
61 |
62 |
63 | 64 |
65 |
66 | 67 |
68 |
69 | 70 |
71 |
72 | 73 | 74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Liquid Distortion Effects | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 36 |
37 |
38 |
39 |
40 | 41 | 42 |
43 |

Liquid Distortion Effects

44 |
45 | 46 | 53 | 54 |
55 |

​Get feedback from your website visitors

56 |

Now you can get instant visual feedback from your website visitors. Learn more

57 | 58 |
59 |
60 |
61 |
62 | 63 |

Aesthetics

64 |
65 |
66 | 67 |

Creativity

68 |
69 |
70 | 71 |

Perfection

72 |
73 |
74 | 75 | 76 |
77 |
78 | 79 | 80 | 81 | 82 | 83 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Liquid Distortion Effects | Demo 4 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 36 |
37 |
38 |
39 |
40 | 41 | 42 |
43 |

Liquid Distortion Effects

44 |
45 | 46 | 53 | 54 |
55 |

​Get feedback from your website visitors

56 |

Now you can get instant visual feedback from your website visitors. Learn more

57 | 58 |
59 |
60 |
61 |
62 | 63 |
64 |
65 | 66 |
67 |
68 | 69 |
70 |
71 | 72 | 73 |
74 |
75 | 76 | 77 | 78 | 79 | 80 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Liquid Distortion Effects | Demo 5 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 36 |
37 |
38 |
39 |
40 | 41 | 42 |
43 |

Liquid Distortion Effects

44 |

Click & hold on the image

45 |
46 | 47 | 54 | 55 |
56 |

​Get feedback from your website visitors

57 |

Now you can get instant visual feedback from your website visitors. Learn more

58 | 59 |
60 |
61 |
62 |
63 | 64 |
65 |
66 | 67 |
68 |
69 | 70 |
71 |
72 | 73 | 74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /js/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * demo.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2017, Codrops 9 | * http://www.codrops.com 10 | */ 11 | { 12 | setTimeout(() => document.body.classList.add('render'), 60); 13 | const navdemos = Array.from(document.querySelectorAll('nav.demos > .demo')); 14 | const total = navdemos.length; 15 | const current = navdemos.findIndex(el => el.classList.contains('demo--current')); 16 | const navigate = (linkEl) => { 17 | document.body.classList.remove('render'); 18 | document.body.addEventListener('transitionend', () => window.location = linkEl.href); 19 | }; 20 | navdemos.forEach(link => link.addEventListener('click', (ev) => { 21 | ev.preventDefault(); 22 | navigate(ev.target); 23 | })); 24 | /* 25 | document.addEventListener('keydown', (ev) => { 26 | const keyCode = ev.keyCode || ev.which; 27 | let linkEl; 28 | if ( keyCode === 37 ) { 29 | linkEl = current > 0 ? navdemos[current-1] : navdemos[total-1]; 30 | } 31 | else if ( keyCode === 39 ) { 32 | linkEl = current < total-1 ? navdemos[current+1] : navdemos[0]; 33 | } 34 | else { 35 | return false; 36 | } 37 | navigate(linkEl); 38 | }); 39 | */ 40 | } 41 | -------------------------------------------------------------------------------- /js/imagesloaded.pkgd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * imagesLoaded PACKAGED v4.1.1 3 | * JavaScript is all like "You images are done yet or what?" 4 | * MIT License 5 | */ 6 | 7 | !function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,o=i[n];e=e||[];for(var r=this._onceEvents&&this._onceEvents[t];o;){var s=r&&r[o];s&&(this.off(t,o),delete r[o]),o.apply(this,e),n+=s?0:1,o=i[n]}return this}},t}),function(t,e){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter")):t.imagesLoaded=e(t,t.EvEmitter)}(window,function(t,e){function i(t,e){for(var i in e)t[i]=e[i];return t}function n(t){var e=[];if(Array.isArray(t))e=t;else if("number"==typeof t.length)for(var i=0;i= 0 && that.currentIndex < slideImages.length - 1 ) { 268 | that.moveSlider( that.currentIndex + 1 ); 269 | } else { 270 | that.moveSlider( 0 ); 271 | } 272 | 273 | } else { 274 | 275 | if ( that.currentIndex > 0 && that.currentIndex < slideImages.length ) { 276 | that.moveSlider( that.currentIndex - 1 ); 277 | } else { 278 | that.moveSlider( spriteImages.length - 1 ); 279 | } 280 | 281 | } 282 | 283 | return false; 284 | 285 | } 286 | 287 | } 288 | 289 | 290 | 291 | /// --------------------------- 292 | // INIT FUNCTIONS 293 | /// --------------------------- 294 | 295 | this.init = function() { 296 | 297 | 298 | that.initPixi(); 299 | that.loadPixiSprites( options.pixiSprites ); 300 | 301 | /* 302 | if ( options.fullScreen === true ) { 303 | window.addEventListener("resize", function( event ){ 304 | scaleToWindow( renderer.view ); 305 | }); 306 | scaleToWindow( renderer.view ); 307 | } 308 | */ 309 | 310 | 311 | }; 312 | 313 | 314 | 315 | 316 | /// --------------------------- 317 | // INTERACTIONS 318 | /// --------------------------- 319 | function rotateSpite() { 320 | displacementSprite.rotation += 0.001; 321 | rafID = requestAnimationFrame( rotateSpite ); 322 | } 323 | 324 | if ( options.interactive === true ) { 325 | 326 | var rafID, mouseX, mouseY; 327 | 328 | // Enable interactions on our slider 329 | slidesContainer.interactive = true; 330 | slidesContainer.buttonMode = true; 331 | 332 | // HOVER 333 | if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { 334 | 335 | slidesContainer.pointerover = function( mouseData ){ 336 | mouseX = mouseData.data.global.x; 337 | mouseY = mouseData.data.global.y; 338 | TweenMax.to( displacementFilter.scale, 1, { x: "+=" + Math.sin( mouseX ) * 100 + "", y: "+=" + Math.cos( mouseY ) * 100 + "" }); 339 | rotateSpite(); 340 | }; 341 | 342 | slidesContainer.pointerout = function( mouseData ){ 343 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); 344 | cancelAnimationFrame( rafID ); 345 | }; 346 | 347 | } 348 | 349 | // CLICK 350 | if ( options.interactionEvent === 'click' || options.interactionEvent === 'both' ) { 351 | 352 | slidesContainer.pointerup = function( mouseData ){ 353 | if ( options.dispatchPointerOver === true ) { 354 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0, onComplete: function() { 355 | TweenMax.to( displacementFilter.scale, 1, { x: 20, y: 20 }); 356 | } }); 357 | } else { 358 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); 359 | cancelAnimationFrame( rafID ); 360 | } 361 | 362 | }; 363 | 364 | slidesContainer.pointerdown = function( mouseData ){ 365 | mouseX = mouseData.data.global.x; 366 | mouseY = mouseData.data.global.y; 367 | TweenMax.to( displacementFilter.scale, 1, { x: "+=" + Math.sin( mouseX ) * 1200 + "", y: "+=" + Math.cos( mouseY ) * 200 + "" }); 368 | }; 369 | 370 | slidesContainer.pointerout = function( mouseData ){ 371 | if ( options.dispatchPointerOver === true ) { 372 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0, onComplete: function() { 373 | TweenMax.to( displacementFilter.scale, 1, { x: 20, y: 20 }); 374 | } }); 375 | } else { 376 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); 377 | cancelAnimationFrame( rafID ); 378 | } 379 | 380 | }; 381 | 382 | } 383 | 384 | } 385 | 386 | 387 | /// --------------------------- 388 | // CENTER DISPLACEMENT 389 | /// --------------------------- 390 | if ( options.displacementCenter === true ) { 391 | displacementSprite.anchor.set(0.5); 392 | displacementSprite.x = renderer.view.width / 2; 393 | displacementSprite.y = renderer.view.height / 2; 394 | } 395 | 396 | 397 | /// --------------------------- 398 | // START 399 | /// --------------------------- 400 | this.init(); 401 | 402 | 403 | /// --------------------------- 404 | // HELPER FUNCTIONS 405 | /// --------------------------- 406 | function scaleToWindow( canvas, backgroundColor ) { 407 | var scaleX, scaleY, scale, center; 408 | 409 | //1. Scale the canvas to the correct size 410 | //Figure out the scale amount on each axis 411 | scaleX = window.innerWidth / canvas.offsetWidth; 412 | scaleY = window.innerHeight / canvas.offsetHeight; 413 | 414 | //Scale the canvas based on whichever value is less: `scaleX` or `scaleY` 415 | scale = Math.min(scaleX, scaleY); 416 | canvas.style.transformOrigin = "0 0"; 417 | canvas.style.transform = "scale(" + scale + ")"; 418 | 419 | //2. Center the canvas. 420 | //Decide whether to center the canvas vertically or horizontally. 421 | //Wide canvases should be centered vertically, and 422 | //square or tall canvases should be centered horizontally 423 | if (canvas.offsetWidth > canvas.offsetHeight) { 424 | if (canvas.offsetWidth * scale < window.innerWidth) { 425 | center = "horizontally"; 426 | } else { 427 | center = "vertically"; 428 | } 429 | } else { 430 | if (canvas.offsetHeight * scale < window.innerHeight) { 431 | center = "vertically"; 432 | } else { 433 | center = "horizontally"; 434 | } 435 | } 436 | 437 | //Center horizontally (for square or tall canvases) 438 | var margin; 439 | if (center === "horizontally") { 440 | margin = (window.innerWidth - canvas.offsetWidth * scale) / 2; 441 | canvas.style.marginTop = 0 + "px"; 442 | canvas.style.marginBottom = 0 + "px"; 443 | canvas.style.marginLeft = margin + "px"; 444 | canvas.style.marginRight = margin + "px"; 445 | } 446 | 447 | //Center vertically (for wide canvases) 448 | if (center === "vertically") { 449 | margin = (window.innerHeight - canvas.offsetHeight * scale) / 2; 450 | canvas.style.marginTop = margin + "px"; 451 | canvas.style.marginBottom = margin + "px"; 452 | canvas.style.marginLeft = 0 + "px"; 453 | canvas.style.marginRight = 0 + "px"; 454 | } 455 | 456 | //3. Remove any padding from the canvas and body and set the canvas 457 | //display style to "block" 458 | canvas.style.paddingLeft = 0 + "px"; 459 | canvas.style.paddingRight = 0 + "px"; 460 | canvas.style.paddingTop = 0 + "px"; 461 | canvas.style.paddingBottom = 0 + "px"; 462 | canvas.style.display = "block"; 463 | 464 | //4. Set the color of the HTML body background 465 | document.body.style.backgroundColor = backgroundColor; 466 | 467 | //Fix some quirkiness in scaling for Safari 468 | var ua = navigator.userAgent.toLowerCase(); 469 | if (ua.indexOf("safari") != -1) { 470 | if (ua.indexOf("chrome") > -1) { 471 | // Chrome 472 | } else { 473 | // Safari 474 | //canvas.style.maxHeight = "100%"; 475 | //canvas.style.minHeight = "100%"; 476 | } 477 | } 478 | 479 | //5. Return the `scale` value. This is important, because you'll nee this value 480 | //for correct hit testing between the pointer and sprites 481 | return scale; 482 | } // http://bit.ly/2y1Yk2k 483 | 484 | 485 | }; 486 | 487 | })(); -------------------------------------------------------------------------------- /js/main2.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | window.CanvasSlideshow = function( options ) { 4 | 5 | 6 | 7 | // SCOPE 8 | /// --------------------------- 9 | var that = this; 10 | 11 | 12 | 13 | // OPTIONS 14 | /// --------------------------- 15 | options = options || {}; 16 | options.stageWidth = options.hasOwnProperty('stageWidth') ? options.stageWidth : 1920; 17 | options.stageHeight = options.hasOwnProperty('stageHeight') ? options.stageHeight : 1080; 18 | options.pixiSprites = options.hasOwnProperty('sprites') ? options.sprites : []; 19 | options.texts = options.hasOwnProperty('texts') ? options.texts : []; 20 | options.autoPlay = options.hasOwnProperty('autoPlay') ? options.autoPlay : true; 21 | options.autoPlaySpeed = options.hasOwnProperty('autoPlaySpeed') ? options.autoPlaySpeed : [10, 3]; 22 | options.fullScreen = options.hasOwnProperty('fullScreen') ? options.fullScreen : true; 23 | options.displaceScale = options.hasOwnProperty('displaceScale') ? options.displaceScale : [200, 70]; 24 | options.displacementImage = options.hasOwnProperty('displacementImage') ? options.displacementImage : ''; 25 | options.navElement = options.hasOwnProperty('navElement') ? options.navElement : document.querySelectorAll( '.scene-nav' ); 26 | options.displaceAutoFit = options.hasOwnProperty('displaceAutoFit') ? options.displaceAutoFit : false; 27 | options.wacky = options.hasOwnProperty('wacky') ? options.wacky : false; 28 | options.interactive = options.hasOwnProperty('interactive') ? options.interactive : false; 29 | options.interactionEvent = options.hasOwnProperty('interactionEvent') ? options.interactionEvent : ''; 30 | options.displaceScaleTo = ( options.autoPlay === false ) ? [ 0, 0 ] : [ 20, 20 ]; 31 | options.textColor = options.hasOwnProperty('textColor') ? options.textColor : '#fff'; 32 | options.displacementCenter = options.hasOwnProperty('displacementCenter') ? options.displacementCenter : false; 33 | options.dispatchPointerOver = options.hasOwnProperty('dispatchPointerOver') ? options.dispatchPointerOver : false; 34 | 35 | 36 | 37 | // PIXI VARIABLES 38 | /// --------------------------- 39 | var renderer = new PIXI.autoDetectRenderer( options.stageWidth, options.stageHeight, { transparent: true }); 40 | var stage = new PIXI.Container(); 41 | var slidesContainer = new PIXI.Container(); 42 | var displacementSprite = new PIXI.Sprite.fromImage( options.displacementImage ); 43 | var displacementFilter = new PIXI.filters.DisplacementFilter( displacementSprite ); 44 | 45 | 46 | 47 | // TEXTS 48 | /// --------------------------- 49 | var style = new PIXI.TextStyle({ 50 | fill: options.textColor, 51 | wordWrap: true, 52 | wordWrapWidth: 400, 53 | letterSpacing: 20, 54 | fontSize: 14 55 | }); 56 | 57 | 58 | 59 | // SLIDES ARRAY INDEX 60 | /// --------------------------- 61 | this.currentIndex = 0; 62 | 63 | 64 | 65 | /// --------------------------- 66 | // INITIALISE PIXI 67 | /// --------------------------- 68 | this.initPixi = function() { 69 | 70 | // Add canvas to the HTML 71 | document.body.appendChild( renderer.view ); 72 | 73 | 74 | // Add child container to the main container 75 | stage.addChild( slidesContainer ); 76 | 77 | 78 | // Enable Interactions 79 | stage.interactive = true; 80 | 81 | 82 | // Fit renderer to the screen 83 | if ( options.fullScreen === true ) { 84 | renderer.view.style.objectFit = 'cover'; 85 | renderer.view.style.width = '100%'; 86 | renderer.view.style.height = '100%'; 87 | renderer.view.style.top = '50%'; 88 | renderer.view.style.left = '50%'; 89 | renderer.view.style.webkitTransform = 'translate( -50%, -50% ) scale(1.2)'; 90 | renderer.view.style.transform = 'translate( -50%, -50% ) scale(1.2)'; 91 | } else { 92 | renderer.view.style.maxWidth = '100%'; 93 | renderer.view.style.top = '50%'; 94 | renderer.view.style.left = '50%'; 95 | renderer.view.style.webkitTransform = 'translate( -50%, -50% )'; 96 | renderer.view.style.transform = 'translate( -50%, -50% )'; 97 | } 98 | 99 | 100 | displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; 101 | 102 | 103 | // Set the filter to stage and set some default values for the animation 104 | stage.filters = [displacementFilter]; 105 | 106 | if ( options.autoPlay === false ) { 107 | displacementFilter.scale.x = 0; 108 | displacementFilter.scale.y = 0; 109 | } 110 | 111 | if ( options.wacky === true ) { 112 | 113 | displacementSprite.anchor.set(0.5); 114 | displacementSprite.x = renderer.width / 2; 115 | displacementSprite.y = renderer.height / 2; 116 | } 117 | 118 | displacementSprite.scale.x = 2; 119 | displacementSprite.scale.y = 2; 120 | 121 | // PIXI tries to fit the filter bounding box to the renderer so we optionally bypass 122 | displacementFilter.autoFit = options.displaceAutoFit; 123 | 124 | stage.addChild( displacementSprite ); 125 | 126 | }; 127 | 128 | 129 | 130 | /// --------------------------- 131 | // LOAD SLIDES TO CANVAS 132 | /// --------------------------- 133 | this.loadPixiSprites = function( sprites ) { 134 | 135 | 136 | var rSprites = options.sprites; 137 | var rTexts = options.texts; 138 | 139 | for ( var i = 0; i < rSprites.length; i++ ) { 140 | 141 | var texture = new PIXI.Texture.fromImage( sprites[i] ); 142 | var image = new PIXI.Sprite( texture ); 143 | 144 | if ( rTexts ) { 145 | var richText = new PIXI.Text( rTexts[i], style); 146 | image.addChild(richText); 147 | 148 | richText.anchor.set(0.5); 149 | richText.x = image.width / 2; 150 | richText.y = image.height / 2; 151 | } 152 | 153 | /* */ 154 | // image.anchor.set(0.5); 155 | // image.x = renderer.width / 2; 156 | // image.y = renderer.height / 2; 157 | // image.transform.scale.x = 1.3; 158 | // image.transform.scale.y = 1.3; 159 | 160 | 161 | if ( i !== 0 ) { 162 | TweenMax.set( image, { alpha: 0 } ); 163 | } 164 | 165 | slidesContainer.addChild( image ); 166 | 167 | } 168 | 169 | }; 170 | 171 | 172 | 173 | /// --------------------------- 174 | // DEFAULT RENDER/ANIMATION 175 | /// --------------------------- 176 | if ( options.autoPlay === true ) { 177 | 178 | var ticker = new PIXI.ticker.Ticker(); 179 | 180 | ticker.autoStart = options.autoPlay; 181 | 182 | ticker.add(function( delta ) { 183 | 184 | displacementSprite.x += options.autoPlaySpeed[0] * delta; 185 | displacementSprite.y += options.autoPlaySpeed[1]; 186 | 187 | renderer.render( stage ); 188 | 189 | }); 190 | 191 | } else { 192 | 193 | var render = new PIXI.ticker.Ticker(); 194 | 195 | render.autoStart = true; 196 | 197 | render.add(function( delta ) { 198 | renderer.render( stage ); 199 | }); 200 | 201 | } 202 | 203 | 204 | /// --------------------------- 205 | // TRANSITION BETWEEN SLIDES 206 | /// --------------------------- 207 | var isPlaying = false; 208 | var slideImages = slidesContainer.children; 209 | this.moveSlider = function( newIndex ) { 210 | 211 | isPlaying = true; 212 | 213 | 214 | var baseTimeline = new TimelineMax( { onComplete: function () { 215 | that.currentIndex = newIndex; 216 | isPlaying = false; 217 | if ( options.wacky === true ) { 218 | displacementSprite.scale.set( 1 ); 219 | } 220 | },onUpdate: function() { 221 | 222 | if ( options.wacky === true ) { 223 | displacementSprite.rotation += baseTimeline.progress() * 0.02; 224 | displacementSprite.scale.set( baseTimeline.progress() * 3 ); 225 | } 226 | 227 | } }); 228 | 229 | baseTimeline.clear(); 230 | 231 | if ( baseTimeline.isActive() ) { 232 | return; 233 | } 234 | 235 | // DEMO 2 236 | baseTimeline 237 | .to(displacementFilter.scale, 1.5, { x: options.displaceScale[0], y: options.displaceScale[1], ease: Power2.easeOut }) 238 | .to(slideImages[that.currentIndex], 1.5, { alpha: 0, ease: Power2.easeOut }, 0) 239 | .to(slideImages[newIndex], 1, { alpha: 1, ease: Power2.easeOut }, 1) 240 | .to(displacementFilter.scale, 1.5, { x: options.displaceScaleTo[0], y: options.displaceScaleTo[1], ease: Expo.easeOut }, 0.8 ); 241 | 242 | }; 243 | 244 | 245 | 246 | /// --------------------------- 247 | // CLICK HANDLERS 248 | /// --------------------------- 249 | var nav = options.navElement; 250 | 251 | for ( var i = 0; i < nav.length; i++ ) { 252 | 253 | var navItem = nav[i]; 254 | 255 | navItem.onclick = function( event ) { 256 | 257 | // Make sure the previous transition has ended 258 | if ( isPlaying ) { 259 | return false; 260 | } 261 | 262 | if ( this.getAttribute('data-nav') === 'next' ) { 263 | 264 | if ( that.currentIndex >= 0 && that.currentIndex < slideImages.length - 1 ) { 265 | that.moveSlider( that.currentIndex + 1 ); 266 | } else { 267 | that.moveSlider( 0 ); 268 | } 269 | 270 | } else { 271 | 272 | if ( that.currentIndex > 0 && that.currentIndex < slideImages.length ) { 273 | that.moveSlider( that.currentIndex - 1 ); 274 | } else { 275 | that.moveSlider( spriteImages.length - 1 ); 276 | } 277 | 278 | } 279 | 280 | return false; 281 | 282 | } 283 | 284 | } 285 | 286 | 287 | 288 | /// --------------------------- 289 | // INIT FUNCTIONS 290 | /// --------------------------- 291 | this.init = function() { 292 | 293 | 294 | that.initPixi(); 295 | that.loadPixiSprites( options.pixiSprites ); 296 | 297 | /* 298 | if ( options.fullScreen === true ) { 299 | window.addEventListener("resize", function( event ){ 300 | scaleToWindow( renderer.view ); 301 | }); 302 | scaleToWindow( renderer.view ); 303 | } 304 | */ 305 | 306 | 307 | }; 308 | 309 | 310 | /// --------------------------- 311 | // INTERACTIONS 312 | /// --------------------------- 313 | function rotateSpite() { 314 | displacementSprite.rotation += 0.001; 315 | rafID = requestAnimationFrame( rotateSpite ); 316 | } 317 | 318 | if ( options.interactive === true ) { 319 | 320 | var rafID, mouseX, mouseY; 321 | 322 | // Enable interactions on our slider 323 | slidesContainer.interactive = true; 324 | slidesContainer.buttonMode = true; 325 | 326 | // HOVER 327 | if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { 328 | 329 | slidesContainer.pointerover = function( mouseData ){ 330 | mouseX = mouseData.data.global.x; 331 | mouseY = mouseData.data.global.y; 332 | TweenMax.to( displacementFilter.scale, 1, { x: "+=" + Math.sin( mouseX ) * 100 + "", y: "+=" + Math.cos( mouseY ) * 100 + "" }); 333 | rotateSpite(); 334 | }; 335 | 336 | slidesContainer.pointerout = function( mouseData ){ 337 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); 338 | cancelAnimationFrame( rafID ); 339 | }; 340 | 341 | } 342 | 343 | // CLICK 344 | if ( options.interactionEvent === 'click' || options.interactionEvent === 'both' ) { 345 | 346 | slidesContainer.pointerup = function( mouseData ){ 347 | if ( options.dispatchPointerOver === true ) { 348 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0, onComplete: function() { 349 | TweenMax.to( displacementFilter.scale, 1, { x: 20, y: 20 }); 350 | } }); 351 | } else { 352 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); 353 | cancelAnimationFrame( rafID ); 354 | } 355 | 356 | }; 357 | 358 | slidesContainer.pointerdown = function( mouseData ){ 359 | mouseX = mouseData.data.global.x; 360 | mouseY = mouseData.data.global.y; 361 | TweenMax.to( displacementFilter.scale, 1, { x: "+=" + Math.sin( mouseX ) * 1200 + "", y: "+=" + Math.cos( mouseY ) * 200 + "" }); 362 | }; 363 | 364 | slidesContainer.pointerout = function( mouseData ){ 365 | if ( options.dispatchPointerOver === true ) { 366 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0, onComplete: function() { 367 | TweenMax.to( displacementFilter.scale, 1, { x: 20, y: 20 }); 368 | } }); 369 | } else { 370 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); 371 | cancelAnimationFrame( rafID ); 372 | } 373 | 374 | }; 375 | 376 | } 377 | 378 | } 379 | 380 | 381 | 382 | /// --------------------------- 383 | // CENTER DISPLACEMENT 384 | /// --------------------------- 385 | if ( options.displacementCenter === true ) { 386 | displacementSprite.anchor.set(0.5); 387 | displacementSprite.x = renderer.view.width / 2; 388 | displacementSprite.y = renderer.view.height / 2; 389 | } 390 | 391 | 392 | /// --------------------------- 393 | // START 394 | /// --------------------------- 395 | this.init(); 396 | 397 | 398 | /// --------------------------- 399 | // HELPER FUNCTIONS 400 | /// --------------------------- 401 | function scaleToWindow( canvas, backgroundColor ) { 402 | var scaleX, scaleY, scale, center; 403 | 404 | //1. Scale the canvas to the correct size 405 | //Figure out the scale amount on each axis 406 | scaleX = window.innerWidth / canvas.offsetWidth; 407 | scaleY = window.innerHeight / canvas.offsetHeight; 408 | 409 | //Scale the canvas based on whichever value is less: `scaleX` or `scaleY` 410 | scale = Math.min(scaleX, scaleY); 411 | canvas.style.transformOrigin = "0 0"; 412 | canvas.style.transform = "scale(" + scale + ")"; 413 | 414 | //2. Center the canvas. 415 | //Decide whether to center the canvas vertically or horizontally. 416 | //Wide canvases should be centered vertically, and 417 | //square or tall canvases should be centered horizontally 418 | if (canvas.offsetWidth > canvas.offsetHeight) { 419 | if (canvas.offsetWidth * scale < window.innerWidth) { 420 | center = "horizontally"; 421 | } else { 422 | center = "vertically"; 423 | } 424 | } else { 425 | if (canvas.offsetHeight * scale < window.innerHeight) { 426 | center = "vertically"; 427 | } else { 428 | center = "horizontally"; 429 | } 430 | } 431 | 432 | //Center horizontally (for square or tall canvases) 433 | var margin; 434 | if (center === "horizontally") { 435 | margin = (window.innerWidth - canvas.offsetWidth * scale) / 2; 436 | canvas.style.marginTop = 0 + "px"; 437 | canvas.style.marginBottom = 0 + "px"; 438 | canvas.style.marginLeft = margin + "px"; 439 | canvas.style.marginRight = margin + "px"; 440 | } 441 | 442 | //Center vertically (for wide canvases) 443 | if (center === "vertically") { 444 | margin = (window.innerHeight - canvas.offsetHeight * scale) / 2; 445 | canvas.style.marginTop = margin + "px"; 446 | canvas.style.marginBottom = margin + "px"; 447 | canvas.style.marginLeft = 0 + "px"; 448 | canvas.style.marginRight = 0 + "px"; 449 | } 450 | 451 | //3. Remove any padding from the canvas and body and set the canvas 452 | //display style to "block" 453 | canvas.style.paddingLeft = 0 + "px"; 454 | canvas.style.paddingRight = 0 + "px"; 455 | canvas.style.paddingTop = 0 + "px"; 456 | canvas.style.paddingBottom = 0 + "px"; 457 | canvas.style.display = "block"; 458 | 459 | //4. Set the color of the HTML body background 460 | document.body.style.backgroundColor = backgroundColor; 461 | 462 | //Fix some quirkiness in scaling for Safari 463 | var ua = navigator.userAgent.toLowerCase(); 464 | if (ua.indexOf("safari") != -1) { 465 | if (ua.indexOf("chrome") > -1) { 466 | // Chrome 467 | } else { 468 | // Safari 469 | //canvas.style.maxHeight = "100%"; 470 | //canvas.style.minHeight = "100%"; 471 | } 472 | } 473 | 474 | //5. Return the `scale` value. This is important, because you'll nee this value 475 | //for correct hit testing between the pointer and sprites 476 | return scale; 477 | } // http://bit.ly/2y1Yk2k 478 | 479 | 480 | }; 481 | 482 | })(); -------------------------------------------------------------------------------- /js/main3.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | window.CanvasSlideshow = function( options ) { 4 | 5 | 6 | 7 | // SCOPE 8 | /// --------------------------- 9 | var that = this; 10 | 11 | 12 | 13 | // OPTIONS 14 | /// --------------------------- 15 | options = options || {}; 16 | options.stageWidth = options.hasOwnProperty('stageWidth') ? options.stageWidth : 1920; 17 | options.stageHeight = options.hasOwnProperty('stageHeight') ? options.stageHeight : 1080; 18 | options.pixiSprites = options.hasOwnProperty('sprites') ? options.sprites : []; 19 | options.centerSprites = options.hasOwnProperty('centerSprites') ? options.centerSprites : false; 20 | options.texts = options.hasOwnProperty('texts') ? options.texts : []; 21 | options.autoPlay = options.hasOwnProperty('autoPlay') ? options.autoPlay : true; 22 | options.autoPlaySpeed = options.hasOwnProperty('autoPlaySpeed') ? options.autoPlaySpeed : [10, 3]; 23 | options.fullScreen = options.hasOwnProperty('fullScreen') ? options.fullScreen : true; 24 | options.displaceScale = options.hasOwnProperty('displaceScale') ? options.displaceScale : [200, 70]; 25 | options.displacementImage = options.hasOwnProperty('displacementImage') ? options.displacementImage : ''; 26 | options.navElement = options.hasOwnProperty('navElement') ? options.navElement : document.querySelectorAll( '.scene-nav' ); 27 | options.displaceAutoFit = options.hasOwnProperty('displaceAutoFit') ? options.displaceAutoFit : false; 28 | options.wacky = options.hasOwnProperty('wacky') ? options.wacky : false; 29 | options.interactive = options.hasOwnProperty('interactive') ? options.interactive : false; 30 | options.interactionEvent = options.hasOwnProperty('interactionEvent') ? options.interactionEvent : ''; 31 | options.displaceScaleTo = ( options.autoPlay === false ) ? [ 0, 0 ] : [ 20, 20 ]; 32 | options.textColor = options.hasOwnProperty('textColor') ? options.textColor : '#fff'; 33 | options.displacementCenter = options.hasOwnProperty('displacementCenter') ? options.displacementCenter : false; 34 | options.dispatchPointerOver = options.hasOwnProperty('dispatchPointerOver') ? options.dispatchPointerOver : false; 35 | 36 | 37 | 38 | // PIXI VARIABLES 39 | /// --------------------------- 40 | var renderer = new PIXI.autoDetectRenderer( options.stageWidth, options.stageHeight, { transparent: true }); 41 | var stage = new PIXI.Container(); 42 | var slidesContainer = new PIXI.Container(); 43 | var displacementSprite = new PIXI.Sprite.fromImage( options.displacementImage ); 44 | var displacementFilter = new PIXI.filters.DisplacementFilter( displacementSprite ); 45 | 46 | 47 | 48 | // TEXTS 49 | /// --------------------------- 50 | var style = new PIXI.TextStyle({ 51 | fill: options.textColor, 52 | wordWrap: true, 53 | wordWrapWidth: 400, 54 | fontSize: 36 55 | }); 56 | 57 | 58 | 59 | // SLIDES ARRAY INDEX 60 | /// --------------------------- 61 | this.currentIndex = 0; 62 | 63 | 64 | 65 | /// --------------------------- 66 | // INITIALISE PIXI 67 | /// --------------------------- 68 | this.initPixi = function() { 69 | 70 | // Add canvas to the HTML 71 | document.body.appendChild( renderer.view ); 72 | 73 | 74 | // Add child container to the main container 75 | stage.addChild( slidesContainer ); 76 | 77 | 78 | // Enable Interactions 79 | stage.interactive = true; 80 | 81 | 82 | // Fit renderer to the screen 83 | if ( options.fullScreen === true ) { 84 | renderer.view.style.objectFit = 'cover'; 85 | renderer.view.style.width = '100%'; 86 | renderer.view.style.height = '100%'; 87 | renderer.view.style.top = '50%'; 88 | renderer.view.style.left = '50%'; 89 | renderer.view.style.webkitTransform = 'translate( -50%, -50% ) scale(1.2)'; 90 | renderer.view.style.transform = 'translate( -50%, -50% ) scale(1.2)'; 91 | } else { 92 | renderer.view.style.maxWidth = '100%'; 93 | renderer.view.style.top = '50%'; 94 | renderer.view.style.left = '50%'; 95 | renderer.view.style.webkitTransform = 'translate( -50%, -50% )'; 96 | renderer.view.style.transform = 'translate( -50%, -50% )'; 97 | } 98 | 99 | 100 | displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; 101 | 102 | 103 | // Set the filter to stage and set some default values for the animation 104 | stage.filters = [displacementFilter]; 105 | 106 | if ( options.autoPlay === false ) { 107 | displacementFilter.scale.x = 0; 108 | displacementFilter.scale.y = 0; 109 | } 110 | 111 | if ( options.wacky === true ) { 112 | 113 | displacementSprite.anchor.set(0.5); 114 | displacementSprite.x = renderer.width / 2; 115 | displacementSprite.y = renderer.height / 2; 116 | } 117 | 118 | displacementSprite.scale.x = 2; 119 | displacementSprite.scale.y = 2; 120 | 121 | // PIXI tries to fit the filter bounding box to the renderer so we optionally bypass 122 | displacementFilter.autoFit = options.displaceAutoFit; 123 | 124 | stage.addChild( displacementSprite ); 125 | 126 | }; 127 | 128 | 129 | 130 | /// --------------------------- 131 | // LOAD SLIDES TO CANVAS 132 | /// --------------------------- 133 | this.loadPixiSprites = function( sprites ) { 134 | 135 | 136 | var rSprites = options.sprites; 137 | var rTexts = options.texts; 138 | 139 | for ( var i = 0; i < rSprites.length; i++ ) { 140 | 141 | var texture = new PIXI.Texture.fromImage( sprites[i] ); 142 | var image = new PIXI.Sprite( texture ); 143 | 144 | if ( rTexts ) { 145 | var richText = new PIXI.Text( rTexts[i], style); 146 | image.addChild(richText); 147 | 148 | richText.anchor.set(0.5); 149 | richText.x = image.width / 2; 150 | richText.y = image.height / 2; 151 | } 152 | 153 | if ( options.centerSprites === true ) { 154 | image.anchor.set(0.5); 155 | image.x = renderer.width / 2; 156 | image.y = renderer.height / 2; 157 | } 158 | // image.transform.scale.x = 1.3; 159 | // image.transform.scale.y = 1.3; 160 | 161 | 162 | 163 | if ( i !== 0 ) { 164 | TweenMax.set( image, { alpha: 0 } ); 165 | } 166 | 167 | slidesContainer.addChild( image ); 168 | 169 | } 170 | 171 | }; 172 | 173 | 174 | 175 | /// --------------------------- 176 | // DEFAULT RENDER/ANIMATION 177 | /// --------------------------- 178 | if ( options.autoPlay === true ) { 179 | 180 | var ticker = new PIXI.ticker.Ticker(); 181 | 182 | ticker.autoStart = options.autoPlay; 183 | 184 | ticker.add(function( delta ) { 185 | 186 | displacementSprite.x += options.autoPlaySpeed[0] * delta; 187 | displacementSprite.y += options.autoPlaySpeed[1]; 188 | 189 | renderer.render( stage ); 190 | 191 | }); 192 | 193 | } else { 194 | 195 | var render = new PIXI.ticker.Ticker(); 196 | 197 | render.autoStart = true; 198 | 199 | render.add(function( delta ) { 200 | renderer.render( stage ); 201 | }); 202 | 203 | } 204 | 205 | 206 | /// --------------------------- 207 | // TRANSITION BETWEEN SLIDES 208 | /// --------------------------- 209 | var isPlaying = false; 210 | var slideImages = slidesContainer.children; 211 | this.moveSlider = function( newIndex ) { 212 | 213 | isPlaying = true; 214 | 215 | 216 | var baseTimeline = new TimelineMax( { onComplete: function () { 217 | that.currentIndex = newIndex; 218 | isPlaying = false; 219 | if ( options.wacky === true ) { 220 | displacementSprite.scale.set( 1 ); 221 | } 222 | },onUpdate: function() { 223 | 224 | if ( options.wacky === true ) { 225 | displacementSprite.rotation += baseTimeline.progress() * 0.02; 226 | displacementSprite.scale.set( baseTimeline.progress() * 3 ); 227 | } 228 | 229 | } }); 230 | 231 | baseTimeline.clear(); 232 | 233 | if ( baseTimeline.isActive() ) { 234 | return; 235 | } 236 | 237 | // DEMO 4 238 | baseTimeline 239 | .to(displacementFilter.scale, 1, { x: options.displaceScale[0], y: options.displaceScale[1], ease: Power1.easeOut }) 240 | .to(slideImages[that.currentIndex], 0.5, { alpha: 0, ease: Power2.easeOut }, 0.2) 241 | .to(slideImages[newIndex], 0.5, { alpha: 1, ease: Power2.easeOut }, 0.3) 242 | .to(displacementFilter.scale, 1, { x: options.displaceScaleTo[0], y: options.displaceScaleTo[1], ease: Power2.easeOut }, 0.3 ); 243 | 244 | }; 245 | 246 | 247 | 248 | /// --------------------------- 249 | // CLICK HANDLERS 250 | /// --------------------------- 251 | var nav = options.navElement; 252 | 253 | for ( var i = 0; i < nav.length; i++ ) { 254 | 255 | var navItem = nav[i]; 256 | 257 | navItem.onclick = function( event ) { 258 | 259 | // Make sure the previous transition has ended 260 | if ( isPlaying ) { 261 | return false; 262 | } 263 | 264 | if ( this.getAttribute('data-nav') === 'next' ) { 265 | 266 | if ( that.currentIndex >= 0 && that.currentIndex < slideImages.length - 1 ) { 267 | that.moveSlider( that.currentIndex + 1 ); 268 | } else { 269 | that.moveSlider( 0 ); 270 | } 271 | 272 | } else { 273 | 274 | if ( that.currentIndex > 0 && that.currentIndex < slideImages.length ) { 275 | that.moveSlider( that.currentIndex - 1 ); 276 | } else { 277 | that.moveSlider( spriteImages.length - 1 ); 278 | } 279 | 280 | } 281 | 282 | return false; 283 | 284 | } 285 | 286 | } 287 | 288 | 289 | 290 | /// --------------------------- 291 | // INIT FUNCTIONS 292 | /// --------------------------- 293 | 294 | this.init = function() { 295 | 296 | 297 | that.initPixi(); 298 | that.loadPixiSprites( options.pixiSprites ); 299 | 300 | /* 301 | if ( options.fullScreen === true ) { 302 | window.addEventListener("resize", function( event ){ 303 | scaleToWindow( renderer.view ); 304 | }); 305 | scaleToWindow( renderer.view ); 306 | } 307 | */ 308 | 309 | 310 | }; 311 | 312 | 313 | 314 | 315 | /// --------------------------- 316 | // INTERACTIONS 317 | /// --------------------------- 318 | function rotateSpite() { 319 | displacementSprite.rotation += 0.001; 320 | rafID = requestAnimationFrame( rotateSpite ); 321 | } 322 | 323 | if ( options.interactive === true ) { 324 | 325 | var rafID, mouseX, mouseY; 326 | 327 | // Enable interactions on our slider 328 | slidesContainer.interactive = true; 329 | slidesContainer.buttonMode = true; 330 | 331 | // HOVER 332 | if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { 333 | 334 | slidesContainer.pointerover = function( mouseData ){ 335 | mouseX = mouseData.data.global.x; 336 | mouseY = mouseData.data.global.y; 337 | TweenMax.to( displacementFilter.scale, 1, { x: "+=" + Math.sin( mouseX ) * 100 + "", y: "+=" + Math.cos( mouseY ) * 100 + "" }); 338 | rotateSpite(); 339 | }; 340 | 341 | slidesContainer.pointerout = function( mouseData ){ 342 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); 343 | cancelAnimationFrame( rafID ); 344 | }; 345 | 346 | } 347 | 348 | // CLICK 349 | if ( options.interactionEvent === 'click' || options.interactionEvent === 'both' ) { 350 | 351 | slidesContainer.pointerup = function( mouseData ){ 352 | if ( options.dispatchPointerOver === true ) { 353 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0, onComplete: function() { 354 | TweenMax.to( displacementFilter.scale, 1, { x: 20, y: 20 }); 355 | } }); 356 | } else { 357 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); 358 | cancelAnimationFrame( rafID ); 359 | } 360 | 361 | }; 362 | 363 | slidesContainer.pointerdown = function( mouseData ){ 364 | mouseX = mouseData.data.global.x; 365 | mouseY = mouseData.data.global.y; 366 | TweenMax.to( displacementFilter.scale, 1, { x: "+=" + Math.sin( mouseX ) * 1200 + "", y: "+=" + Math.cos( mouseY ) * 200 + "" }); 367 | }; 368 | 369 | slidesContainer.pointerout = function( mouseData ){ 370 | if ( options.dispatchPointerOver === true ) { 371 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0, onComplete: function() { 372 | TweenMax.to( displacementFilter.scale, 1, { x: 20, y: 20 }); 373 | } }); 374 | } else { 375 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); 376 | cancelAnimationFrame( rafID ); 377 | } 378 | 379 | }; 380 | 381 | } 382 | 383 | } 384 | 385 | 386 | 387 | /// --------------------------- 388 | // CENTER DISPLACEMENT 389 | /// --------------------------- 390 | if ( options.displacementCenter === true ) { 391 | displacementSprite.anchor.set(0.5); 392 | displacementSprite.x = renderer.view.width / 2; 393 | displacementSprite.y = renderer.view.height / 2; 394 | } 395 | 396 | 397 | /// --------------------------- 398 | // START 399 | /// --------------------------- 400 | this.init(); 401 | 402 | 403 | /// --------------------------- 404 | // HELPER FUNCTIONS 405 | /// --------------------------- 406 | function scaleToWindow( canvas, backgroundColor ) { 407 | var scaleX, scaleY, scale, center; 408 | 409 | //1. Scale the canvas to the correct size 410 | //Figure out the scale amount on each axis 411 | scaleX = window.innerWidth / canvas.offsetWidth; 412 | scaleY = window.innerHeight / canvas.offsetHeight; 413 | 414 | //Scale the canvas based on whichever value is less: `scaleX` or `scaleY` 415 | scale = Math.min(scaleX, scaleY); 416 | canvas.style.transformOrigin = "0 0"; 417 | canvas.style.transform = "scale(" + scale + ")"; 418 | 419 | //2. Center the canvas. 420 | //Decide whether to center the canvas vertically or horizontally. 421 | //Wide canvases should be centered vertically, and 422 | //square or tall canvases should be centered horizontally 423 | if (canvas.offsetWidth > canvas.offsetHeight) { 424 | if (canvas.offsetWidth * scale < window.innerWidth) { 425 | center = "horizontally"; 426 | } else { 427 | center = "vertically"; 428 | } 429 | } else { 430 | if (canvas.offsetHeight * scale < window.innerHeight) { 431 | center = "vertically"; 432 | } else { 433 | center = "horizontally"; 434 | } 435 | } 436 | 437 | //Center horizontally (for square or tall canvases) 438 | var margin; 439 | if (center === "horizontally") { 440 | margin = (window.innerWidth - canvas.offsetWidth * scale) / 2; 441 | canvas.style.marginTop = 0 + "px"; 442 | canvas.style.marginBottom = 0 + "px"; 443 | canvas.style.marginLeft = margin + "px"; 444 | canvas.style.marginRight = margin + "px"; 445 | } 446 | 447 | //Center vertically (for wide canvases) 448 | if (center === "vertically") { 449 | margin = (window.innerHeight - canvas.offsetHeight * scale) / 2; 450 | canvas.style.marginTop = margin + "px"; 451 | canvas.style.marginBottom = margin + "px"; 452 | canvas.style.marginLeft = 0 + "px"; 453 | canvas.style.marginRight = 0 + "px"; 454 | } 455 | 456 | //3. Remove any padding from the canvas and body and set the canvas 457 | //display style to "block" 458 | canvas.style.paddingLeft = 0 + "px"; 459 | canvas.style.paddingRight = 0 + "px"; 460 | canvas.style.paddingTop = 0 + "px"; 461 | canvas.style.paddingBottom = 0 + "px"; 462 | canvas.style.display = "block"; 463 | 464 | //4. Set the color of the HTML body background 465 | document.body.style.backgroundColor = backgroundColor; 466 | 467 | //Fix some quirkiness in scaling for Safari 468 | var ua = navigator.userAgent.toLowerCase(); 469 | if (ua.indexOf("safari") != -1) { 470 | if (ua.indexOf("chrome") > -1) { 471 | // Chrome 472 | } else { 473 | // Safari 474 | //canvas.style.maxHeight = "100%"; 475 | //canvas.style.minHeight = "100%"; 476 | } 477 | } 478 | 479 | //5. Return the `scale` value. This is important, because you'll nee this value 480 | //for correct hit testing between the pointer and sprites 481 | return scale; 482 | } // http://bit.ly/2y1Yk2k 483 | 484 | 485 | }; 486 | 487 | })(); -------------------------------------------------------------------------------- /js/main4.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | window.CanvasSlideshow = function( options ) { 4 | 5 | 6 | 7 | // SCOPE 8 | /// --------------------------- 9 | var that = this; 10 | 11 | 12 | 13 | // OPTIONS 14 | /// --------------------------- 15 | options = options || {}; 16 | options.stageWidth = options.hasOwnProperty('stageWidth') ? options.stageWidth : 1920; 17 | options.stageHeight = options.hasOwnProperty('stageHeight') ? options.stageHeight : 1080; 18 | options.pixiSprites = options.hasOwnProperty('sprites') ? options.sprites : []; 19 | options.texts = options.hasOwnProperty('texts') ? options.texts : []; 20 | options.autoPlay = options.hasOwnProperty('autoPlay') ? options.autoPlay : true; 21 | options.autoPlaySpeed = options.hasOwnProperty('autoPlaySpeed') ? options.autoPlaySpeed : [10, 3]; 22 | options.fullScreen = options.hasOwnProperty('fullScreen') ? options.fullScreen : true; 23 | options.displaceScale = options.hasOwnProperty('displaceScale') ? options.displaceScale : [200, 70]; 24 | options.displacementImage = options.hasOwnProperty('displacementImage') ? options.displacementImage : ''; 25 | options.navElement = options.hasOwnProperty('navElement') ? options.navElement : document.querySelectorAll( '.scene-nav' ); 26 | options.displaceAutoFit = options.hasOwnProperty('displaceAutoFit') ? options.displaceAutoFit : false; 27 | options.wacky = options.hasOwnProperty('wacky') ? options.wacky : false; 28 | options.interactive = options.hasOwnProperty('interactive') ? options.interactive : false; 29 | options.displaceScaleTo = ( options.autoPlay === false ) ? [ 0, 0 ] : [ 20, 20 ]; 30 | options.textColor = options.hasOwnProperty('textColor') ? options.textColor : '#fff'; 31 | options.displacementCenter = options.hasOwnProperty('displacementCenter') ? options.displacementCenter : false; 32 | options.dispatchPointerOver = options.hasOwnProperty('dispatchPointerOver') ? options.dispatchPointerOver : false; 33 | 34 | 35 | 36 | // PIXI VARIABLES 37 | /// --------------------------- 38 | var renderer = new PIXI.autoDetectRenderer(options.stageWidth, options.stageHeight, { transparent: true }); 39 | var stage = new PIXI.Container(); 40 | var slidesContainer = new PIXI.Container(); 41 | var displacementSprite = new PIXI.Sprite.fromImage( options.displacementImage ); 42 | var displacementFilter = new PIXI.filters.DisplacementFilter( displacementSprite ); 43 | 44 | 45 | 46 | // TEXTS 47 | /// --------------------------- 48 | var style = new PIXI.TextStyle({ 49 | fill: options.textColor, 50 | wordWrap: true, 51 | wordWrapWidth: 400, 52 | letterSpacing: 20, 53 | fontSize: 14 54 | }); 55 | 56 | 57 | 58 | // SLIDES ARRAY INDEX 59 | /// --------------------------- 60 | this.currentIndex = 0; 61 | 62 | 63 | 64 | /// --------------------------- 65 | // INITIALISE PIXI 66 | /// --------------------------- 67 | this.initPixi = function() { 68 | 69 | // Add canvas to the HTML 70 | document.body.appendChild( renderer.view ); 71 | 72 | 73 | // Add child container to the main container 74 | stage.addChild( slidesContainer ); 75 | 76 | 77 | // Enable Interactions 78 | stage.interactive = true; 79 | 80 | 81 | // Fit renderer to the screen 82 | if ( options.fullScreen === true ) { 83 | renderer.view.style.objectFit = 'cover'; 84 | renderer.view.style.width = '100%'; 85 | renderer.view.style.height = '100%'; 86 | renderer.view.style.top = '50%'; 87 | renderer.view.style.left = '50%'; 88 | renderer.view.style.webkitTransform = 'translate( -50%, -50% ) scale(1.2)'; 89 | renderer.view.style.transform = 'translate( -50%, -50% ) scale(1.2)'; 90 | } else { 91 | renderer.view.style.maxWidth = '100%'; 92 | renderer.view.style.top = '50%'; 93 | renderer.view.style.left = '50%'; 94 | renderer.view.style.webkitTransform = 'translate( -50%, -50% )'; 95 | renderer.view.style.transform = 'translate( -50%, -50% )'; 96 | } 97 | 98 | 99 | displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; 100 | 101 | 102 | // Set the filter to stage and set some default values for the animation 103 | stage.filters = [displacementFilter]; 104 | 105 | if ( options.autoPlay === false ) { 106 | displacementFilter.scale.x = 0; 107 | displacementFilter.scale.y = 0; 108 | } 109 | 110 | if ( options.wacky === true ) { 111 | 112 | displacementSprite.anchor.set(0.5); 113 | displacementSprite.x = renderer.width / 2; 114 | displacementSprite.y = renderer.height / 2; 115 | } 116 | 117 | displacementSprite.scale.x = 2; 118 | displacementSprite.scale.y = 2; 119 | 120 | // PIXI tries to fit the filter bounding box to the renderer so we optionally bypass 121 | displacementFilter.autoFit = options.displaceAutoFit; 122 | 123 | stage.addChild( displacementSprite ); 124 | 125 | }; 126 | 127 | 128 | 129 | /// --------------------------- 130 | // LOAD SLIDES TO CANVAS 131 | /// --------------------------- 132 | this.loadPixiSprites = function( sprites ) { 133 | 134 | 135 | var rSprites = options.sprites; 136 | var rTexts = options.texts; 137 | 138 | for ( var i = 0; i < rSprites.length; i++ ) { 139 | 140 | var texture = new PIXI.Texture.fromImage( sprites[i] ); 141 | var image = new PIXI.Sprite( texture ); 142 | 143 | if ( rTexts ) { 144 | var richText = new PIXI.Text( rTexts[i], style); 145 | image.addChild(richText); 146 | 147 | richText.anchor.set(0.5); 148 | richText.x = image.width / 2; 149 | richText.y = image.height / 2; 150 | } 151 | 152 | 153 | if ( options.centerSprites === true ) { 154 | image.anchor.set(0.5); 155 | image.x = renderer.width / 2; 156 | image.y = renderer.height / 2; 157 | } 158 | //image.transform.scale.x = 1.3; 159 | //image.transform.scale.y = 1.3; 160 | 161 | 162 | if ( i !== 0 ) { 163 | TweenMax.set( image, { alpha: 0 } ); 164 | } 165 | 166 | slidesContainer.addChild( image ); 167 | 168 | } 169 | 170 | }; 171 | 172 | 173 | 174 | /// --------------------------- 175 | // DEFAULT RENDER/ANIMATION 176 | /// --------------------------- 177 | if ( options.autoPlay === true ) { 178 | 179 | var ticker = new PIXI.ticker.Ticker(); 180 | 181 | ticker.autoStart = options.autoPlay; 182 | 183 | ticker.add(function( delta ) { 184 | 185 | displacementSprite.x += options.autoPlaySpeed[0] * delta; 186 | displacementSprite.y += options.autoPlaySpeed[1]; 187 | 188 | displacementSprite.x += 2.14 * delta; 189 | displacementSprite.y += 22.24 * delta; 190 | displacementSprite.rotation.x += 20.3; 191 | 192 | renderer.render( stage ); 193 | 194 | }); 195 | 196 | } else { 197 | 198 | var render = new PIXI.ticker.Ticker(); 199 | 200 | render.autoStart = true; 201 | 202 | render.add(function( delta ) { 203 | renderer.render( stage ); 204 | }); 205 | 206 | } 207 | 208 | 209 | /// --------------------------- 210 | // TRANSITION BETWEEN SLIDES 211 | /// --------------------------- 212 | 213 | var transitionAnimation = new PIXI.ticker.Ticker(); 214 | transitionAnimation.autoStart = false; 215 | 216 | transitionAnimation.add(function( delta ) { 217 | displacementSprite.x += 2.14 * delta; 218 | displacementSprite.y += 22.24 * delta; 219 | displacementSprite.rotation.x += 20.3; 220 | }); 221 | 222 | 223 | var isPlaying = false; 224 | var slideImages = slidesContainer.children; 225 | this.moveSlider = function( newIndex ) { 226 | 227 | isPlaying = true; 228 | transitionAnimation.start(); 229 | 230 | var baseTimeline = new TimelineMax( { onComplete: function () { 231 | that.currentIndex = newIndex; 232 | isPlaying = false; 233 | transitionAnimation.stop(); 234 | if ( options.wacky === true ) { 235 | displacementSprite.scale.set( 1 ); 236 | } 237 | },onUpdate: function() { 238 | 239 | if ( options.wacky === true ) { 240 | displacementSprite.rotation += baseTimeline.progress() * 0.02; 241 | displacementSprite.scale.set( baseTimeline.progress() * 3 ); 242 | } 243 | 244 | } }); 245 | 246 | baseTimeline.clear(); 247 | 248 | if ( baseTimeline.isActive() ) { 249 | return; 250 | } 251 | 252 | baseTimeline 253 | .to(displacementFilter.scale, 1, { y: "+="+1280+"", ease: Power3.easeOut }) 254 | .to(slideImages[that.currentIndex], 0.5, { alpha: 0, ease: Power3.easeOut }, 0.4) 255 | .to(slideImages[newIndex], 0.5, { alpha: 1, ease: Power3.easeInOut }, 0.7) 256 | .to(displacementFilter.scale, 1, { y: 20, ease: Power3.easeOut }, 1 ); 257 | 258 | }; 259 | 260 | 261 | 262 | /// --------------------------- 263 | // CLICK HANDLERS 264 | /// --------------------------- 265 | var nav = options.navElement; 266 | 267 | for ( var i = 0; i < nav.length; i++ ) { 268 | 269 | var navItem = nav[i]; 270 | 271 | navItem.onclick = function( event ) { 272 | 273 | // Make sure the previous transition has ended 274 | if ( isPlaying ) { 275 | return false; 276 | } 277 | 278 | if ( this.getAttribute('data-nav') === 'next' ) { 279 | 280 | if ( that.currentIndex >= 0 && that.currentIndex < slideImages.length - 1 ) { 281 | that.moveSlider( that.currentIndex + 1 ); 282 | } else { 283 | that.moveSlider( 0 ); 284 | } 285 | 286 | } else { 287 | 288 | if ( that.currentIndex > 0 && that.currentIndex < slideImages.length ) { 289 | that.moveSlider( that.currentIndex - 1 ); 290 | } else { 291 | that.moveSlider( spriteImages.length - 1 ); 292 | } 293 | 294 | } 295 | 296 | return false; 297 | 298 | } 299 | 300 | } 301 | 302 | 303 | 304 | /// --------------------------- 305 | // INIT FUNCTIONS 306 | /// --------------------------- 307 | this.init = function() { 308 | 309 | 310 | that.initPixi(); 311 | that.loadPixiSprites( options.pixiSprites ); 312 | 313 | /* 314 | if ( options.fullScreen === true ) { 315 | window.addEventListener("resize", function( event ){ 316 | scaleToWindow( renderer.view ); 317 | }); 318 | scaleToWindow( renderer.view ); 319 | } 320 | */ 321 | 322 | 323 | }; 324 | 325 | 326 | /// --------------------------- 327 | // INTERACTIONS 328 | /// --------------------------- 329 | function rotateSpite() { 330 | displacementSprite.rotation += 0.001; 331 | rafID = requestAnimationFrame( rotateSpite ); 332 | } 333 | 334 | if ( options.interactive === true ) { 335 | 336 | var rafID, mouseX, mouseY; 337 | 338 | // Enable interactions on our slider 339 | slidesContainer.interactive = true; 340 | slidesContainer.buttonMode = true; 341 | 342 | // HOVER 343 | if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { 344 | 345 | slidesContainer.pointerover = function( mouseData ){ 346 | mouseX = mouseData.data.global.x; 347 | mouseY = mouseData.data.global.y; 348 | TweenMax.to( displacementFilter.scale, 1, { x: "+=" + Math.sin( mouseX ) * 100 + "", y: "+=" + Math.cos( mouseY ) * 100 + "" }); 349 | rotateSpite(); 350 | }; 351 | 352 | slidesContainer.pointerout = function( mouseData ){ 353 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); 354 | cancelAnimationFrame( rafID ); 355 | }; 356 | 357 | } 358 | 359 | // CLICK 360 | if ( options.interactionEvent === 'click' || options.interactionEvent === 'both' ) { 361 | 362 | slidesContainer.pointerup = function( mouseData ){ 363 | if ( options.dispatchPointerOver === true ) { 364 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0, onComplete: function() { 365 | TweenMax.to( displacementFilter.scale, 1, { x: 20, y: 20 }); 366 | } }); 367 | } else { 368 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); 369 | cancelAnimationFrame( rafID ); 370 | } 371 | 372 | }; 373 | 374 | slidesContainer.pointerdown = function( mouseData ){ 375 | mouseX = mouseData.data.global.x; 376 | mouseY = mouseData.data.global.y; 377 | TweenMax.to( displacementFilter.scale, 1, { x: "+=" + Math.sin( mouseX ) * 1200 + "", y: "+=" + Math.cos( mouseY ) * 200 + "" }); 378 | }; 379 | 380 | slidesContainer.pointerout = function( mouseData ){ 381 | if ( options.dispatchPointerOver === true ) { 382 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0, onComplete: function() { 383 | TweenMax.to( displacementFilter.scale, 1, { x: 20, y: 20 }); 384 | } }); 385 | } else { 386 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); 387 | cancelAnimationFrame( rafID ); 388 | } 389 | 390 | }; 391 | 392 | } 393 | 394 | } 395 | 396 | 397 | 398 | /// --------------------------- 399 | // CENTER DISPLACEMENT 400 | /// --------------------------- 401 | if ( options.displacementCenter === true ) { 402 | displacementSprite.anchor.set(0.5); 403 | displacementSprite.x = renderer.view.width / 2; 404 | displacementSprite.y = renderer.view.height / 2; 405 | } 406 | 407 | 408 | /// --------------------------- 409 | // START 410 | /// --------------------------- 411 | this.init(); 412 | 413 | 414 | /// --------------------------- 415 | // HELPER FUNCTIONS 416 | /// --------------------------- 417 | function scaleToWindow( canvas, backgroundColor ) { 418 | var scaleX, scaleY, scale, center; 419 | 420 | //1. Scale the canvas to the correct size 421 | //Figure out the scale amount on each axis 422 | scaleX = window.innerWidth / canvas.offsetWidth; 423 | scaleY = window.innerHeight / canvas.offsetHeight; 424 | 425 | //Scale the canvas based on whichever value is less: `scaleX` or `scaleY` 426 | scale = Math.min(scaleX, scaleY); 427 | canvas.style.transformOrigin = "0 0"; 428 | canvas.style.transform = "scale(" + scale + ")"; 429 | 430 | //2. Center the canvas. 431 | //Decide whether to center the canvas vertically or horizontally. 432 | //Wide canvases should be centered vertically, and 433 | //square or tall canvases should be centered horizontally 434 | if (canvas.offsetWidth > canvas.offsetHeight) { 435 | if (canvas.offsetWidth * scale < window.innerWidth) { 436 | center = "horizontally"; 437 | } else { 438 | center = "vertically"; 439 | } 440 | } else { 441 | if (canvas.offsetHeight * scale < window.innerHeight) { 442 | center = "vertically"; 443 | } else { 444 | center = "horizontally"; 445 | } 446 | } 447 | 448 | //Center horizontally (for square or tall canvases) 449 | var margin; 450 | if (center === "horizontally") { 451 | margin = (window.innerWidth - canvas.offsetWidth * scale) / 2; 452 | canvas.style.marginTop = 0 + "px"; 453 | canvas.style.marginBottom = 0 + "px"; 454 | canvas.style.marginLeft = margin + "px"; 455 | canvas.style.marginRight = margin + "px"; 456 | } 457 | 458 | //Center vertically (for wide canvases) 459 | if (center === "vertically") { 460 | margin = (window.innerHeight - canvas.offsetHeight * scale) / 2; 461 | canvas.style.marginTop = margin + "px"; 462 | canvas.style.marginBottom = margin + "px"; 463 | canvas.style.marginLeft = 0 + "px"; 464 | canvas.style.marginRight = 0 + "px"; 465 | } 466 | 467 | //3. Remove any padding from the canvas and body and set the canvas 468 | //display style to "block" 469 | canvas.style.paddingLeft = 0 + "px"; 470 | canvas.style.paddingRight = 0 + "px"; 471 | canvas.style.paddingTop = 0 + "px"; 472 | canvas.style.paddingBottom = 0 + "px"; 473 | canvas.style.display = "block"; 474 | 475 | //4. Set the color of the HTML body background 476 | document.body.style.backgroundColor = backgroundColor; 477 | 478 | //Fix some quirkiness in scaling for Safari 479 | var ua = navigator.userAgent.toLowerCase(); 480 | if (ua.indexOf("safari") != -1) { 481 | if (ua.indexOf("chrome") > -1) { 482 | // Chrome 483 | } else { 484 | // Safari 485 | //canvas.style.maxHeight = "100%"; 486 | //canvas.style.minHeight = "100%"; 487 | } 488 | } 489 | 490 | //5. Return the `scale` value. This is important, because you'll nee this value 491 | //for correct hit testing between the pointer and sprites 492 | return scale; 493 | } // http://bit.ly/2y1Yk2k 494 | 495 | 496 | }; 497 | 498 | })(); -------------------------------------------------------------------------------- /js/main5.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | window.CanvasSlideshow = function( options ) { 4 | 5 | 6 | 7 | // SCOPE 8 | /// --------------------------- 9 | var that = this; 10 | 11 | 12 | 13 | // OPTIONS 14 | /// --------------------------- 15 | options = options || {}; 16 | options.stageWidth = options.hasOwnProperty('stageWidth') ? options.stageWidth : 1920; 17 | options.stageHeight = options.hasOwnProperty('stageHeight') ? options.stageHeight : 1080; 18 | options.pixiSprites = options.hasOwnProperty('sprites') ? options.sprites : []; 19 | options.centerSprites = options.hasOwnProperty('centerSprites') ? options.centerSprites : false; 20 | options.texts = options.hasOwnProperty('texts') ? options.texts : []; 21 | options.autoPlay = options.hasOwnProperty('autoPlay') ? options.autoPlay : true; 22 | options.autoPlaySpeed = options.hasOwnProperty('autoPlaySpeed') ? options.autoPlaySpeed : [10, 3]; 23 | options.fullScreen = options.hasOwnProperty('fullScreen') ? options.fullScreen : true; 24 | options.displaceScale = options.hasOwnProperty('displaceScale') ? options.displaceScale : [200, 70]; 25 | options.displacementImage = options.hasOwnProperty('displacementImage') ? options.displacementImage : ''; 26 | options.navElement = options.hasOwnProperty('navElement') ? options.navElement : document.querySelectorAll( '.scene-nav' ); 27 | options.displaceAutoFit = options.hasOwnProperty('displaceAutoFit') ? options.displaceAutoFit : false; 28 | options.wacky = options.hasOwnProperty('wacky') ? options.wacky : false; 29 | options.interactive = options.hasOwnProperty('interactive') ? options.interactive : false; 30 | options.interactionEvent = options.hasOwnProperty('interactionEvent') ? options.interactionEvent : ''; 31 | options.displaceScaleTo = ( options.autoPlay === false ) ? [ 0, 0 ] : [ 20, 20 ]; 32 | options.textColor = options.hasOwnProperty('textColor') ? options.textColor : '#fff'; 33 | options.displacementCenter = options.hasOwnProperty('displacementCenter') ? options.displacementCenter : false; 34 | options.dispatchPointerOver = options.hasOwnProperty('dispatchPointerOver') ? options.dispatchPointerOver : false; 35 | 36 | 37 | 38 | // PIXI VARIABLES 39 | /// --------------------------- 40 | var renderer = new PIXI.autoDetectRenderer( options.stageWidth, options.stageHeight, { transparent: true }); 41 | var stage = new PIXI.Container(); 42 | var slidesContainer = new PIXI.Container(); 43 | var displacementSprite = new PIXI.Sprite.fromImage( options.displacementImage ); 44 | var displacementFilter = new PIXI.filters.DisplacementFilter( displacementSprite ); 45 | 46 | 47 | 48 | // TEXTS 49 | /// --------------------------- 50 | var style = new PIXI.TextStyle({ 51 | fill: options.textColor, 52 | wordWrap: true, 53 | wordWrapWidth: 400, 54 | letterSpacing: 20, 55 | fontSize: 14 56 | }); 57 | 58 | 59 | 60 | // SLIDES ARRAY INDEX 61 | /// --------------------------- 62 | this.currentIndex = 0; 63 | 64 | 65 | 66 | /// --------------------------- 67 | // INITIALISE PIXI 68 | /// --------------------------- 69 | this.initPixi = function() { 70 | 71 | // Add canvas to the HTML 72 | document.body.appendChild( renderer.view ); 73 | 74 | 75 | // Add child container to the main container 76 | stage.addChild( slidesContainer ); 77 | 78 | 79 | // Enable Interactions 80 | stage.interactive = true; 81 | 82 | 83 | // Fit renderer to the screen 84 | if ( options.fullScreen === true ) { 85 | renderer.view.style.objectFit = 'cover'; 86 | renderer.view.style.width = '100%'; 87 | renderer.view.style.height = '100%'; 88 | renderer.view.style.top = '50%'; 89 | renderer.view.style.left = '50%'; 90 | renderer.view.style.webkitTransform = 'translate( -50%, -50% ) scale(1.2)'; 91 | renderer.view.style.transform = 'translate( -50%, -50% ) scale(1.2)'; 92 | } else { 93 | renderer.view.style.maxWidth = '100%'; 94 | renderer.view.style.top = '50%'; 95 | renderer.view.style.left = '50%'; 96 | renderer.view.style.webkitTransform = 'translate( -50%, -50% )'; 97 | renderer.view.style.transform = 'translate( -50%, -50% )'; 98 | } 99 | 100 | 101 | displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; 102 | 103 | 104 | // Set the filter to stage and set some default values for the animation 105 | stage.filters = [displacementFilter]; 106 | 107 | if ( options.autoPlay === false ) { 108 | displacementFilter.scale.x = 0; 109 | displacementFilter.scale.y = 0; 110 | } 111 | 112 | if ( options.wacky === true ) { 113 | 114 | displacementSprite.anchor.set(0.5); 115 | displacementSprite.x = renderer.width / 2; 116 | displacementSprite.y = renderer.height / 2; 117 | } 118 | 119 | displacementSprite.scale.x = 2; 120 | displacementSprite.scale.y = 2; 121 | 122 | // PIXI tries to fit the filter bounding box to the renderer so we optionally bypass 123 | displacementFilter.autoFit = options.displaceAutoFit; 124 | 125 | stage.addChild( displacementSprite ); 126 | 127 | }; 128 | 129 | 130 | 131 | /// --------------------------- 132 | // LOAD SLIDES TO CANVAS 133 | /// --------------------------- 134 | this.loadPixiSprites = function( sprites ) { 135 | 136 | 137 | var rSprites = options.sprites; 138 | var rTexts = options.texts; 139 | 140 | for ( var i = 0; i < rSprites.length; i++ ) { 141 | 142 | var texture = new PIXI.Texture.fromImage( sprites[i] ); 143 | var image = new PIXI.Sprite( texture ); 144 | 145 | if ( rTexts ) { 146 | var richText = new PIXI.Text( rTexts[i], style); 147 | image.addChild(richText); 148 | 149 | richText.anchor.set(0.5); 150 | richText.x = image.width / 2; 151 | richText.y = image.height / 2; 152 | } 153 | 154 | if ( options.centerSprites === true ) { 155 | image.anchor.set(0.5); 156 | image.x = renderer.width / 2; 157 | image.y = renderer.height / 2; 158 | } 159 | // image.transform.scale.x = 1.3; 160 | // image.transform.scale.y = 1.3; 161 | 162 | 163 | 164 | if ( i !== 0 ) { 165 | TweenMax.set( image, { alpha: 0 } ); 166 | } 167 | 168 | slidesContainer.addChild( image ); 169 | 170 | } 171 | 172 | }; 173 | 174 | 175 | 176 | /// --------------------------- 177 | // DEFAULT RENDER/ANIMATION 178 | /// --------------------------- 179 | if ( options.autoPlay === true ) { 180 | 181 | var ticker = new PIXI.ticker.Ticker(); 182 | 183 | ticker.autoStart = options.autoPlay; 184 | 185 | ticker.add(function( delta ) { 186 | 187 | displacementSprite.x += options.autoPlaySpeed[0] * delta; 188 | displacementSprite.y += options.autoPlaySpeed[1]; 189 | 190 | renderer.render( stage ); 191 | 192 | }); 193 | 194 | } else { 195 | 196 | var render = new PIXI.ticker.Ticker(); 197 | 198 | render.autoStart = true; 199 | 200 | render.add(function( delta ) { 201 | renderer.render( stage ); 202 | }); 203 | 204 | } 205 | 206 | 207 | /// --------------------------- 208 | // TRANSITION BETWEEN SLIDES 209 | /// --------------------------- 210 | var isPlaying = false; 211 | var slideImages = slidesContainer.children; 212 | this.moveSlider = function( newIndex ) { 213 | 214 | isPlaying = true; 215 | 216 | 217 | var baseTimeline = new TimelineMax( { onComplete: function () { 218 | that.currentIndex = newIndex; 219 | isPlaying = false; 220 | if ( options.wacky === true ) { 221 | displacementSprite.scale.set( 1 ); 222 | } 223 | },onUpdate: function() { 224 | 225 | if ( options.wacky === true ) { 226 | displacementSprite.rotation += baseTimeline.progress() * 0.02; 227 | displacementSprite.scale.set( baseTimeline.progress() * 3 ); 228 | } 229 | 230 | } }); 231 | 232 | baseTimeline.clear(); 233 | 234 | if ( baseTimeline.isActive() ) { 235 | return; 236 | } 237 | 238 | // DEMO 4 239 | baseTimeline 240 | .to(displacementFilter.scale, 0.8, { x: options.displaceScale[0], y: options.displaceScale[1], ease: Power2.easeIn }) 241 | .to(slideImages[that.currentIndex], 0.5, { alpha: 0, ease: Power2.easeOut }, 0.4) 242 | .to(slideImages[newIndex], 0.8, { alpha: 1, ease: Power2.easeOut }, 1) 243 | .to(displacementFilter.scale, 0.7, { x: options.displaceScaleTo[0], y: options.displaceScaleTo[1], ease: Power1.easeOut }, 0.9 ); 244 | 245 | }; 246 | 247 | 248 | 249 | /// --------------------------- 250 | // CLICK HANDLERS 251 | /// --------------------------- 252 | var nav = options.navElement; 253 | 254 | for ( var i = 0; i < nav.length; i++ ) { 255 | 256 | var navItem = nav[i]; 257 | 258 | navItem.onclick = function( event ) { 259 | 260 | // Make sure the previous transition has ended 261 | if ( isPlaying ) { 262 | return false; 263 | } 264 | 265 | if ( this.getAttribute('data-nav') === 'next' ) { 266 | 267 | if ( that.currentIndex >= 0 && that.currentIndex < slideImages.length - 1 ) { 268 | that.moveSlider( that.currentIndex + 1 ); 269 | } else { 270 | that.moveSlider( 0 ); 271 | } 272 | 273 | } else { 274 | 275 | if ( that.currentIndex > 0 && that.currentIndex < slideImages.length ) { 276 | that.moveSlider( that.currentIndex - 1 ); 277 | } else { 278 | that.moveSlider( spriteImages.length - 1 ); 279 | } 280 | 281 | } 282 | 283 | return false; 284 | 285 | } 286 | 287 | } 288 | 289 | 290 | 291 | /// --------------------------- 292 | // INIT FUNCTIONS 293 | /// --------------------------- 294 | 295 | this.init = function() { 296 | 297 | 298 | that.initPixi(); 299 | that.loadPixiSprites( options.pixiSprites ); 300 | 301 | /* 302 | if ( options.fullScreen === true ) { 303 | window.addEventListener("resize", function( event ){ 304 | scaleToWindow( renderer.view ); 305 | }); 306 | scaleToWindow( renderer.view ); 307 | } 308 | */ 309 | 310 | 311 | }; 312 | 313 | 314 | 315 | 316 | /// --------------------------- 317 | // INTERACTIONS 318 | /// --------------------------- 319 | function rotateSpite() { 320 | displacementSprite.rotation += 0.001; 321 | rafID = requestAnimationFrame( rotateSpite ); 322 | } 323 | 324 | if ( options.interactive === true ) { 325 | 326 | var rafID, mouseX, mouseY; 327 | 328 | // Enable interactions on our slider 329 | slidesContainer.interactive = true; 330 | slidesContainer.buttonMode = true; 331 | 332 | // HOVER 333 | if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { 334 | 335 | slidesContainer.pointerover = function( mouseData ){ 336 | mouseX = mouseData.data.global.x; 337 | mouseY = mouseData.data.global.y; 338 | TweenMax.to( displacementFilter.scale, 1, { x: "+=" + Math.sin( mouseX ) * 100 + "", y: "+=" + Math.cos( mouseY ) * 100 + "" }); 339 | rotateSpite(); 340 | }; 341 | 342 | slidesContainer.pointerout = function( mouseData ){ 343 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); 344 | cancelAnimationFrame( rafID ); 345 | }; 346 | 347 | } 348 | 349 | // CLICK 350 | if ( options.interactionEvent === 'click' || options.interactionEvent === 'both' ) { 351 | 352 | slidesContainer.pointerup = function( mouseData ){ 353 | if ( options.dispatchPointerOver === true ) { 354 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0, onComplete: function() { 355 | TweenMax.to( displacementFilter.scale, 1, { x: 20, y: 20 }); 356 | } }); 357 | } else { 358 | TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); 359 | cancelAnimationFrame( rafID ); 360 | } 361 | 362 | }; 363 | 364 | slidesContainer.pointerdown = function( mouseData ){ 365 | mouseX = mouseData.data.global.x; 366 | mouseY = mouseData.data.global.y; 367 | TweenMax.to( displacementFilter.scale, 1, { x: "+=" + Math.sin( mouseX ) * 1200 + "", y: "+=" + Math.cos( mouseY ) * 200 + "" }); 368 | }; 369 | 370 | } 371 | 372 | } 373 | 374 | 375 | /// --------------------------- 376 | // CENTER DISPLACEMENT 377 | /// --------------------------- 378 | if ( options.displacementCenter === true ) { 379 | displacementSprite.anchor.set(0.5); 380 | displacementSprite.x = renderer.view.width / 2; 381 | displacementSprite.y = renderer.view.height / 2; 382 | } 383 | 384 | 385 | /// --------------------------- 386 | // START 387 | /// --------------------------- 388 | this.init(); 389 | 390 | 391 | /// --------------------------- 392 | // HELPER FUNCTIONS 393 | /// --------------------------- 394 | function scaleToWindow( canvas, backgroundColor ) { 395 | var scaleX, scaleY, scale, center; 396 | 397 | //1. Scale the canvas to the correct size 398 | //Figure out the scale amount on each axis 399 | scaleX = window.innerWidth / canvas.offsetWidth; 400 | scaleY = window.innerHeight / canvas.offsetHeight; 401 | 402 | //Scale the canvas based on whichever value is less: `scaleX` or `scaleY` 403 | scale = Math.min(scaleX, scaleY); 404 | canvas.style.transformOrigin = "0 0"; 405 | canvas.style.transform = "scale(" + scale + ")"; 406 | 407 | //2. Center the canvas. 408 | //Decide whether to center the canvas vertically or horizontally. 409 | //Wide canvases should be centered vertically, and 410 | //square or tall canvases should be centered horizontally 411 | if (canvas.offsetWidth > canvas.offsetHeight) { 412 | if (canvas.offsetWidth * scale < window.innerWidth) { 413 | center = "horizontally"; 414 | } else { 415 | center = "vertically"; 416 | } 417 | } else { 418 | if (canvas.offsetHeight * scale < window.innerHeight) { 419 | center = "vertically"; 420 | } else { 421 | center = "horizontally"; 422 | } 423 | } 424 | 425 | //Center horizontally (for square or tall canvases) 426 | var margin; 427 | if (center === "horizontally") { 428 | margin = (window.innerWidth - canvas.offsetWidth * scale) / 2; 429 | canvas.style.marginTop = 0 + "px"; 430 | canvas.style.marginBottom = 0 + "px"; 431 | canvas.style.marginLeft = margin + "px"; 432 | canvas.style.marginRight = margin + "px"; 433 | } 434 | 435 | //Center vertically (for wide canvases) 436 | if (center === "vertically") { 437 | margin = (window.innerHeight - canvas.offsetHeight * scale) / 2; 438 | canvas.style.marginTop = margin + "px"; 439 | canvas.style.marginBottom = margin + "px"; 440 | canvas.style.marginLeft = 0 + "px"; 441 | canvas.style.marginRight = 0 + "px"; 442 | } 443 | 444 | //3. Remove any padding from the canvas and body and set the canvas 445 | //display style to "block" 446 | canvas.style.paddingLeft = 0 + "px"; 447 | canvas.style.paddingRight = 0 + "px"; 448 | canvas.style.paddingTop = 0 + "px"; 449 | canvas.style.paddingBottom = 0 + "px"; 450 | canvas.style.display = "block"; 451 | 452 | //4. Set the color of the HTML body background 453 | document.body.style.backgroundColor = backgroundColor; 454 | 455 | //Fix some quirkiness in scaling for Safari 456 | var ua = navigator.userAgent.toLowerCase(); 457 | if (ua.indexOf("safari") != -1) { 458 | if (ua.indexOf("chrome") > -1) { 459 | // Chrome 460 | } else { 461 | // Safari 462 | //canvas.style.maxHeight = "100%"; 463 | //canvas.style.minHeight = "100%"; 464 | } 465 | } 466 | 467 | //5. Return the `scale` value. This is important, because you'll nee this value 468 | //for correct hit testing between the pointer and sprites 469 | return scale; 470 | } // http://bit.ly/2y1Yk2k 471 | 472 | 473 | }; 474 | 475 | })(); -------------------------------------------------------------------------------- /pater/hotjar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/LiquidDistortion/d8f91ae96e4a0777385f4bb557b4484a0a22f550/pater/hotjar.png -------------------------------------------------------------------------------- /pater/pater.css: -------------------------------------------------------------------------------- 1 | .pater { 2 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important; 3 | position: fixed; 4 | z-index: 1000; 5 | right: 0; 6 | bottom: 0; 7 | display: grid; 8 | width: 100%; 9 | padding: 1em 0; 10 | text-align: left; 11 | color: white; 12 | background: #000; 13 | grid-template-columns: auto; 14 | grid-template-rows: auto auto auto; 15 | } 16 | 17 | .pater:hover { 18 | color: #333; 19 | } 20 | 21 | .pater::before { 22 | content: 'Our Sponsor'; 23 | font-size: 0.75em; 24 | display: inline-block; 25 | padding: 0 0 5px 10px; 26 | vertical-align: middle; 27 | grid-area: 1 / 1 / 2 / 2; 28 | } 29 | 30 | .pater__img { 31 | display: none; 32 | background-image: url(hotjar.png); 33 | background-size: cover; 34 | grid-area: 2 / 1 / 3 / 2; 35 | } 36 | 37 | .pater__title { 38 | font-size: 0.85em; 39 | font-weight: normal; 40 | font-weight: bold; 41 | align-self: end; 42 | margin: 0; 43 | } 44 | 45 | .pater__title, 46 | .pater__description { 47 | align-self: start; 48 | padding: 10px 0 0 10px; 49 | grid-area: 2 / 1 / 3 / 3; 50 | } 51 | 52 | .pater__description { 53 | font-size: 0.85em; 54 | display: none; 55 | margin: 0; 56 | opacity: 0; 57 | } 58 | 59 | .pater__description strong { 60 | display: block; 61 | padding-top: 5px; 62 | color: #e53f3e; 63 | } 64 | 65 | @media screen and (min-width: 60em) { 66 | .pater { 67 | top: 0; 68 | right: 0; 69 | bottom: auto; 70 | width: calc(180px + 2em); 71 | margin: 0 1.5em 0 0; 72 | padding: 0; 73 | padding: 1em; 74 | background: #fff; 75 | color: #000; 76 | } 77 | .pater__img { 78 | display: flex; 79 | width: 100%; 80 | height: 86px; 81 | transition: transform 0.5s; 82 | } 83 | .pater:hover .pater__img { 84 | transform: translate3d(0,-10px,0); 85 | } 86 | .pater::before { 87 | display: block; 88 | text-align: left; 89 | padding: 0 0 10px 0; 90 | } 91 | .pater:hover .pater__title { 92 | opacity: 0; 93 | } 94 | .pater__title::before { 95 | display: none; 96 | } 97 | .pater:hover .pater__description { 98 | opacity: 1; 99 | } 100 | .pater__description { 101 | display: block; 102 | } 103 | .pater__title { 104 | font-size: 1em; 105 | padding: 20px 10px 0 10px; 106 | } 107 | .pater__title, 108 | .pater__description { 109 | padding-left: 0; 110 | transition: opacity 0.5s; 111 | grid-area: 3 / 1 / 4 / 2; 112 | } 113 | } 114 | --------------------------------------------------------------------------------