├── .gitignore
├── README.md
├── css
    ├── base.css
    ├── demo1.css
    ├── demo2.css
    └── demo3.css
├── favicon.ico
├── img
    ├── 1.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── 4.jpg
    ├── 5.jpg
    ├── 6.jpg
    ├── img1.jpg
    └── img2.jpg
├── index.html
├── index2.html
├── index3.html
└── js
    ├── demo.js
    └── imagesloaded.pkgd.min.js


/.gitignore:
--------------------------------------------------------------------------------
1 | *.DS_Store
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CSS Glitch Effect
 2 | 
 3 | A glitch effect using CSS animations and clip-path. Inspired by the technique seen on the [speakers page](https://www.404.ie/speakers/) of the 404 conference.
 4 | 
 5 | ![Image Glitch Effect](https://tympanus.net/codrops/wp-content/uploads/2017/12/ImageGlitchEffect_Featured.jpg)
 6 | 
 7 | [Article on Codrops](https://tympanus.net/codrops/?p=33498)
 8 | 
 9 | [Demo](https://tympanus.net/Tutorials/CSSGlitchEffect/)
10 | 
11 | ## Credits
12 | 
13 | - [imagesLoaded](http://imagesloaded.desandro.com/) by Dave DeSandro
14 | - Images by [Unsplash.com](http://unsplash.com)
15 | 
16 | ## License
17 | 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.
18 | 
19 | ## Misc
20 | 
21 | 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/)
22 | 
23 | 
24 | [© Codrops 2017](http://www.codrops.com)
25 | 
26 | 
27 | 
28 | 
29 | 
30 | 


--------------------------------------------------------------------------------
/css/base.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;}
  2 | *,
  3 | *::after,
  4 | *::before {
  5 | 	box-sizing: border-box;
  6 | }
  7 | 
  8 | html {
  9 | 	background: #1d2121;
 10 | }
 11 | 
 12 | body {
 13 | 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
 14 | 	min-height: 100vh;
 15 | 	color: #57585c;
 16 | 	color: var(--color-text);
 17 | 	background-color: #fff;
 18 | 	background-color: var(--color-bg);
 19 | 	-webkit-font-smoothing: antialiased;
 20 | 	-moz-osx-font-smoothing: grayscale;
 21 | }
 22 | 
 23 | /* Fade effect */
 24 | .js body {
 25 | 	opacity: 0;
 26 | 	transition: opacity 0.3s;
 27 | }
 28 | 
 29 | .js body.render {
 30 | 	opacity: 1;
 31 | }
 32 | 
 33 | /* Page Loader */
 34 | .js .loading::before {
 35 | 	content: '';
 36 | 	position: fixed;
 37 | 	z-index: 100000;
 38 | 	top: 0;
 39 | 	left: 0;
 40 | 	width: 100%;
 41 | 	height: 100%;
 42 | 	background: var(--color-bg);
 43 | }
 44 | 
 45 | .js .loading::after {
 46 | 	content: '';
 47 | 	position: fixed;
 48 | 	z-index: 100000;
 49 | 	top: 50%;
 50 | 	left: 50%;
 51 | 	width: 60px;
 52 | 	height: 60px;
 53 | 	margin: -30px 0 0 -30px;
 54 | 	pointer-events: none;
 55 | 	border-radius: 50%;
 56 | 	opacity: 0.4;
 57 | 	background: var(--color-link);
 58 | 	animation: loaderAnim 0.7s linear infinite alternate forwards;
 59 | }
 60 | 
 61 | @keyframes loaderAnim {
 62 | 	to {
 63 | 		opacity: 1;
 64 | 		transform: scale3d(0.5,0.5,1);
 65 | 	}
 66 | }
 67 | 
 68 | a {
 69 | 	text-decoration: none;
 70 | 	color: var(--color-link);
 71 | 	outline: none;
 72 | }
 73 | 
 74 | a:hover,
 75 | a:focus {
 76 | 	color: var(--color-link-hover);
 77 | 	outline: none;
 78 | }
 79 | 
 80 | .hidden {
 81 | 	position: absolute;
 82 | 	overflow: hidden;
 83 | 	width: 0;
 84 | 	height: 0;
 85 | 	pointer-events: none;
 86 | }
 87 | 
 88 | .message {
 89 | 	position: relative;
 90 | 	z-index: 100;
 91 | 	padding: 1.5em 1em;
 92 | 	font-size: 0.85em;
 93 | 	font-weight: bold;
 94 | 	text-align: center;
 95 | 	color: var(--color-bg);
 96 | 	background: var(--color-text);
 97 | }
 98 | 
 99 | @supports(-webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%)) or (clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%)) {
100 | 	.message {
101 | 		display: none;
102 | 	}
103 | }
104 | 
105 | /* Icons */
106 | .icon {
107 | 	display: block;
108 | 	width: 1.5em;
109 | 	height: 1.5em;
110 | 	margin: 0 auto;
111 | 	fill: currentColor;
112 | }
113 | 
114 | .icon--keyboard {
115 | 	display: none;
116 | }
117 | 
118 | main {
119 | 	position: relative;
120 | 	width: 100%;
121 | }
122 | 
123 | .content {
124 | 	position: relative;
125 | 	display: flex;
126 | 	justify-content: center;
127 | 	align-items: center;
128 | 	margin: 0 auto;
129 | 	min-height: 100vh;
130 | }
131 | 
132 | .content--fixed {
133 | 	position: fixed;
134 | 	z-index: 10000;
135 | 	top: 0;
136 | 	left: 0;
137 | 	display: grid;
138 | 	align-content: space-between;
139 | 	width: 100%;
140 | 	max-width: none;
141 | 	min-height: 0;
142 | 	height: 100vh;
143 | 	padding: 1.5em;
144 | 	pointer-events: none;
145 | 	grid-template-columns: 50% 50%;
146 | 	grid-template-rows: auto auto 4em;
147 | 	grid-template-areas: 'header header'
148 | 	'... ...'
149 | 	'github demos';
150 | }
151 | 
152 | .content--fixed a {
153 | 	pointer-events: auto;
154 | }
155 | 
156 | .content--top {
157 | 	padding: 1.5em 2em 1.5em 1.5em;
158 | 	justify-content: flex-start;
159 | 	min-height: 0;
160 | 	position: relative;
161 | }
162 | 
163 | /* Header */
164 | .codrops-header {
165 | 	position: relative;
166 | 	z-index: 100;
167 | 	display: flex;
168 | 	flex-direction: row;
169 | 	align-items: flex-start;
170 | 	align-items: center;
171 | 	align-self: start;
172 | 	grid-area: header;
173 | 	justify-self: start;
174 | }
175 | 
176 | .demo-2 .codrops-header {
177 | 	justify-self: stretch;
178 | }
179 | 
180 | .codrops-header__title {
181 | 	font-size: 1em;
182 | 	font-weight: bold;
183 | 	margin: 0;
184 | }
185 | 
186 | .info {
187 | 	margin: 0 0 0 1.25em;
188 | 	color: var(--color-info);
189 | }
190 | 
191 | .github {
192 | 	display: block;
193 | 	align-self: end;
194 | 	grid-area: github;
195 | 	justify-self: start;
196 | }
197 | 
198 | .content--top .github {
199 | 	align-self: center;
200 | 	margin: 0 1em 0 auto;
201 | }
202 | 
203 | .demos {
204 | 	position: relative;
205 | 	display: block;
206 | 	align-self: end;
207 | 	text-align: right;
208 | 	grid-area: demos;
209 | }
210 | 
211 | .content--top .demos {
212 | 	align-self: center;
213 | }
214 | 
215 | .demo {
216 | 	margin: 0 0 0 1em;
217 | }
218 | 
219 | .demo:hover,
220 | .demo:focus {
221 | 	opacity: 0.5;
222 | }
223 | 
224 | .demo span {
225 | 	white-space: nowrap;
226 | 	pointer-events: none;
227 | }
228 | 
229 | a.demo--current {
230 | 	pointer-events: none;
231 | 	color: var(--color-link-hover);
232 | }
233 | 
234 | /* Top Navigation Style */
235 | .codrops-links {
236 | 	position: relative;
237 | 	display: flex;
238 | 	justify-content: center;
239 | 	margin: 0 1em 0 0;
240 | 	text-align: center;
241 | 	white-space: nowrap;
242 | }
243 | 
244 | .codrops-icon {
245 | 	display: inline-block;
246 | 	margin: 0.15em;
247 | 	padding: 0.25em;
248 | }
249 | 
250 | @media screen and (max-width: 55em) {
251 | 	.message {
252 | 		display: block;
253 | 	}
254 | 	.content {
255 | 		flex-direction: column;
256 | 		height: auto;
257 | 		min-height: 0;
258 | 	}
259 | 	.content--fixed {
260 | 		position: relative;
261 | 		z-index: 1000;
262 | 		display: block;
263 | 		padding: 0.85em;
264 | 	}
265 | 	.codrops-header {
266 | 		flex-direction: column;
267 | 		align-items: center;
268 | 		align-self: center;
269 | 	}
270 | 	.codrops-header__title {
271 | 		font-weight: bold;
272 | 		padding-bottom: 0.25em;
273 | 		text-align: center;
274 | 	}
275 | 	.github {
276 | 		display: block;
277 | 		margin: 1em auto;
278 | 	}
279 | 	.content--top .github {
280 | 	    margin: 1em 0;
281 | 	}
282 | 	.codrops-links {
283 | 		margin: 0;
284 | 	}
285 | 	.demos {
286 | 		text-align: center;
287 | 	}
288 | 	.demo {
289 | 		margin: 0 0.5em;
290 | 	}
291 | }
292 | 


--------------------------------------------------------------------------------
/css/demo1.css:
--------------------------------------------------------------------------------
  1 | .demo-1 {
  2 | 	--color-text: #fff;
  3 | 	--color-bg: #000;
  4 | 	--color-link: #f9d77e;
  5 | 	--color-link-hover: #fff;
  6 | 	--color-info: #efc453;
  7 | 	--glitch-width: 100vw;
  8 | 	--glitch-height: 100vh;
  9 | 	--gap-horizontal: 10px;
 10 | 	--gap-vertical: 5px;
 11 | 	--time-anim: 4s;
 12 | 	--delay-anim: 2s;
 13 | 	--blend-mode-1: none;
 14 | 	--blend-mode-2: none;
 15 | 	--blend-mode-3: none;
 16 | 	--blend-mode-4: none;
 17 | 	--blend-mode-5: overlay;
 18 | 	--blend-color-1: transparent;
 19 | 	--blend-color-2: transparent;
 20 | 	--blend-color-3: transparent;
 21 | 	--blend-color-4: transparent;
 22 | 	--blend-color-5: #af4949;
 23 | }
 24 | 
 25 | .imgloaded .content__title,
 26 | .imgloaded .content__text {
 27 | 	animation-name: glitch-anim-text;
 28 | 	animation-duration: var(--time-anim);
 29 | 	animation-timing-function: linear;
 30 | 	animation-iteration-count: infinite;
 31 | }
 32 | 
 33 | .content__title {
 34 | 	font-size: 12vw;
 35 | 	margin: 35vh 0 0 0;
 36 | 	position: relative;
 37 | 	font-family: 'Playfair Display', serif;
 38 | 	animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2);
 39 | }
 40 | 
 41 | .content__text {
 42 | 	font-family: 'IM Fell English', serif;
 43 | 	position: absolute;
 44 | 	font-size: 1.5em;
 45 | 	top: 4em;
 46 | 	right: 10vw;
 47 | 	max-width: 500px;
 48 | 	text-align: right;
 49 | 	font-weight: 400;
 50 | 	animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25);
 51 | }
 52 | 
 53 | @media screen and (max-width: 55em) {
 54 | 	.content__text {
 55 | 		position: relative;
 56 | 		right: auto;
 57 | 		top: auto;
 58 | 		font-size: 1.25em;
 59 | 		padding: 0 1em;
 60 | 		text-align: center;
 61 | 	}
 62 | }
 63 | 
 64 | /* Glitch styles */
 65 | .glitch {
 66 | 	position: absolute;
 67 | 	top: 0;
 68 | 	left: 0;
 69 | 	width: var(--glitch-width);
 70 | 	height: var(--glitch-height);
 71 | 	overflow: hidden;
 72 | }
 73 | 
 74 | .glitch__img {
 75 | 	position: absolute;
 76 | 	top: calc(-1 * var(--gap-vertical));
 77 | 	left: calc(-1 * var(--gap-horizontal));
 78 | 	width: calc(100% + var(--gap-horizontal) * 2);
 79 | 	height: calc(100% + var(--gap-vertical) * 2);
 80 | 	background: url(../img/img1.jpg) no-repeat 50% 0;
 81 | 	background-color: var(--blend-color-1);
 82 | 	background-size: cover;
 83 | 	transform: translate3d(0,0,0);
 84 | 	background-blend-mode: var(--blend-mode-1);
 85 | }
 86 | 
 87 | .glitch__img:nth-child(n+2) {
 88 | 	opacity: 0;
 89 | }
 90 | 
 91 | .imgloaded .glitch__img:nth-child(n+2) {
 92 | 	animation-duration: var(--time-anim);
 93 | 	animation-delay: var(--delay-anim);
 94 | 	animation-timing-function: linear;
 95 | 	animation-iteration-count: infinite;
 96 | }
 97 | 
 98 | .imgloaded .glitch__img:nth-child(2) {
 99 | 	background-color: var(--blend-color-2);
100 | 	background-blend-mode: var(--blend-mode-2);
101 | 	animation-name: glitch-anim-1;
102 | }
103 | 
104 | .imgloaded .glitch__img:nth-child(3) {
105 | 	background-color: var(--blend-color-3);
106 | 	background-blend-mode: var(--blend-mode-3);
107 | 	animation-name: glitch-anim-2;
108 | }
109 | 
110 | .imgloaded .glitch__img:nth-child(4) {
111 | 	background-color: var(--blend-color-4);
112 | 	background-blend-mode: var(--blend-mode-4);
113 | 	animation-name: glitch-anim-3;
114 | }
115 | 
116 | .imgloaded .glitch__img:nth-child(5) {
117 | 	background-color: var(--blend-color-5);
118 | 	background-blend-mode: var(--blend-mode-5);
119 | 	animation-name: glitch-anim-flash;
120 | }
121 | 
122 | /* Animations */
123 | 
124 | @keyframes glitch-anim-1 {
125 | 	0% { 
126 | 		opacity: 1;
127 | 		transform: translate3d(var(--gap-horizontal),0,0);
128 | 		-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
129 | 		clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
130 | 	}
131 | 	2% {
132 | 		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
133 | 		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
134 | 	}
135 | 	4% {
136 | 		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
137 | 		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
138 | 	}
139 | 	6% {
140 | 		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
141 | 		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
142 | 	}
143 | 	8% {
144 | 		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
145 | 		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
146 | 	}
147 | 	10% {
148 | 		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
149 | 		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
150 | 	}
151 | 	12% {
152 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
153 | 		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
154 | 	}
155 | 	14% {
156 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
157 | 		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
158 | 	}
159 | 	16% {
160 | 		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
161 | 		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
162 | 	}
163 | 	18% {
164 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
165 | 		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
166 | 	}
167 | 	20% {
168 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
169 | 		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
170 | 	}
171 | 	21.9% {
172 | 		opacity: 1;
173 | 		transform: translate3d(var(--gap-horizontal),0,0);
174 | 	}
175 | 	22%, 100% {
176 | 		opacity: 0;
177 | 		transform: translate3d(0,0,0);
178 | 		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
179 | 		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
180 | 	}
181 | }
182 | 
183 | @keyframes glitch-anim-2 {
184 | 	0% { 
185 | 		opacity: 1;
186 | 		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
187 | 		-webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
188 | 		clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
189 | 	}
190 | 	3% {
191 | 		-webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
192 | 		clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
193 | 	}
194 | 	5% {
195 | 		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
196 | 		clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
197 | 	}
198 | 	7% {
199 | 		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
200 | 		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
201 | 	}
202 | 	9% {
203 | 		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
204 | 		clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
205 | 	}
206 | 	11% {
207 | 		-webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
208 | 		clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
209 | 	}
210 | 	13% {
211 | 		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
212 | 		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
213 | 	}
214 | 	15% {
215 | 		-webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
216 | 		clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
217 | 	}
218 | 	17% {
219 | 		-webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
220 | 		clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
221 | 	}
222 | 	19% {
223 | 		-webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
224 | 		clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
225 | 	}
226 | 	20% {
227 | 		-webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
228 | 		clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
229 | 	}
230 | 	21.9% {
231 | 		opacity: 1;
232 | 		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
233 | 	}
234 | 	22%, 100% {
235 | 		opacity: 0;
236 | 		transform: translate3d(0,0,0);
237 | 		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
238 | 		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
239 | 	}
240 | }
241 | 
242 | @keyframes glitch-anim-3 {
243 | 	0% { 
244 | 		opacity: 1;
245 | 		transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
246 | 		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
247 | 		clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
248 | 	}
249 | 	1.5% {
250 | 		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
251 | 		clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
252 | 	}
253 | 	2% {
254 | 		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
255 | 		clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
256 | 	}
257 | 	2.5% {
258 | 		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
259 | 		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
260 | 	}
261 | 	3% {
262 | 		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
263 | 		clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
264 | 	}
265 | 	5% {
266 | 		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
267 | 		clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
268 | 	}
269 | 	5.5% {
270 | 		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
271 | 		clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
272 | 	}
273 | 	7% {
274 | 		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
275 | 		clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
276 | 	}
277 | 	8% {
278 | 		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
279 | 		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
280 | 	}
281 | 	9% {
282 | 		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
283 | 		clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
284 | 	}
285 | 	10.5% {
286 | 		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
287 | 		clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
288 | 	}
289 | 	11% {
290 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
291 | 		clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
292 | 	}
293 | 	13% {
294 | 		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
295 | 		clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
296 | 	}
297 | 	14% {
298 | 		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
299 | 		clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
300 | 	}
301 | 	14.5% {
302 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
303 | 		clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
304 | 	}
305 | 	15% {
306 | 		-webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
307 | 		clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
308 | 	}
309 | 	16% {
310 | 		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
311 | 		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
312 | 	}
313 | 	18% {
314 | 		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
315 | 		clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
316 | 	}
317 | 	20% {
318 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
319 | 		clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
320 | 	}
321 | 	21.9% {
322 | 		opacity: 1;
323 | 		transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
324 | 	}
325 | 	22%, 100% {
326 | 		opacity: 0;
327 | 		transform: translate3d(0,0,0);
328 | 		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
329 | 		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
330 | 	}
331 | }
332 | 
333 | @keyframes glitch-anim-text {
334 | 	0% { 
335 | 		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
336 | 		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
337 | 		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
338 | 	}
339 | 	2% {
340 | 		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
341 | 		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
342 | 	}
343 | 	4% {
344 | 		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
345 | 		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
346 | 	}
347 | 	5% {
348 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
349 | 		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
350 | 	}
351 | 	6% {
352 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
353 | 		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
354 | 	}
355 | 	7% {
356 | 		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
357 | 		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
358 | 	}
359 | 	8% {
360 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
361 | 		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
362 | 	}
363 | 	9% {
364 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
365 | 		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
366 | 	}
367 | 	9.9% {
368 | 		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
369 | 	}
370 | 	10%, 100% {
371 | 		transform: translate3d(0,0,0) scale3d(1,1,1);
372 | 		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
373 | 		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
374 | 	}
375 | }
376 | 
377 | /* Flash */
378 | @keyframes glitch-anim-flash {
379 | 	0%, 5% { 
380 | 		opacity: 0.2; 
381 | 		transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
382 | 	}
383 | 	5.5%, 100% {
384 | 		opacity: 0;
385 | 		transform: translate3d(0, 0, 0);
386 | 	}
387 | }
388 | 
389 | 


--------------------------------------------------------------------------------
/css/demo2.css:
--------------------------------------------------------------------------------
  1 | .demo-2 {
  2 | 	--color-text: #aaa;
  3 | 	--color-bg: #000;
  4 | 	--color-link: #1c1cc9;
  5 | 	--color-link-hover: #aaa;
  6 | 	--color-info: #1c1cc9;
  7 | 	--glitch-width: 100vw;
  8 | 	--glitch-height: 100vh;
  9 | 	--gap-horizontal: 10px;
 10 | 	--gap-vertical: 5px;
 11 | 	--color-title: #fff;
 12 | 	--time-anim: 4s;
 13 | 	--delay-anim: 2s;
 14 | 	--blend-mode-1: none;
 15 | 	--blend-mode-2: none;
 16 | 	--blend-mode-3: none;
 17 | 	--blend-mode-4: overlay;
 18 | 	--blend-mode-5: overlay;
 19 | 	--blend-color-1: transparent;
 20 | 	--blend-color-2: transparent;
 21 | 	--blend-color-3: transparent;
 22 | 	--blend-color-4: #fb909a;
 23 | 	--blend-color-5: #1c1cc9;
 24 | }
 25 | 
 26 | .content__title {
 27 | 	font-size: 11vw;
 28 | 	margin: 35vh 0 0 0;
 29 | 	position: relative;
 30 | 	font-family: 'Bungee', cursive;
 31 | 	color: var(--color-title);
 32 | 	animation-name: glitch-anim-text;
 33 | 	animation-duration: var(--time-anim);
 34 | 	animation-timing-function: linear;
 35 | 	animation-iteration-count: infinite;
 36 | 	animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2);
 37 | }
 38 | 
 39 | /* Glitch styles */
 40 | .glitch {
 41 | 	position: absolute;
 42 | 	top: 0;
 43 | 	left: 0;
 44 | 	width: var(--glitch-width);
 45 | 	height: var(--glitch-height);
 46 | 	overflow: hidden;
 47 | }
 48 | 
 49 | .glitch__img {
 50 | 	position: absolute;
 51 | 	top: calc(-1 * var(--gap-vertical));
 52 | 	left: calc(-1 * var(--gap-horizontal));
 53 | 	width: calc(100% + var(--gap-horizontal) * 2);
 54 | 	height: calc(100% + var(--gap-vertical) * 2);
 55 | 	background: url(../img/img2.jpg) no-repeat 50% 0;
 56 | 	background-color: var(--blend-color-1);
 57 | 	background-size: cover;
 58 | 	transform: translate3d(0,0,0);
 59 | 	background-blend-mode: var(--blend-mode-1);
 60 | }
 61 | 
 62 | .glitch__img:nth-child(n+2) {
 63 | 	opacity: 0;
 64 | }
 65 | 
 66 | .imgloaded .glitch__img:nth-child(n+2) {
 67 | 	animation-duration: var(--time-anim);
 68 | 	animation-delay: var(--delay-anim);
 69 | 	animation-timing-function: linear;
 70 | 	animation-iteration-count: infinite;
 71 | }
 72 | 
 73 | .imgloaded .glitch__img:nth-child(2) {
 74 | 	background-color: var(--blend-color-2);
 75 | 	background-blend-mode: var(--blend-mode-2);
 76 | 	animation-name: glitch-anim-1;
 77 | }
 78 | 
 79 | .imgloaded .glitch__img:nth-child(3) {
 80 | 	background-color: var(--blend-color-3);
 81 | 	background-blend-mode: var(--blend-mode-3);
 82 | 	animation-name: glitch-anim-2;
 83 | }
 84 | 
 85 | .imgloaded .glitch__img:nth-child(4) {
 86 | 	background-color: var(--blend-color-4);
 87 | 	background-blend-mode: var(--blend-mode-4);
 88 | 	animation-name: glitch-anim-3;
 89 | }
 90 | 
 91 | .imgloaded .glitch__img:nth-child(5) {
 92 | 	background-color: var(--blend-color-5);
 93 | 	background-blend-mode: var(--blend-mode-5);
 94 | 	animation-name: glitch-anim-flash;
 95 | }
 96 | 
 97 | /* Animations */
 98 | 
 99 | @keyframes glitch-anim-1 {
100 | 	0% { 
101 | 		opacity: 1;
102 | 		transform: translate3d(var(--gap-horizontal),0,0);
103 | 		-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
104 | 		clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
105 | 	}
106 | 	2% {
107 | 		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
108 | 		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
109 | 	}
110 | 	4% {
111 | 		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
112 | 		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
113 | 	}
114 | 	6% {
115 | 		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
116 | 		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
117 | 	}
118 | 	8% {
119 | 		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
120 | 		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
121 | 	}
122 | 	10% {
123 | 		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
124 | 		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
125 | 	}
126 | 	12% {
127 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
128 | 		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
129 | 	}
130 | 	14% {
131 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
132 | 		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
133 | 	}
134 | 	16% {
135 | 		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
136 | 		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
137 | 	}
138 | 	18% {
139 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
140 | 		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
141 | 	}
142 | 	20% {
143 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
144 | 		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
145 | 	}
146 | 	21.9% {
147 | 		opacity: 1;
148 | 		transform: translate3d(var(--gap-horizontal),0,0);
149 | 	}
150 | 	22%, 100% {
151 | 		opacity: 0;
152 | 		transform: translate3d(0,0,0);
153 | 		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
154 | 		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
155 | 	}
156 | }
157 | 
158 | @keyframes glitch-anim-2 {
159 | 	0% { 
160 | 		opacity: 1;
161 | 		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
162 | 		-webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
163 | 		clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
164 | 	}
165 | 	3% {
166 | 		-webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
167 | 		clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
168 | 	}
169 | 	5% {
170 | 		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
171 | 		clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
172 | 	}
173 | 	7% {
174 | 		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
175 | 		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
176 | 	}
177 | 	9% {
178 | 		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
179 | 		clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
180 | 	}
181 | 	11% {
182 | 		-webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
183 | 		clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
184 | 	}
185 | 	13% {
186 | 		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
187 | 		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
188 | 	}
189 | 	15% {
190 | 		-webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
191 | 		clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
192 | 	}
193 | 	17% {
194 | 		-webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
195 | 		clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
196 | 	}
197 | 	19% {
198 | 		-webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
199 | 		clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
200 | 	}
201 | 	20% {
202 | 		-webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
203 | 		clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
204 | 	}
205 | 	21.9% {
206 | 		opacity: 1;
207 | 		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
208 | 	}
209 | 	22%, 100% {
210 | 		opacity: 0;
211 | 		transform: translate3d(0,0,0);
212 | 		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
213 | 		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
214 | 	}
215 | }
216 | 
217 | @keyframes glitch-anim-3 {
218 | 	0% { 
219 | 		opacity: 1;
220 | 		transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
221 | 		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
222 | 		clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
223 | 	}
224 | 	1.5% {
225 | 		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
226 | 		clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
227 | 	}
228 | 	2% {
229 | 		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
230 | 		clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
231 | 	}
232 | 	2.5% {
233 | 		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
234 | 		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
235 | 	}
236 | 	3% {
237 | 		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
238 | 		clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
239 | 	}
240 | 	5% {
241 | 		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
242 | 		clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
243 | 	}
244 | 	5.5% {
245 | 		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
246 | 		clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
247 | 	}
248 | 	7% {
249 | 		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
250 | 		clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
251 | 	}
252 | 	8% {
253 | 		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
254 | 		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
255 | 	}
256 | 	9% {
257 | 		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
258 | 		clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
259 | 	}
260 | 	10.5% {
261 | 		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
262 | 		clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
263 | 	}
264 | 	11% {
265 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
266 | 		clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
267 | 	}
268 | 	13% {
269 | 		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
270 | 		clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
271 | 	}
272 | 	14% {
273 | 		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
274 | 		clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
275 | 	}
276 | 	14.5% {
277 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
278 | 		clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
279 | 	}
280 | 	15% {
281 | 		-webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
282 | 		clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
283 | 	}
284 | 	16% {
285 | 		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
286 | 		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
287 | 	}
288 | 	18% {
289 | 		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
290 | 		clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
291 | 	}
292 | 	20% {
293 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
294 | 		clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
295 | 	}
296 | 	21.9% {
297 | 		opacity: 1;
298 | 		transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
299 | 	}
300 | 	22%, 100% {
301 | 		opacity: 0;
302 | 		transform: translate3d(0,0,0);
303 | 		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
304 | 		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
305 | 	}
306 | }
307 | 
308 | @keyframes glitch-anim-text {
309 | 	0% { 
310 | 		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
311 | 		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
312 | 		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
313 | 	}
314 | 	2% {
315 | 		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
316 | 		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
317 | 	}
318 | 	4% {
319 | 		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
320 | 		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
321 | 	}
322 | 	5% {
323 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
324 | 		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
325 | 	}
326 | 	6% {
327 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
328 | 		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
329 | 	}
330 | 	7% {
331 | 		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
332 | 		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
333 | 	}
334 | 	8% {
335 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
336 | 		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
337 | 	}
338 | 	9% {
339 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
340 | 		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
341 | 	}
342 | 	9.9% {
343 | 		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
344 | 	}
345 | 	10%, 100% {
346 | 		transform: translate3d(0,0,0) scale3d(1,1,1);
347 | 		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
348 | 		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
349 | 	}
350 | }
351 | 
352 | /* Flash */
353 | @keyframes glitch-anim-flash {
354 | 	0%, 5% { 
355 | 		opacity: 0.2; 
356 | 		transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
357 | 	}
358 | 	5.5%, 100% {
359 | 		opacity: 0;
360 | 		transform: translate3d(0, 0, 0);
361 | 	}
362 | }
363 | 
364 | 


