API tools faq
paste
Advertisement
austinh115

Glitch

austinh115
Jul 13th, 2018
193
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.16 KB | None | 0 0
raw download clone embed print report
  1. background:#fff;}
  2. /** CSS By Austin (638877683) **/
  3. * {
  4. margin: 0;
  5. padding: 0;
  6. }
  7. *::selection {
  8. background: none;
  9. }
  10.  
  11. body {
  12. background-color: var(--color-bg);
  13. -webkit-font-smoothing: antialiased;
  14. -moz-osx-font-smoothing: grayscale;
  15. overflow: hidden;
  16. height: 100vh;
  17. color: #57585c;
  18. color: var(--color-text);
  19. }
  20. .austin    {
  21. position: relative;
  22. display: flex;
  23. justify-content: center;
  24. align-items: center;
  25. margin: 0 auto;
  26. min-height: 100vh;
  27. }
  28. :root {
  29. --color-text: #fff;
  30. --color-bg: #000;
  31. --color-link: #f9d77e;
  32. --color-link-hover: #fff;
  33. --color-info: #efc453;
  34. --glitch-width: 100vw;
  35. --glitch-height: 100vh;
  36. --gap-horizontal: 10px;
  37. --gap-vertical: 5px;
  38. --time-anim: 4s;
  39. --delay-anim: 2s;
  40. --blend-mode-1: none;
  41. --blend-mode-2: none;
  42. --blend-mode-3: none;
  43. --blend-mode-4: none;
  44. --blend-mode-5: overlay;
  45. --blend-color-1: transparent;
  46. --blend-color-2: transparent;
  47. --blend-color-3: transparent;
  48. --blend-color-4: transparent;
  49. --blend-color-5: #af4949;
  50. }
  51.  
  52. .austin ,
  53. .austin {
  54. animation-name: glitch-anim-text;
  55. animation-duration: var(--time-anim);
  56. animation-timing-function: linear;
  57. animation-iteration-count: infinite;
  58. }
  59.  
  60. .austin  {
  61. font-size: 8vw;
  62. margin: 3vh 0 0 0;
  63. position: relative;
  64. font-family: 'Playfair Display', serif;
  65. animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2);
  66. text-shadow: 5px 5px rgba(0, 0, 0, 0.3);
  67. }
  68.  
  69. .austin {
  70. font-family: 'IM Fell English', serif;
  71. position: absolute;
  72. font-size: 1.5em;
  73. top: 60vh;
  74. left: 50vw;
  75. max-width: 500px;
  76. text-align: right;
  77. font-weight: 400;
  78. animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25);
  79. text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
  80. }
  81. .austin   {
  82. position: absolute;
  83. top: 0;
  84. left: 0;
  85. width: var(--glitch-width);
  86. height: var(--glitch-height);
  87. overflow: hidden;
  88. }
  89.  
  90. .austin__img {
  91. position: absolute;
  92. top: calc(-1 * var(--gap-vertical));
  93. left: calc(-1 * var(--gap-horizontal));
  94. width: calc(100% + var(--gap-horizontal) * 2);
  95. height: calc(100% + var(--gap-vertical) * 2);
  96. background: url(https://s33.postimg.cc/444mh3bxp/109509.jpg) no-repeat center/cover fixed;
  97. background-color: var(--blend-color-1);
  98. background-size: cover;
  99. transform: translate3d(0,0,0);
  100. background-blend-mode: var(--blend-mode-1);
  101. }
  102.  
  103. .austin__img:nth-child(n+2) {
  104. opacity: 0;
  105. }
  106.  
  107. .austin__img:nth-child(n+2) {
  108. animation-duration: var(--time-anim);
  109. animation-delay: var(--delay-anim);
  110. animation-timing-function: linear;
  111. animation-iteration-count: infinite;
  112. }
  113.  
  114. .austin__img:nth-child(2) {
  115. background-color: var(--blend-color-2);
  116. background-blend-mode: var(--blend-mode-2);
  117. animation-name: glitch-anim-1;
  118. }
  119.  
  120. .austin__img:nth-child(3) {
  121. background-color: var(--blend-color-3);
  122. background-blend-mode: var(--blend-mode-3);
  123. animation-name: glitch-anim-2;
  124. }
  125.  
  126. .austin__img:nth-child(4) {
  127. background-color: var(--blend-color-4);
  128. background-blend-mode: var(--blend-mode-4);
  129. animation-name: glitch-anim-3;
  130. }
  131.  
  132. .austin__img:nth-child(5) {
  133. background-color: var(--blend-color-5);
  134. background-blend-mode: var(--blend-mode-5);
  135. animation-name: glitch-anim-flash;
  136. }
  137.  
  138. /* Animations */
  139.  
  140. @keyframes glitch-anim-1 {
  141. 0% {
  142. opacity: 1;
  143. transform: translate3d(var(--gap-horizontal),0,0);
  144. -webkit-clip-path: polygon(0 2%, 100% /**/ 2%, 100% /**/ 5%, 0 5%);
  145. clip-path: polygon(0 2%, 100% /**/ 2%, 100% /**/ 5%, 0 5%);
  146. }
  147. 2% {
  148. -webkit-clip-path: polygon(0 15%, 100% /**/15%, 100% /**/15%, 0 15%);
  149. clip-path: polygon(0 15%, 100% /**/15%, 100% /**/15%, 0 15%);
  150. }
  151. 4% {
  152. -webkit-clip-path: polygon(0 10%, 100% /**/10%, 100% /**/20%, 0 20%);
  153. clip-path: polygon(0 10%, 100% /**/10%, 100% /**/20%, 0 20%);
  154. }
  155. 6% {
  156. -webkit-clip-path: polygon(0 1%, 100% /**/ 1%, 100% /**/ 2%, 0 2%);
  157. clip-path: polygon(0 1%, 100% /**/ 1%, 100% /**/ 2%, 0 2%);
  158. }
  159. 8% {
  160. -webkit-clip-path: polygon(0 33%, 100% /**/33%, 100% /**/33%, 0 33%);
  161. clip-path: polygon(0 33%, 100% /**/33%, 100% /**/33%, 0 33%);
  162. }
  163. 10% {
  164. -webkit-clip-path: polygon(0 44%, 100% /**/44%, 100% /**/44%, 0 44%);
  165. clip-path: polygon(0 44%, 100% /**/44%, 100% /**/44%, 0 44%);
  166. }
  167. 12% {
  168. -webkit-clip-path: polygon(0 50%, 100% /**/50%, 100% /**/20%, 0 20%);
  169. clip-path: polygon(0 50%, 100% /**/50%, 100% /**/20%, 0 20%);
  170. }
  171. 14% {
  172. -webkit-clip-path: polygon(0 70%, 100% /**/70%, 100% /**/70%, 0 70%);
  173. clip-path: polygon(0 70%, 100% /**/70%, 100% /**/70%, 0 70%);
  174. }
  175. 16% {
  176. -webkit-clip-path: polygon(0 80%, 100% /**/80%, 100% /**/80%, 0 80%);
  177. clip-path: polygon(0 80%, 100% /**/80%, 100% /**/80%, 0 80%);
  178. }
  179. 18% {
  180. -webkit-clip-path: polygon(0 50%, 100% /**/50%, 100% /**/55%, 0 55%);
  181. clip-path: polygon(0 50%, 100% /**/50%, 100% /**/55%, 0 55%);
  182. }
  183. 20% {
  184. -webkit-clip-path: polygon(0 70%, 100% /**/70%, 100% /**/80%, 0 80%);
  185. clip-path: polygon(0 70%, 100% /**/70%, 100% /**/80%, 0 80%);
  186. }
  187. 21.9% {
  188. opacity: 1;
  189. transform: translate3d(var(--gap-horizontal),0,0);
  190. }
  191. 22%, 100% {
  192. opacity: 0;
  193. transform: translate3d(0,0,0);
  194. -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  195. clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  196. }
  197. }
  198.  
  199. @keyframes glitch-anim-2 {
  200. 0% {
  201. opacity: 1;
  202. transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
  203. -webkit-clip-path: polygon(0 25%, 100% /**/25%, 100% /**/30%, 0 30%);
  204. clip-path: polygon(0 25%, 100% /**/25%, 100% /**/30%, 0 30%);
  205. }
  206. 3% {
  207. -webkit-clip-path: polygon(0 3%, 100% /**/ 3%, 100% /**/ 3%, 0 3%);
  208. clip-path: polygon(0 3%, 100% /**/ 3%, 100% /**/ 3%, 0 3%);
  209. }
  210. 5% {
  211. -webkit-clip-path: polygon(0 5%, 100% /**/ 5%, 100% /**/20%, 0 20%);
  212. clip-path: polygon(0 5%, 100% /**/ 5%, 100% /**/20%, 0 20%);
  213. }
  214. 7% {
  215. -webkit-clip-path: polygon(0 20%, 100% /**/20%, 100% /**/20%, 0 20%);
  216. clip-path: polygon(0 20%, 100% /**/20%, 100% /**/20%, 0 20%);
  217. }
  218. 9% {
  219. -webkit-clip-path: polygon(0 40%, 100% /**/40%, 100% /**/40%, 0 40%);
  220. clip-path: polygon(0 40%, 100% /**/40%, 100% /**/40%, 0 40%);
  221. }
  222. 11% {
  223. -webkit-clip-path: polygon(0 52%, 100% /**/52%, 100% /**/59%, 0 59%);
  224. clip-path: polygon(0 52%, 100% /**/52%, 100% /**/59%, 0 59%);
  225. }
  226. 13% {
  227. -webkit-clip-path: polygon(0 60%, 100% /**/60%, 100% /**/60%, 0 60%);
  228. clip-path: polygon(0 60%, 100% /**/60%, 100% /**/60%, 0 60%);
  229. }
  230. 15% {
  231. -webkit-clip-path: polygon(0 75%, 100% /**/75%, 100% /**/75%, 0 75%);
  232. clip-path: polygon(0 75%, 100% /**/75%, 100% /**/75%, 0 75%);
  233. }
  234. 17% {
  235. -webkit-clip-path: polygon(0 65%, 100% /**/65%, 100% /**/40%, 0 40%);
  236. clip-path: polygon(0 65%, 100% /**/65%, 100% /**/40%, 0 40%);
  237. }
  238. 19% {
  239. -webkit-clip-path: polygon(0 45%, 100% /**/45%, 100% /**/50%, 0 50%);
  240. clip-path: polygon(0 45%, 100% /**/45%, 100% /**/50%, 0 50%);
  241. }
  242. 20% {
  243. -webkit-clip-path: polygon(0 14%, 100% /**/14%, 100% /**/33%, 0 33%);
  244. clip-path: polygon(0 14%, 100% /**/14%, 100% /**/33%, 0 33%);
  245. }
  246. 21.9% {
  247. opacity: 1;
  248. transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
  249. }
  250. 22%, 100% {
  251. opacity: 0;
  252. transform: translate3d(0,0,0);
  253. -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  254. clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  255. }
  256. }
  257.  
  258. @keyframes glitch-anim-3 {
  259. 0% {
  260. opacity: 1;
  261. transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
  262. -webkit-clip-path: polygon(0 1%, 100% /**/ 1%, 100% /**/ 3%, 0 3%);
  263. clip-path: polygon(0 1%, 100% /**/ 1%, 100% /**/ 3%, 0 3%);
  264. }
  265. 1.5% {
  266. -webkit-clip-path: polygon(0 10%, 100% /**/10%, 100% /**/ 9%, 0 9%);
  267. clip-path: polygon(0 10%, 100% /**/10%, 100% /**/ 9%, 0 9%);
  268. }
  269. 2% {
  270. -webkit-clip-path: polygon(0 5%, 100% /**/ 5%, 100% /**/ 6%, 0 6%);
  271. clip-path: polygon(0 5%, 100% /**/ 5%, 100% /**/ 6%, 0 6%);
  272. }
  273. 2.5% {
  274. -webkit-clip-path: polygon(0 20%, 100% /**/20%, 100% /**/20%, 0 20%);
  275. clip-path: polygon(0 20%, 100% /**/20%, 100% /**/20%, 0 20%);
  276. }
  277. 3% {
  278. -webkit-clip-path: polygon(0 10%, 100% /**/10%, 100% /**/10%, 0 10%);
  279. clip-path: polygon(0 10%, 100% /**/10%, 100% /**/10%, 0 10%);
  280. }
  281. 5% {
  282. -webkit-clip-path: polygon(0 30%, 100% /**/30%, 100% /**/25%, 0 25%);
  283. clip-path: polygon(0 30%, 100% /**/30%, 100% /**/25%, 0 25%);
  284. }
  285. 5.5% {
  286. -webkit-clip-path: polygon(0 15%, 100% /**/15%, 100% /**/16%, 0 16%);
  287. clip-path: polygon(0 15%, 100% /**/15%, 100% /**/16%, 0 16%);
  288. }
  289. 7% {
  290. -webkit-clip-path: polygon(0 40%, 100% /**/40%, 100% /**/39%, 0 39%);
  291. clip-path: polygon(0 40%, 100% /**/40%, 100% /**/39%, 0 39%);
  292. }
  293. 8% {
  294. -webkit-clip-path: polygon(0 20%, 100% /**/20%, 100% /**/21%, 0 21%);
  295. clip-path: polygon(0 20%, 100% /**/20%, 100% /**/21%, 0 21%);
  296. }
  297. 9% {
  298. -webkit-clip-path: polygon(0 60%, 100% /**/60%, 100% /**/55%, 0 55%);
  299. clip-path: polygon(0 60%, 100% /**/60%, 100% /**/55%, 0 55%);
  300. }
  301. 10.5% {
  302. -webkit-clip-path: polygon(0 30%, 100% /**/30%, 100% /**/31%, 0 31%);
  303. clip-path: polygon(0 30%, 100% /**/30%, 100% /**/31%, 0 31%);
  304. }
  305. 11% {
  306. -webkit-clip-path: polygon(0 70%, 100% /**/70%, 100% /**/69%, 0 69%);
  307. clip-path: polygon(0 70%, 100% /**/70%, 100% /**/69%, 0 69%);
  308. }
  309. 13% {
  310. -webkit-clip-path: polygon(0 40%, 100% /**/40%, 100% /**/41%, 0 41%);
  311. clip-path: polygon(0 40%, 100% /**/40%, 100% /**/41%, 0 41%);
  312. }
  313. 14% {
  314. -webkit-clip-path: polygon(0 80%, 100% /**/80%, 100% /**/75%, 0 75%);
  315. clip-path: polygon(0 80%, 100% /**/80%, 100% /**/75%, 0 75%);
  316. }
  317. 14.5% {
  318. -webkit-clip-path: polygon(0 50%, 100% /**/50%, 100% /**/51%, 0 51%);
  319. clip-path: polygon(0 50%, 100% /**/50%, 100% /**/51%, 0 51%);
  320. }
  321. 15% {
  322. -webkit-clip-path: polygon(0 90%, 100% /**/90%, 100% /**/90%, 0 90%);
  323. clip-path: polygon(0 90%, 100% /**/90%, 100% /**/90%, 0 90%);
  324. }
  325. 16% {
  326. -webkit-clip-path: polygon(0 60%, 100% /**/60%, 100% /**/60%, 0 60%);
  327. clip-path: polygon(0 60%, 100% /**/60%, 100% /**/60%, 0 60%);
  328. }
  329. 18% {
  330. -webkit-clip-path: polygon(0 100%, 100% /**/ 100%, 100% /**/99%, 0 99%);
  331. clip-path: polygon(0 100%, 100% /**/ 100%, 100% /**/99%, 0 99%);
  332. }
  333. 20% {
  334. -webkit-clip-path: polygon(0 70%, 100% /**/70%, 100% /**/71%, 0 71%);
  335. clip-path: polygon(0 70%, 100% /**/70%, 100% /**/71%, 0 71%);
  336. }
  337. 21.9% {
  338. opacity: 1;
  339. transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
  340. }
  341. 22%, 100% {
  342. opacity: 0;
  343. transform: translate3d(0,0,0);
  344. -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  345. clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  346. }
  347. }
  348.  
  349. @keyframes glitch-anim-text {
  350. 0% {
  351. transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
  352. -webkit-clip-path: polygon(0 20%, 100% /**/20%, 100% /**/21%, 0 21%);
  353. clip-path: polygon(0 20%, 100% /**/20%, 100% /**/21%, 0 21%);
  354. }
  355. 2% {
  356. -webkit-clip-path: polygon(0 33%, 100% /**/33%, 100% /**/33%, 0 33%);
  357. clip-path: polygon(0 33%, 100% /**/33%, 100% /**/33%, 0 33%);
  358. }
  359. 4% {
  360. -webkit-clip-path: polygon(0 44%, 100% /**/44%, 100% /**/44%, 0 44%);
  361. clip-path: polygon(0 44%, 100% /**/44%, 100% /**/44%, 0 44%);
  362. }
  363. 5% {
  364. -webkit-clip-path: polygon(0 50%, 100% /**/50%, 100% /**/20%, 0 20%);
  365. clip-path: polygon(0 50%, 100% /**/50%, 100% /**/20%, 0 20%);
  366. }
  367. 6% {
  368. -webkit-clip-path: polygon(0 70%, 100% /**/70%, 100% /**/70%, 0 70%);
  369. clip-path: polygon(0 70%, 100% /**/70%, 100% /**/70%, 0 70%);
  370. }
  371. 7% {
  372. -webkit-clip-path: polygon(0 80%, 100% /**/80%, 100% /**/80%, 0 80%);
  373. clip-path: polygon(0 80%, 100% /**/80%, 100% /**/80%, 0 80%);
  374. }
  375. 8% {
  376. -webkit-clip-path: polygon(0 50%, 100% /**/50%, 100% /**/55%, 0 55%);
  377. clip-path: polygon(0 50%, 100% /**/50%, 100% /**/55%, 0 55%);
  378. }
  379. 9% {
  380. -webkit-clip-path: polygon(0 70%, 100% /**/70%, 100% /**/80%, 0 80%);
  381. clip-path: polygon(0 70%, 100% /**/70%, 100% /**/80%, 0 80%);
  382. }
  383. 9.9% {
  384. transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
  385. }
  386. 10%, 100% {
  387. transform: translate3d(0,0,0) scale3d(1,1,1);
  388. -webkit-clip-path: polygon(0 0, 100% /**/ 0, 100% /**/ 100%, 0% /**/ 100%);
  389. clip-path: polygon(0 0, 100% /**/ 0, 100% /**/ 100%, 0% /**/ 100%);
  390. }
  391. }
  392.  
  393. /* Flash */
  394. @keyframes glitch-anim-flash {
  395. 0%, 5% {
  396. opacity: 0.2;
  397. transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
  398. }
  399. 5.5%, 100% {
  400. opacity: 0;
  401. transform: translate3d(0, 0, 0);
  402. }
  403. }
  404. iframe {
  405. position: absolute;
  406. top:-500px;
  407. left:-500px;
  408.  
  409.  
  410.  
  411. [youtube:500:500:EFFfVjItjyo:autoplay=1&playlist=EFFfVjItjyo&loop=1]
  412. [font:IM Fell English]
  413. [font:Playfair Display]
  414. <div class="austin   ">
  415. <div class="austin  ">
  416. <div class="austin__img"></div>
  417. <div class="austin__img"></div>
  418. <div class="austin__img"></div>
  419. <div class="austin__img"></div>
  420. <div class="austin__img"></div>
  421. </div>
  422. <h2 class="austin ">Austin</h2>
  423. <p class="austin">Let justice be done though the heavens fall.</p>
  424. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!