API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 21st, 2018
101
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.92 KB | None | 0 0
raw download clone embed print report
  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: 9vw;
  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. }
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!