--------------------------------------------------------------------------------
/css/demo3.css:
--------------------------------------------------------------------------------
  1 | .demo-3 {
  2 | 	--color-text: #454847;
  3 | 	--color-bg: #1d2121;
  4 | 	--color-link: #454847;
  5 | 	--color-link-hover: #fff;
  6 | 	--color-info: #454847;
  7 | 	--glitch-width: 40vmax;
  8 | 	--glitch-height: calc(40vmax * 1.25);
  9 | 	--color-title: #fff;
 10 | 	--color-subtitle: #30efbf;
 11 | }
 12 | 
 13 | .glitch--style-1 {
 14 | 	--gap-horizontal: 20px;
 15 | 	--gap-vertical: 2px;
 16 | 	--time-anim: 2.25s;
 17 | 	--blend-mode-1: none;
 18 | 	--blend-mode-2: none;
 19 | 	--blend-mode-3: none;
 20 | 	--blend-mode-4: none;
 21 | 	--blend-mode-5: none;
 22 | 	--blend-color-1: transparent;
 23 | 	--blend-color-2: transparent;
 24 | 	--blend-color-3: transparent;
 25 | 	--blend-color-4: transparent;
 26 | 	--blend-color-5: transparent;
 27 | }
 28 | 
 29 | .glitch--style-2 {
 30 | 	--gap-horizontal: 5px;
 31 | 	--gap-vertical: 10px;
 32 | 	--time-anim: 2s;
 33 | 	--blend-mode-1: none;
 34 | 	--blend-mode-2: none;
 35 | 	--blend-mode-3: luminosity;
 36 | 	--blend-mode-4: none;
 37 | 	--blend-mode-5: none;
 38 | 	--blend-color-1: transparent;
 39 | 	--blend-color-2: transparent;
 40 | 	--blend-color-3: #4d8c60;
 41 | 	--blend-color-4: transparent;
 42 | 	--blend-color-5: #c9b09a;
 43 | }
 44 | 
 45 | .glitch--style-3 {
 46 | 	--gap-horizontal: 20px;
 47 | 	--gap-vertical: 2px;
 48 | 	--time-anim: 2.25s;
 49 | 	--blend-mode-1: none;
 50 | 	--blend-mode-2: none;
 51 | 	--blend-mode-3: multiply;
 52 | 	--blend-mode-4: none;
 53 | 	--blend-mode-5: none;
 54 | 	--blend-color-1: transparent;
 55 | 	--blend-color-2: transparent;
 56 | 	--blend-color-3: #af4563;
 57 | 	--blend-color-4: transparent;
 58 | 	--blend-color-5: transparent;
 59 | }
 60 | 
 61 | .glitch--style-4 {
 62 | 	--gap-horizontal: 5px;
 63 | 	--gap-vertical: 20px;
 64 | 	--time-anim: 5s;
 65 | 	--blend-mode-1: none;
 66 | 	--blend-mode-2: exclusion;
 67 | 	--blend-mode-3: hard-light;
 68 | 	--blend-mode-4: overlay;
 69 | 	--blend-mode-5: none;
 70 | 	--blend-color-1: transparent;
 71 | 	--blend-color-2: #52f1cd;
 72 | 	--blend-color-3: #525df1;
 73 | 	--blend-color-4: #f19b52;
 74 | 	--blend-color-5: transparent;
 75 | }
 76 | 
 77 | .glitch--style-5 {
 78 | 	--gap-horizontal: 50px;
 79 | 	--gap-vertical: 100px;
 80 | 	--time-anim: 2.25s;
 81 | 	--blend-mode-1: none;
 82 | 	--blend-mode-2: none;
 83 | 	--blend-mode-3: none;
 84 | 	--blend-mode-4: overlay;
 85 | 	--blend-mode-5: overlay;
 86 | 	--blend-color-1: transparent;
 87 | 	--blend-color-2: transparent;
 88 | 	--blend-color-3: transparent;
 89 | 	--blend-color-4: #000;
 90 | 	--blend-color-5: #8d16f2;
 91 | }
 92 | 
 93 | .glitch--style-6 {
 94 | 	--gap-horizontal: 3px;
 95 | 	--gap-vertical: 70px;
 96 | 	--time-anim: 2.25s;
 97 | 	--blend-mode-1: none;
 98 | 	--blend-mode-2: none;
 99 | 	--blend-mode-3: overlay;
100 | 	--blend-mode-4: none;
101 | 	--blend-mode-5: none;
102 | 	--blend-color-1: transparent;
103 | 	--blend-color-2: transparent;
104 | 	--blend-color-3: rgba(255,255,255,0.2);
105 | 	--blend-color-4: transparent;
106 | 	--blend-color-5: transparent;
107 | }
108 | 
109 | .grid {
110 | 	margin: 50vh auto 0;
111 |     position: relative;
112 |     padding: 0 1em;
113 |     width: 100%;
114 |     display: grid;
115 |     max-width: 1200px;
116 |     grid-template-columns: repeat(2, 1fr);
117 | }
118 | 
119 | .grid__item {
120 |     margin: 0 0 40vh;
121 |     position: relative;
122 | }
123 | 
124 | .grid__item:nth-child(odd) {
125 | 	margin-top: -40vh;
126 | }
127 | 
128 | .grid__item-title {
129 | 	position: absolute;
130 | 	margin: 0;
131 | 	font-size: 6vw;
132 | 	color: var(--color-title);
133 | 	font-family: 'Barlow', sans-serif;
134 | 	font-weight: 800;
135 | 	padding: 30vh 0.5em 0;
136 | 	top: 0;
137 | 	pointer-events: none;
138 | 	line-height: 1;
139 | }
140 | 
141 | .grid__item:nth-child(odd) .grid__item-title {
142 | 	right: 0;
143 | 	text-align: right;
144 | 	padding-top: 10vh;
145 | }
146 | 
147 | .grid__item-title span {
148 | 	display: block;
149 | 	position: relative;
150 | 	font-size: 50%;
151 | 	font-weight: 500;
152 | 	opacity: 0;
153 | 	color: var(--color-subtitle);
154 | }
155 | 
156 | .glitch:hover + .grid__item-title span {
157 | 	opacity: 1;
158 | 	animation: glitch-anim-text 0.5s linear;
159 | }
160 | 
161 | @media screen and (max-width: 55em) {
162 | 	.grid { grid-template-columns: 100%; margin-top: 3em; }
163 | 	.grid__item { margin: 0 0 3em; }
164 | 	.grid__item:nth-child(odd) { margin-top: 0; }
165 | 	.grid__item-title, .grid__item:nth-child(odd) .grid__item-title { font-size: 2em; text-align: center; width: 100%; padding: 0; top: 20%; }
166 | }
167 | 
168 | /* Glitch styles */
169 | .glitch {
170 | 	position: relative;
171 | 	width: var(--glitch-width);
172 | 	max-width: 400px;
173 | 	height: var(--glitch-height);
174 | 	max-height: calc(400px * 1.25);
175 | 	overflow: hidden;
176 | 	margin: 0 auto;
177 | }
178 | 
179 | .glitch:hover {
180 | 	cursor: pointer;
181 | }
182 | 
183 | .glitch__img {
184 | 	position: absolute;
185 | 	top: calc(-1 * var(--gap-vertical));
186 | 	left: calc(-1 * var(--gap-horizontal));
187 | 	width: calc(100% + var(--gap-horizontal) * 2);
188 | 	height: calc(100% + var(--gap-vertical) * 2);
189 | 	background: url(../img/1.jpg) no-repeat 50% 0;
190 | 	background-color: var(--blend-color-1);
191 | 	background-size: cover;
192 | 	transform: translate3d(0,0,0);
193 | 	background-blend-mode: var(--blend-mode-1);
194 | }
195 | 
196 | .glitch--style-2 .glitch__img {
197 | 	background-image: url(../img/2.jpg);
198 | }
199 | 
200 | .glitch--style-3 .glitch__img {
201 | 	background-image: url(../img/3.jpg);
202 | }
203 | 
204 | .glitch--style-4 .glitch__img {
205 | 	background-image: url(../img/4.jpg);
206 | }
207 | 
208 | .glitch--style-5 .glitch__img {
209 | 	background-image: url(../img/5.jpg);
210 | }
211 | 
212 | .glitch--style-6 .glitch__img {
213 | 	background-image: url(../img/6.jpg);
214 | }
215 | 
216 | /* Set the background colors for the glitch images*/
217 | .glitch__img:nth-child(2) {
218 | 	background-color: var(--blend-color-2);
219 | 	background-blend-mode: var(--blend-mode-2);
220 | }
221 | 
222 | .glitch__img:nth-child(3) {
223 | 	background-color: var(--blend-color-3);
224 | 	background-blend-mode: var(--blend-mode-3);
225 | }
226 | 
227 | .glitch__img:nth-child(4) {
228 | 	background-color: var(--blend-color-4);
229 | 	background-blend-mode: var(--blend-mode-4);
230 | }
231 | 
232 | .glitch__img:nth-child(5) {
233 | 	background-color: var(--blend-color-5);
234 | 	background-blend-mode: var(--blend-mode-5);
235 | }
236 | 
237 | /* Hide all images except the first one */
238 | .glitch__img:nth-child(n+2) {
239 | 	opacity: 0;
240 | }
241 | 
242 | /* Hovers */
243 | 
244 | /* On hover we show the 2nd, 3rd, 4th and 5th image*/
245 | .glitch:hover .glitch__img:nth-child(n+2) {
246 | 	opacity: 1;
247 | }
248 | 
249 | /* Hover animations for horizontal case */
250 | .glitch:hover .glitch__img:nth-child(2) {
251 | 	transform: translate3d(var(--gap-horizontal),0,0);
252 | 	animation: glitch-anim-1-horizontal var(--time-anim) infinite linear alternate;
253 | }
254 | 
255 | .glitch:hover > .glitch__img:nth-child(3) {
256 | 	transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
257 | 	animation: glitch-anim-2-horizontal var(--time-anim) infinite linear alternate;
258 | }
259 | 
260 | .glitch:hover > .glitch__img:nth-child(4) {
261 | 	transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
262 | 	animation: glitch-anim-3-horizontal var(--time-anim) infinite linear alternate;
263 | }
264 | 
265 | /* Hover animations for vertical case */
266 | .glitch--vertical:hover .glitch__img:nth-child(2) {
267 | 	transform: translate3d(0, var(--gap-vertical), 0);
268 | 	animation: glitch-anim-1-vertical var(--time-anim) infinite linear alternate;
269 | }
270 | 
271 | .glitch--vertical:hover > .glitch__img:nth-child(3) {
272 | 	transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0);
273 | 	animation: glitch-anim-2-vertical var(--time-anim) infinite linear alternate;
274 | }
275 | 
276 | .glitch--vertical:hover > .glitch__img:nth-child(4) {
277 | 	transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1,-1,1);
278 | 	animation: glitch-anim-3-vertical var(--time-anim) infinite linear alternate;
279 | }
280 | 
281 | /* Hover flash animation on last image */
282 | .glitch:hover > .glitch__img:nth-child(5) {
283 | 	animation: glitch-anim-flash 0.5s steps(1,end) infinite;
284 | }
285 | 
286 | /* Animations */
287 | 
288 | /* Horizontal */
289 | @keyframes glitch-anim-1-horizontal {
290 | 	0% { 
291 | 		-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
292 | 		clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
293 | 	}
294 | 	10% {
295 | 		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
296 | 		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
297 | 	}
298 | 	20% {
299 | 		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
300 | 		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
301 | 	}
302 | 	30% {
303 | 		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
304 | 		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
305 | 	}
306 | 	40% {
307 | 		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
308 | 		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
309 | 	}
310 | 	50% {
311 | 		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
312 | 		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
313 | 	}
314 | 	60% {
315 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
316 | 		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
317 | 	}
318 | 	70% {
319 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
320 | 		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
321 | 	}
322 | 	80% {
323 | 		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
324 | 		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
325 | 	}
326 | 	90% {
327 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
328 | 		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
329 | 	}
330 | 	100% {
331 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
332 | 		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
333 | 	}
334 | }
335 | 
336 | @keyframes glitch-anim-2-horizontal {
337 | 	0% { 
338 | 		-webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
339 | 		clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
340 | 	}
341 | 	15% {
342 | 		-webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
343 | 		clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
344 | 	}
345 | 	22% {
346 | 		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
347 | 		clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
348 | 	}
349 | 	31% {
350 | 		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
351 | 		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
352 | 	}
353 | 	45% {
354 | 		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
355 | 		clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
356 | 	}
357 | 	51% {
358 | 		-webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
359 | 		clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
360 | 	}
361 | 	63% {
362 | 		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
363 | 		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
364 | 	}
365 | 	76% {
366 | 		-webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
367 | 		clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
368 | 	}
369 | 	81% {
370 | 		-webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
371 | 		clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
372 | 	}
373 | 	94% {
374 | 		-webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
375 | 		clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
376 | 	}
377 | 	100% {
378 | 		-webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
379 | 		clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
380 | 	}
381 | }
382 | 
383 | @keyframes glitch-anim-3-horizontal {
384 | 	0% { 
385 | 		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
386 | 		clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
387 | 	}
388 | 	5% {
389 | 		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
390 | 		clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
391 | 	}
392 | 	10% {
393 | 		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
394 | 		clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
395 | 	}
396 | 	25% {
397 | 		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
398 | 		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
399 | 	}
400 | 	27% {
401 | 		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
402 | 		clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
403 | 	}
404 | 	30% {
405 | 		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
406 | 		clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
407 | 	}
408 | 	33% {
409 | 		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
410 | 		clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
411 | 	}
412 | 	37% {
413 | 		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
414 | 		clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
415 | 	}
416 | 	40% {
417 | 		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
418 | 		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
419 | 	}
420 | 	45% {
421 | 		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
422 | 		clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
423 | 	}
424 | 	50% {
425 | 		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
426 | 		clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
427 | 	}
428 | 	53% {
429 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
430 | 		clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
431 | 	}
432 | 	57% {
433 | 		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
434 | 		clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
435 | 	}
436 | 	60% {
437 | 		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
438 | 		clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
439 | 	}
440 | 	65% {
441 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
442 | 		clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
443 | 	}
444 | 	70% {
445 | 		-webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
446 | 		clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
447 | 	}
448 | 	73% {
449 | 		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
450 | 		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
451 | 	}
452 | 	80% {
453 | 		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
454 | 		clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
455 | 	}
456 | 	100% {
457 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
458 | 		clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
459 | 	}
460 | }
461 | 
462 | /* Vertical */
463 | @keyframes glitch-anim-1-vertical {
464 | 	0% { 
465 | 		-webkit-clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%);
466 | 		clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%);
467 | 	}
468 | 	10% {
469 | 		-webkit-clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%);
470 | 		clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%);
471 | 	}
472 | 	20% {
473 | 		-webkit-clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%);
474 | 		clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%);
475 | 	}
476 | 	30% {
477 | 		-webkit-clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%);
478 | 		clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%);
479 | 	}
480 | 	40% {
481 | 		-webkit-clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%);
482 | 		clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%);
483 | 	}
484 | 	50% {
485 | 		-webkit-clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%);
486 | 		clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%);
487 | 	}
488 | 	60% {
489 | 		-webkit-clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%);
490 | 		clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%);
491 | 	}
492 | 	70% {
493 | 		-webkit-clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%);
494 | 		clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%);
495 | 	}
496 | 	80% {
497 | 		-webkit-clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%);
498 | 		clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%);
499 | 	}
500 | 	90% {
501 | 		-webkit-clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%);
502 | 		clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%);
503 | 	}
504 | 	100% {
505 | 		-webkit-clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%);
506 | 		clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%);
507 | 	}
508 | }
509 | 
510 | @keyframes glitch-anim-2-vertical {
511 | 	0% { 
512 | 		-webkit-clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%);
513 | 		clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%);
514 | 	}
515 | 	15% {
516 | 		-webkit-clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%);
517 | 		clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%);
518 | 	}
519 | 	22% {
520 | 		-webkit-clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%);
521 | 		clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%);
522 | 	}
523 | 	31% {
524 | 		-webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
525 | 		clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
526 | 	}
527 | 	45% {
528 | 		-webkit-clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%);
529 | 		clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%);
530 | 	}
531 | 	51% {
532 | 		-webkit-clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%);
533 | 		clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%);
534 | 	}
535 | 	63% {
536 | 		-webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
537 | 		clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
538 | 	}
539 | 	76% {
540 | 		-webkit-clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%);
541 | 		clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%);
542 | 	}
543 | 	81% {
544 | 		-webkit-clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%);
545 | 		clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%);
546 | 	}
547 | 	94% {
548 | 		-webkit-clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%);
549 | 		clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%);
550 | 	}
551 | 	100% {
552 | 		-webkit-clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%);
553 | 		clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%);
554 | 	}
555 | }
556 | 
557 | @keyframes glitch-anim-3-vertical {
558 | 	0% { 
559 | 		-webkit-clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%);
560 | 		clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%);
561 | 	}
562 | 	5% {
563 | 		-webkit-clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%);
564 | 		clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%);
565 | 	}
566 | 	10% {
567 | 		-webkit-clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%);
568 | 		clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%);
569 | 	}
570 | 	25% {
571 | 		-webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
572 | 		clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
573 | 	}
574 | 	27% {
575 | 		-webkit-clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%);
576 | 		clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%);
577 | 	}
578 | 	30% {
579 | 		-webkit-clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%);
580 | 		clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%);
581 | 	}
582 | 	33% {
583 | 		-webkit-clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);;
584 | 		clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);
585 | 	}
586 | 	37% {
587 | 		-webkit-clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);;
588 | 		clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);
589 | 	}
590 | 	40% {
591 | 		-webkit-clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%);
592 | 		clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%); 
593 | 	}
594 | 	45% {
595 | 		-webkit-clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%);
596 | 		clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%);
597 | 	}
598 | 	50% {
599 | 		-webkit-clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%);
600 | 		clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%);
601 | 	}
602 | 	53% {
603 | 		-webkit-clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%);
604 | 		clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%);
605 | 	}
606 | 	57% {
607 | 		-webkit-clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%);
608 | 		clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%);
609 | 	}
610 | 	60% {
611 | 		-webkit-clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%);
612 | 		clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%);
613 | 	}
614 | 	65% {
615 | 		-webkit-clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%);
616 | 		clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%);
617 | 	}
618 | 	70% {
619 | 		-webkit-clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%);
620 | 		clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%);
621 | 	}
622 | 	73% {
623 | 		-webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
624 | 		clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
625 | 	}
626 | 	80% {
627 | 		-webkit-clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%);
628 | 		clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%);
629 | 	}
630 | 	100% {
631 | 		-webkit-clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%);
632 | 		clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%);
633 | 	}
634 | }
635 | 
636 | @keyframes glitch-anim-text {
637 | 	0% { 
638 | 		opacity: 1;
639 | 		transform: translate3d(-10px,0,0) scale3d(-1,-1,1);
640 | 		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
641 | 		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
642 | 	}
643 | 	10% {
644 | 		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
645 | 		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
646 | 	}
647 | 	20% {
648 | 		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
649 | 		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
650 | 	}
651 | 	35% {
652 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
653 | 		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
654 | 	}
655 | 	50% {
656 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
657 | 		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
658 | 	}
659 | 	60% {
660 | 		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
661 | 		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
662 | 	}
663 | 	70% {
664 | 		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
665 | 		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
666 | 	}
667 | 	80% {
668 | 		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
669 | 		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
670 | 	}
671 | 	90% {
672 | 		transform: translate3d(-10px,0,0) scale3d(-1,-1,1);
673 | 	}
674 | 	100% {
675 | 		opacity: 1;
676 | 		transform: translate3d(0,0,0) scale3d(1,1,1);
677 | 		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
678 | 		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
679 | 	}
680 | }
681 | 
682 | /* Flash */
683 | @keyframes glitch-anim-flash {
684 | 	0% { 
685 | 		opacity: 0.2; 
686 | 		transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
687 | 	}
688 | 	33%, 100% { 
689 | 		opacity: 0;
690 | 		transform: translate3d(0,0,0);
691 | 	}
692 | }
693 | 
694 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/CSSGlitchEffect/1c5caf538111e8a1c82a11f72065fa6eea01e464/favicon.ico


