API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 27th, 2020
192
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <title>Animation</title>
  8. <link rel="stylesheet" href="style_bigdonation.css" />
  9. </head>
  10. <audio autoplay>
  11. <source src="schannik_busy.mp3" type="audio/mpeg">
  12. </audio>
  13. <body>
  14. <div class="tempBackground"></div>
  15. <div class="Alert">
  16. <div class="Text">NICE</div>
  17. <div class="Text">HOST</div>
  18. <div class="Text">NICE</div>
  19. <div class="Text">HOSTT</div>
  20. <div class="Text">DANKE!</div>
  21. <div class="Name">{name}</div>
  22. <div class="Number">{amount}</div>
  23. </div>
  24. </body>
  25. </html>
  26.  
  27.  
  28. -------------------------------------------------------------------------------------------------------
  29.  
  30.  
  31. * {
  32. margin: 0;
  33. padding: 0;
  34. box-sizing: border-box;
  35. -webkit-font-smoothing: antialiased;
  36. -moz-osx-font-smoothing: grayscale;
  37. }
  38.  
  39. @font-face {
  40. font-family: 'pricedown';
  41. src: url('pricedown.ttf');
  42. }
  43.  
  44. html,
  45. body {
  46. width: 100%;
  47. height: 100%;
  48. }
  49.  
  50. .tempBackground {
  51. position: fixed;
  52. width: 100%;
  53. height: 100%;
  54. background-image: url('bg.png');
  55. background-repeat: no-repeat;
  56. background-size: cover;
  57. }
  58.  
  59. .Alert {
  60. position: relative;
  61. z-index: 10;
  62. width: 100%;
  63. height: 400px;
  64. color: #ffffff;
  65. font-family: 'pricedown';
  66. }
  67.  
  68. .Name,
  69. .Number,
  70. .Text {
  71. position: absolute;
  72. text-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
  73. }
  74.  
  75. .Text:nth-child(1) {
  76. opacity: 0;
  77. max-width: 174.83px;
  78. min-width: 174.83px;
  79. width: 174.83px;
  80. max-height: 172.52px;
  81. min-height: 172.52px;
  82. height: 172.52px;
  83. left: 10%;
  84. top: 30%;
  85. font-size: 100px;
  86. transform: rotate(-35deg);
  87. animation: dropIn1 200ms ease forwards, fadeOut 5000ms ease forwards;
  88. animation-delay: 1090ms;
  89. }
  90.  
  91. .Text:nth-child(2) {
  92. opacity: 0;
  93. left: 20%;
  94. top: 34%;
  95. font-size: 90px;
  96. transform: rotate(35deg);
  97. animation: dropIn2 200ms ease forwards, fadeOut 5000ms ease forwards;
  98. animation-delay: 1250ms;
  99. }
  100.  
  101. .Text:nth-child(3) {
  102. opacity: 0;
  103. right: 30%;
  104. top: 10%;
  105. font-size: 100px;
  106. transform: rotate(10deg);
  107. animation: dropIn3 200ms ease forwards, fadeOut 5000ms ease forwards;
  108. animation-delay: 2080ms;
  109. }
  110.  
  111. .Text:nth-child(4) {
  112. opacity: 0;
  113. right: 7%;
  114. top: 34%;
  115. font-size: 90px;
  116. transform: rotate(46deg);
  117. animation: dropIn4 200ms ease forwards, fadeOut 5000ms ease forwards;
  118. animation-delay: 2190ms;
  119. }
  120.  
  121. .Text:nth-child(5) {
  122. opacity: 0;
  123. right: 25%;
  124. top: 48%;
  125. font-size: 90px;
  126. transform: rotate(-15deg);
  127. animation: dropIn5 200ms ease forwards, fadeOut 5000ms ease forwards;
  128. animation-delay: 3020ms;
  129. }
  130.  
  131. .Name {
  132. font-size: 70px;
  133. transform: scale(0) translateX(-50%);
  134. left: 50%;
  135. top: 20%;
  136. z-index: 10;
  137. transform-origin: 0 50%;
  138. animation: dropIn6 200ms ease forwards;
  139. animation-delay: 3110ms;
  140. }
  141.  
  142. .Number {
  143. font-size: 150px;
  144. transform: scale(0) translateX(-50%);
  145. left: 50%;
  146. top: 30%;
  147. transform-origin: 0 50%;
  148. animation: slide-in-bck-center 7000ms ease forwards;
  149. animation-delay: 3270ms;
  150. }
  151.  
  152. .slide-in-bck-center {
  153. -webkit-animation: slide-in-bck-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  154. animation: slide-in-bck-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  155. }
  156.  
  157. @-webkit-keyframes slide-in-bck-center {
  158. 0% {
  159. -webkit-transform: translateZ(600px) translateX(-50%);
  160. transform: translateZ(600px) translateX(-50%);
  161. opacity: 0;
  162. }
  163. 100% {
  164. -webkit-transform: translateZ(0) translateX(-50%);
  165. transform: translateZ(0) translateX(-50%);
  166. opacity: 1;
  167. }
  168. }
  169. @keyframes slide-in-bck-center {
  170. 0% {
  171. -webkit-transform: translateZ(600px) translateX(-50%);
  172. transform: translateZ(600px) translateX(-50%);
  173. opacity: 0;
  174. }
  175. 100% {
  176. -webkit-transform: translateZ(0) translateX(-50%);
  177. transform: translateZ(0) translateX(-50%);
  178. opacity: 1;
  179. }
  180. }
  181.  
  182.  
  183.  
  184. @keyframes scale-in-center {
  185. 0% {
  186. -webkit-transform: scale(0) translateX(-50%);
  187. transform: scale(0) translateX(-50%);
  188. opacity: 1;
  189. }
  190. 100% {
  191. -webkit-transform: scale(1) translateX(-50%);
  192. transform: scale(1) translateX(-50%);
  193. opacity: 1;
  194. }
  195. }
  196.  
  197.  
  198. @keyframes fadeOut {
  199. 0% { opacity: 1;}
  200. 99% { opacity: 0.01;width: 100%; height: 100%;}
  201. 100% { opacity: 0;width: 0; height: 0;}
  202. }
  203.  
  204. @keyframes dropIn1 {
  205. 0% {
  206. opacity: 0;
  207. transform: scale(5) rotate(-35deg);
  208. }
  209. 100% {
  210. opacity: 1;
  211. transform: scale(1) rotate(-35deg);
  212. }
  213. }
  214.  
  215. @keyframes dropIn2 {
  216. 0% {
  217. opacity: 0;
  218. transform: scale(5) rotate(35deg);
  219. }
  220. 100% {
  221. opacity: 1;
  222. transform: scale(1) rotate(35deg);
  223. }
  224. }
  225.  
  226. @keyframes dropIn3 {
  227. 0% {
  228. opacity: 0;
  229. transform: scale(9) rotate(10deg);
  230. }
  231. 100% {
  232. opacity: 1;
  233. transform: scale(1) rotate(10deg);
  234. }
  235. }
  236.  
  237. @keyframes dropIn4 {
  238. 0% {
  239. opacity: 0;
  240. transform: scale(5) rotate(46deg);
  241. }
  242. 100% {
  243. opacity: 1;
  244. transform: scale(1) rotate(46deg);
  245. }
  246. }
  247.  
  248. @keyframes dropIn5 {
  249. 0% {
  250. opacity: 0;
  251. transform: scale(5) rotate(-15deg);
  252. }
  253. 100% {
  254. opacity: 1;
  255. transform: scale(1) rotate(-15deg);
  256. }
  257. }
  258.  
  259. @keyframes dropIn6 {
  260. 0% {
  261. opacity: 0;
  262. transform: scale(5) translateX(-50%);
  263. }
  264. 100% {
  265. opacity: 1;
  266. transform: scale(1) translateX(-50%);
  267. }
  268. }
  269.  
  270. @keyframes scaleUp {
  271. 0% {
  272. opacity: 0;
  273. transform: scale(0) translateX(-50%);
  274. }
  275. 100% {
  276. opacity: 1;
  277. transform: scale(1) translateX(-50%);
  278. }
  279. }
  280.  
  281.  
  282.  
  283. -----------------------------------------------------------------------------------------------------------
  284.  
  285.  
  286.  
  287. (function () {
  288.  
  289. var animateImg = {animateImg}, // true false
  290. hideImg = false,
  291. barsAnimation = "{barsAnimation}", // fromLeft fromTop fromRight fromBot
  292. textAnimation = "{textAnimation}", // fromLeft fromTop fromRight fromBot none
  293. textStaggerTop = "{textStagger}", // 0 "center" "end"
  294. terxtStaggerBottom = "{textStagger}", // 0 "center" "end"
  295. msgDirection = "{msgDirection}", // fromLeft fromTop fromRight fromBot none
  296. delayTime = {delayTime} * 1000;
  297.  
  298. var barsX, barsY, textX, textY, msgX, msgY, msgXOut, msgYOut;
  299.  
  300. if(hideImg){
  301. $("#imageHolder").hide();
  302. }
  303. $("#alertImg").on('error', function(){
  304. $("#alertImg").remove();
  305. });
  306.  
  307. if(barsAnimation == "fromLeft"){
  308. barInX = "-101%";
  309. barInY = "0%";
  310. barOutX = "+101%";
  311. barOutY = "0%"
  312. } else if(barsAnimation == "fromTop") {
  313. barInX = "0%";
  314. barInY = "-101%";
  315. barOutX = "0%";
  316. barOutY = "+101%"
  317. } else if(barsAnimation == "fromRight") {
  318. barInX = "101%";
  319. barInY = "0%";
  320. barOutX = "-101%";
  321. barOutY = "0%"
  322. } else if(barsAnimation == "fromBot") {
  323. barInX = "0%";
  324. barInY = "101%";
  325. barOutX = "0%";
  326. barOutY = "-101%"
  327. }
  328.  
  329. if(textAnimation == "fromLeft"){
  330. textX = "-30%";
  331. textY = "0%";
  332. } else if(textAnimation == "fromTop") {
  333. textX = "0%";
  334. textY = "-30%";
  335. } else if(textAnimation == "fromRight") {
  336. textX = "30%";
  337. textY = "0%";
  338. } else if(textAnimation == "fromBot") {
  339. textX = "0%";
  340. textY = "30%";
  341. } else if(textAnimation == "none") {
  342. textX = "0%";
  343. textY = "0%";
  344. }
  345.  
  346. if(msgDirection == "fromLeft"){
  347. msgX = "-=20px";
  348. msgY = "0%";
  349. } else if(msgDirection == "fromTop") {
  350. msgX = "0%";
  351. msgY = "-50%";
  352. } else if(msgDirection == "fromRight") {
  353. msgX = "+=20px";
  354. msgY = "0%";
  355. } else if(msgDirection == "fromBot") {
  356. msgX = "0%";
  357. msgY = "50%";
  358. } else if(msgDirection == "none") {
  359. msgX = "0%";
  360. msgY = "0%";
  361. }
  362.  
  363. function loadScript (url) {
  364. return new Promise(function (resolve, reject) {
  365. const script = document.createElement('script')
  366. script.onload = resolve
  367. script.onerror = reject
  368.  
  369. script.src = url
  370.  
  371. document.head.appendChild(script)
  372. })
  373. }
  374. loadScript('https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js').then(function () {
  375. loadScript('https://s3.amazonaws.com/cdn.nerdordie.com/gsap/SplitText-2-1-2.min.js').then(function () {
  376. animate();
  377. });
  378. });
  379.  
  380.  
  381. var animate = function() {
  382.  
  383. var tl = new TimelineMax(),
  384. imgTl = new TimelineMax({paused: true}),
  385. topTl = new TimelineMax({paused: true}),
  386. botTl = new TimelineMax({paused: true, onComplete: reverseIt}),
  387. msgTl = new TimelineMax({paused: true}),
  388. topSplit = new SplitText("#topText", {type:"chars"}),
  389. botSplit = new SplitText("#botText", {type:"chars"}),
  390. msgSplit = new SplitText("#alert-user-message", {type:"lines"}),
  391. topChars = topSplit.chars,
  392. botChars = botSplit.chars,
  393. msgLines = msgSplit.lines
  394. ;
  395.  
  396. tl.timeScale(1);
  397. topTl.timeScale(1);
  398. botTl.timeScale(1);
  399.  
  400. tl
  401. .to("#alertHolder", .1, {delay: .1, opacity: 1, onComplete: playImg})
  402.  
  403. if(animateImg){
  404. imgTl
  405. .from("#imgBg", 0.4, {x: barInX, y: barInY, ease: Power4.easeInOut, onStart: playTop})
  406. .from("#alertImg", 0, {opacity: 0})
  407. .to("#imgBg", 0.4, {x: barOutX, y: barOutY, ease: Power4.easeInOut})
  408. } else {
  409. TweenMax.set("#imgBg", {opacity: 0})
  410.  
  411. imgTl
  412. .from("#alertImg", 1, {opacity: 0, onStart: playTop})
  413. }
  414.  
  415. topTl
  416. .from("#topBgAbove", 0.8, {x: barInX, y: barInY, delay: 0.4, ease: Power4.easeInOut, onStart: playBot})
  417. .from("#topBg", 0, {opacity: 0})
  418. .to("#topBgAbove", .8, {x: barOutX, y: barOutY, delay: 0.4, ease: Power4.easeInOut, delay: .2})
  419. .staggerFrom(topChars, 0.4, {opacity:0, x: textX, y: textY, ease: Power1.easeOut, stagger: {
  420. from: textStaggerTop,
  421. amount: .4,
  422. ease: Power4.EaseOut
  423. }}, null, "-=.4")
  424.  
  425. botTl
  426. .from("#botBgAbove", .8, {x: barInX, y: barInY, delay: 0.4, ease: Power4.easeInOut})
  427. .from("#botBg", 0, {opacity: 0})
  428. .to("#botBgAbove", .8, {x: barOutX, y: barOutY, delay: 0.4, ease: Power4.easeInOut, delay: .2})
  429. .staggerFrom(botChars, 0.4, {opacity:0, x: textX, y: textY, ease: Power1.easeOut, stagger: {
  430. from: terxtStaggerBottom,
  431. amount: .4,
  432. ease: Power4.EaseOut
  433. }}, null, "-=.4")
  434.  
  435. msgTl
  436. .staggerFrom(msgLines, 1.4, {opacity:0, x: msgX, y: msgY, ease: Power2.easeOut}, 0.1)
  437. .set(msgLines, {onStart: pauseMsg})
  438. .staggerTo(msgLines, 1, {delay: .2, opacity:0, x: msgX, y: msgY, ease: Power2.easeIn}, -0.2)
  439. ;
  440.  
  441. function playImg(){
  442. imgTl.play();
  443. }
  444.  
  445. function playTop(){
  446. topTl.play();
  447. }
  448.  
  449. function playBot(){
  450. botTl.play();
  451. setTimeout(function(){
  452. msgTl.play();
  453. }, 800);
  454. }
  455.  
  456. function reverseIt(){
  457. setTimeout(function(){
  458. imgTl.reverse().timeScale(0.4);
  459. topTl.reverse().timeScale(1.2);
  460. botTl.reverse().timeScale(1.2);
  461. msgTl.play();
  462. }, delayTime);
  463. }
  464.  
  465. function pauseMsg(){
  466. msgTl.pause();
  467. }
  468.  
  469. } // end of animate function
  470. }()); // end of function wrapper
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!