--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/CSSGlitchEffect/1c5caf538111e8a1c82a11f72065fa6eea01e464/img/1.jpg


--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/CSSGlitchEffect/1c5caf538111e8a1c82a11f72065fa6eea01e464/img/2.jpg


--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/CSSGlitchEffect/1c5caf538111e8a1c82a11f72065fa6eea01e464/img/3.jpg


--------------------------------------------------------------------------------
/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/CSSGlitchEffect/1c5caf538111e8a1c82a11f72065fa6eea01e464/img/4.jpg


--------------------------------------------------------------------------------
/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/CSSGlitchEffect/1c5caf538111e8a1c82a11f72065fa6eea01e464/img/5.jpg


--------------------------------------------------------------------------------
/img/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/CSSGlitchEffect/1c5caf538111e8a1c82a11f72065fa6eea01e464/img/6.jpg


--------------------------------------------------------------------------------
/img/img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/CSSGlitchEffect/1c5caf538111e8a1c82a11f72065fa6eea01e464/img/img1.jpg


--------------------------------------------------------------------------------
/img/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/CSSGlitchEffect/1c5caf538111e8a1c82a11f72065fa6eea01e464/img/img2.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>CSS Glitch Effect | Demo 1 | Codrops</title>
 7 | 		<meta name="description" content="A glitch effect using CSS animations and clip-path" />
 8 | 		<meta name="keywords" content="glitch, effect, css, animations" />
 9 | 		<meta name="author" content="Codrops" />
10 | 		<link rel="shortcut icon" href="favicon.ico">
11 | 		<link href="https://fonts.googleapis.com/css?family=IM+Fell+English|Playfair+Display:900" rel="stylesheet">
12 | 		<link rel="stylesheet" type="text/css" href="css/base.css" />
13 | 		<link rel="stylesheet" type="text/css" href="css/demo1.css" />
14 | 		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
15 | 	</head>
16 | 	<body class="demo-1 loading">
17 | 		<svg class="hidden">
18 | 			<symbol id="icon-arrow" viewBox="0 0 24 24">
19 | 				<title>arrow</title>
20 | 				<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
21 | 			</symbol>
22 | 			<symbol id="icon-drop" viewBox="0 0 24 24">
23 | 				<title>drop</title>
24 | 				<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
25 | 			</symbol>
26 | 			<symbol id="icon-github" viewBox="0 0 32.6 31.8">
27 | 				<title>github</title>
28 | 				<path d="M16.3,0C7.3,0,0,7.3,0,16.3c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4C7.4,10.7,6.8,9,7.7,6.8c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C32.6,7.3,25.3,0,16.3,0z"/>
29 | 			</symbol>
30 | 		</svg>
31 | 		<main>
32 | 			<div class="message">Sorry, your browser does not support clip-path on HTML elements!</div>
33 | 			<div class="content content--fixed">
34 | 				<header class="codrops-header">
35 | 					<div class="codrops-links">
36 | 						<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/3d-particle-explorations/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
37 | 						<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=33498" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
38 | 					</div>
39 | 					<h1 class="codrops-header__title">CSS Glitch Effect</h1>
40 | 					<span class="info">CSS only element glitching with clip-path</span>
41 | 				</header>
42 | 				<a class="github" href="https://github.com/codrops/ImageGlitchEffect/" title="Find this project on GitHub"><svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg></a>
43 | 				<nav class="demos">
44 | 					<a class="demo demo--current" href="index.html"><span>Demo 1</span></a>
45 | 					<a class="demo" href="index2.html"><span>Demo 2</span></a>
46 | 					<a class="demo" href="index3.html"><span>Demo 3</span></a>
47 | 				</nav>
48 | 			</div>
49 | 			<div class="content">
50 | 				<div class="glitch">
51 | 					<div class="glitch__img"></div>
52 | 					<div class="glitch__img"></div>
53 | 					<div class="glitch__img"></div>
54 | 					<div class="glitch__img"></div>
55 | 					<div class="glitch__img"></div>
56 | 				</div>
57 | 				<h2 class="content__title">Haunted</h2>
58 | 				<p class="content__text">Evening was in the wood, louring with storm. A time of drought had sucked the weedy pool  and baked the channels; birds had done with song.</p>
59 | 			</div>
60 | 		</main>
61 | 		<script src="js/imagesloaded.pkgd.min.js"></script>
62 | 		<script src="js/demo.js"></script>
63 | 	</body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/index2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>CSS Glitch Effect | Demo 2 | Codrops</title>
 7 | 		<meta name="description" content="A glitch effect using CSS animations and clip-path" />
 8 | 		<meta name="keywords" content="glitch, effect, css, animations" />
 9 | 		<meta name="author" content="Codrops" />
10 | 		<link rel="shortcut icon" href="favicon.ico">
11 | 		<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
12 | 		<link rel="stylesheet" type="text/css" href="css/base.css" />
13 | 		<link rel="stylesheet" type="text/css" href="css/demo2.css" />
14 | 		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
15 | 	</head>
16 | 	<body class="demo-2 loading">
17 | 		<svg class="hidden">
18 | 			<symbol id="icon-arrow" viewBox="0 0 24 24">
19 | 				<title>arrow</title>
20 | 				<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
21 | 			</symbol>
22 | 			<symbol id="icon-drop" viewBox="0 0 24 24">
23 | 				<title>drop</title>
24 | 				<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
25 | 			</symbol>
26 | 			<symbol id="icon-github" viewBox="0 0 32.6 31.8">
27 | 				<title>github</title>
28 | 				<path d="M16.3,0C7.3,0,0,7.3,0,16.3c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4C7.4,10.7,6.8,9,7.7,6.8c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C32.6,7.3,25.3,0,16.3,0z"/>
29 | 			</symbol>
30 | 		</svg>
31 | 		<main>
32 | 			<div class="message">Sorry, your browser does not support clip-path on HTML elements!</div>
33 | 			<div class="content content--fixed">
34 | 				<header class="codrops-header">
35 | 					<div class="codrops-links">
36 | 						<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/3d-particle-explorations/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
37 | 						<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=33498" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
38 | 					</div>
39 | 					<h1 class="codrops-header__title">CSS Glitch Effect</h1>
40 | 				</header>
41 | 				<a class="github" href="https://github.com/codrops/ImageGlitchEffect/" title="Find this project on GitHub"><svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg></a>
42 | 				<nav class="demos">
43 | 					<a class="demo" href="index.html"><span>Demo 1</span></a>
44 | 					<a class="demo demo--current" href="index2.html"><span>Demo 2</span></a>
45 | 					<a class="demo" href="index3.html"><span>Demo 3</span></a>
46 | 				</nav>
47 | 			</div>
48 | 			<div class="content">
49 | 				<div class="glitch">
50 | 					<div class="glitch__img"></div>
51 | 					<div class="glitch__img"></div>
52 | 					<div class="glitch__img"></div>
53 | 					<div class="glitch__img"></div>
54 | 					<div class="glitch__img"></div>
55 | 				</div>
56 | 				<h2 class="content__title">ethereal</h2>
57 | 			</div>
58 | 		</main>
59 | 		<script src="js/imagesloaded.pkgd.min.js"></script>
60 | 		<script src="js/demo.js"></script>
61 | 	</body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/index3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" class="no-js">
  3 | 	<head>
  4 | 		<meta charset="UTF-8" />
  5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  6 | 		<title>CSS Glitch Effect | Demo 3 | Codrops</title>
  7 | 		<meta name="description" content="A glitch effect using CSS animations and clip-path" />
  8 | 		<meta name="keywords" content="glitch, effect, css, animations" />
  9 | 		<meta name="author" content="Codrops" />
 10 | 		<link rel="shortcut icon" href="favicon.ico">
 11 | 		<link href="https://fonts.googleapis.com/css?family=Barlow:500,800" rel="stylesheet">
 12 | 		<link rel="stylesheet" type="text/css" href="css/base.css" />
 13 | 		<link rel="stylesheet" type="text/css" href="css/demo3.css" />
 14 | 		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
 15 | 	</head>
 16 | 	<body class="demo-3 loading">
 17 | 		<svg class="hidden">
 18 | 			<symbol id="icon-arrow" viewBox="0 0 24 24">
 19 | 				<title>arrow</title>
 20 | 				<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
 21 | 			</symbol>
 22 | 			<symbol id="icon-drop" viewBox="0 0 24 24">
 23 | 				<title>drop</title>
 24 | 				<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
 25 | 			</symbol>
 26 | 			<symbol id="icon-github" viewBox="0 0 32.6 31.8">
 27 | 				<title>github</title>
 28 | 				<path d="M16.3,0C7.3,0,0,7.3,0,16.3c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4C7.4,10.7,6.8,9,7.7,6.8c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C32.6,7.3,25.3,0,16.3,0z"/>
 29 | 			</symbol>
 30 | 		</svg>
 31 | 		<main>
 32 | 			<div class="message">Sorry, your browser does not support clip-path on HTML elements!</div>
 33 | 			<div class="content content--top">
 34 | 				<header class="codrops-header">
 35 | 					<div class="codrops-links">
 36 | 						<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/3d-particle-explorations/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
 37 | 						<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=33498" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
 38 | 					</div>
 39 | 					<h1 class="codrops-header__title">CSS Glitch Effect</h1>
 40 | 					<span class="info">CSS only element glitching with clip-path</span>
 41 | 				</header>
 42 | 				<a class="github" href="https://github.com/codrops/ImageGlitchEffect/" title="Find this project on GitHub"><svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg></a>
 43 | 				<nav class="demos">
 44 | 					<a class="demo" href="index.html"><span>Demo 1</span></a>
 45 | 					<a class="demo" href="index2.html"><span>Demo 2</span></a>
 46 | 					<a class="demo demo--current" href="index3.html"><span>Demo 3</span></a>
 47 | 				</nav>
 48 | 			</div>
 49 | 			<div class="grid">
 50 | 				<div class="grid__item">
 51 | 					<div class="glitch glitch--style-1">
 52 | 						<div class="glitch__img"></div>
 53 | 						<div class="glitch__img"></div>
 54 | 						<div class="glitch__img"></div>
 55 | 						<div class="glitch__img"></div>
 56 | 						<div class="glitch__img"></div>
 57 | 					</div>
 58 | 					<h2 class="grid__item-title">Prone <span>Abjectness</span></h2>
 59 | 				</div>
 60 | 				<div class="grid__item">
 61 | 					<div class="glitch glitch--style-2">
 62 | 						<div class="glitch__img"></div>
 63 | 						<div class="glitch__img"></div>
 64 | 						<div class="glitch__img"></div>
 65 | 						<div class="glitch__img"></div>
 66 | 						<div class="glitch__img"></div>
 67 | 					</div>
 68 | 					<h2 class="grid__item-title">Equal <span>Undertaking</span></h2>
 69 | 				</div>
 70 | 				<div class="grid__item">
 71 | 					<div class="glitch glitch--vertical glitch--style-3">
 72 | 						<div class="glitch__img"></div>
 73 | 						<div class="glitch__img"></div>
 74 | 						<div class="glitch__img"></div>
 75 | 						<div class="glitch__img"></div>
 76 | 						<div class="glitch__img"></div>
 77 | 					</div>
 78 | 					<h2 class="grid__item-title">Gifted <span>Friendliness</span></h2>
 79 | 				</div>
 80 | 				<div class="grid__item">
 81 | 					<div class="glitch glitch--style-4">
 82 | 						<div class="glitch__img"></div>
 83 | 						<div class="glitch__img"></div>
 84 | 						<div class="glitch__img"></div>
 85 | 						<div class="glitch__img"></div>
 86 | 						<div class="glitch__img"></div>
 87 | 					</div>
 88 | 					<h2 class="grid__item-title">Past <span>Monotony</span></h2>
 89 | 				</div>
 90 | 				<div class="grid__item">
 91 | 					<div class="glitch glitch--style-5">
 92 | 						<div class="glitch__img"></div>
 93 | 						<div class="glitch__img"></div>
 94 | 						<div class="glitch__img"></div>
 95 | 						<div class="glitch__img"></div>
 96 | 						<div class="glitch__img"></div>
 97 | 					</div>
 98 | 					<h2 class="grid__item-title">Ground <span>Curtness</span></h2>
 99 | 				</div>
100 | 				<div class="grid__item">
101 | 					<div class="glitch glitch--style-6">
102 | 						<div class="glitch__img"></div>
103 | 						<div class="glitch__img"></div>
104 | 						<div class="glitch__img"></div>
105 | 						<div class="glitch__img"></div>
106 | 						<div class="glitch__img"></div>
107 | 					</div>
108 | 					<h2 class="grid__item-title">Wide <span>Distraction</span></h2>
109 | 				</div>
110 | 			</div>
111 | 		</main>
112 | 		<script src="js/imagesloaded.pkgd.min.js"></script>
113 | 		<script src="js/demo.js"></script>
114 | 	</body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/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 | 	document.addEventListener('keydown', (ev) => {
25 | 		const keyCode = ev.keyCode || ev.which;
26 | 		let linkEl;
27 | 		if ( keyCode === 37 ) {
28 | 			linkEl = current > 0 ? navdemos[current-1] : navdemos[total-1];
29 | 		}
30 | 		else if ( keyCode === 39 ) {
31 | 			linkEl = current < total-1 ? navdemos[current+1] : navdemos[0];
32 | 		}
33 | 		else {
34 | 			return false;
35 | 		}
36 | 		navigate(linkEl);
37 | 	});
38 | 	imagesLoaded('.glitch__img', { background: true }, () => {
39 | 		document.body.classList.remove('loading');
40 | 		document.body.classList.add('imgloaded');
41 | 	});
42 | }
43 | 


--------------------------------------------------------------------------------
/js/imagesloaded.pkgd.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * imagesLoaded PACKAGED v4.1.3
3 |  * JavaScript is all like "You images are done yet or what?"
4 |  * MIT License
5 |  */
6 | 
7 | !function(e,t){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",t):"object"==typeof module&&module.exports?module.exports=t():e.EvEmitter=t()}("undefined"!=typeof window?window:this,function(){function e(){}var t=e.prototype;return t.on=function(e,t){if(e&&t){var i=this._events=this._events||{},n=i[e]=i[e]||[];return-1==n.indexOf(t)&&n.push(t),this}},t.once=function(e,t){if(e&&t){this.on(e,t);var i=this._onceEvents=this._onceEvents||{},n=i[e]=i[e]||{};return n[t]=!0,this}},t.off=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){var n=i.indexOf(t);return-1!=n&&i.splice(n,1),this}},t.emitEvent=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){var n=0,o=i[n];t=t||[];for(var r=this._onceEvents&&this._onceEvents[e];o;){var s=r&&r[o];s&&(this.off(e,o),delete r[o]),o.apply(this,t),n+=s?0:1,o=i[n]}return this}},t.allOff=t.removeAllListeners=function(){delete this._events,delete this._onceEvents},e}),function(e,t){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return t(e,i)}):"object"==typeof module&&module.exports?module.exports=t(e,require("ev-emitter")):e.imagesLoaded=t(e,e.EvEmitter)}("undefined"!=typeof window?window:this,function(e,t){function i(e,t){for(var i in t)e[i]=t[i];return e}function n(e){var t=[];if(Array.isArray(e))t=e;else if("number"==typeof e.length)for(var i=0;i<e.length;i++)t.push(e[i]);else t.push(e);return t}function o(e,t,r){return this instanceof o?("string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=n(e),this.options=i({},this.options),"function"==typeof t?r=t:i(this.options,t),r&&this.on("always",r),this.getImages(),h&&(this.jqDeferred=new h.Deferred),void setTimeout(function(){this.check()}.bind(this))):new o(e,t,r)}function r(e){this.img=e}function s(e,t){this.url=e,this.element=t,this.img=new Image}var h=e.jQuery,a=e.console;o.prototype=Object.create(t.prototype),o.prototype.options={},o.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},o.prototype.addElementImages=function(e){"IMG"==e.nodeName&&this.addImage(e),this.options.background===!0&&this.addElementBackgroundImages(e);var t=e.nodeType;if(t&&d[t]){for(var i=e.querySelectorAll("img"),n=0;n<i.length;n++){var o=i[n];this.addImage(o)}if("string"==typeof this.options.background){var r=e.querySelectorAll(this.options.background);for(n=0;n<r.length;n++){var s=r[n];this.addElementBackgroundImages(s)}}}};var d={1:!0,9:!0,11:!0};return o.prototype.addElementBackgroundImages=function(e){var t=getComputedStyle(e);if(t)for(var i=/url\((['"])?(.*?)\1\)/gi,n=i.exec(t.backgroundImage);null!==n;){var o=n&&n[2];o&&this.addBackground(o,e),n=i.exec(t.backgroundImage)}},o.prototype.addImage=function(e){var t=new r(e);this.images.push(t)},o.prototype.addBackground=function(e,t){var i=new s(e,t);this.images.push(i)},o.prototype.check=function(){function e(e,i,n){setTimeout(function(){t.progress(e,i,n)})}var t=this;return this.progressedCount=0,this.hasAnyBroken=!1,this.images.length?void this.images.forEach(function(t){t.once("progress",e),t.check()}):void this.complete()},o.prototype.progress=function(e,t,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded,this.emitEvent("progress",[this,e,t]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,e),this.progressedCount==this.images.length&&this.complete(),this.options.debug&&a&&a.log("progress: "+i,e,t)},o.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(e,[this]),this.emitEvent("always",[this]),this.jqDeferred){var t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},r.prototype=Object.create(t.prototype),r.prototype.check=function(){var e=this.getIsImageComplete();return e?void this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),void(this.proxyImage.src=this.img.src))},r.prototype.getIsImageComplete=function(){return this.img.complete&&void 0!==this.img.naturalWidth},r.prototype.confirm=function(e,t){this.isLoaded=e,this.emitEvent("progress",[this,this.img,t])},r.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},r.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},r.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},r.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype=Object.create(r.prototype),s.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url;var e=this.getIsImageComplete();e&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},s.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype.confirm=function(e,t){this.isLoaded=e,this.emitEvent("progress",[this,this.element,t])},o.makeJQueryPlugin=function(t){t=t||e.jQuery,t&&(h=t,h.fn.imagesLoaded=function(e,t){var i=new o(this,e,t);return i.jqDeferred.promise(h(this))})},o.makeJQueryPlugin(),o});


--------------------------------------------------------------------------------