API tools faq
paste
Advertisement
Guest User

iniindex

a guest
Mar 24th, 2018
104
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.14 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html><html lang='en' class=''>
  2. <head>
  3. <link rel="SHORTCUT ICON" href="abaykan.com/favicon.png " type="image/png">
  4. <title>✘✘Home Sweet Home✘✘</title>
  5. <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Megrim);
  6. html {
  7. height: 100%;
  8. }
  9. body {
  10. margin: 0;
  11. padding: 0;
  12. height: 100%;
  13. overflow: hidden;
  14. }
  15.  
  16. .loader {
  17. position: absolute;
  18. top: 0;
  19. left: 0;
  20. width: 100%;
  21. height: 100%;
  22. }
  23. .loader .line {
  24. position: absolute;
  25. width: 100%;
  26. height: 100%;
  27. z-index: 1;
  28. -webkit-transform-origin: left top;
  29. transform-origin: left top;
  30. }
  31. .loader .line.first {
  32. background: #FE4365;
  33. }
  34. .loader .line.second {
  35. background: #C7F464;
  36. }
  37. .loader .line.third {
  38. background: #4ECDC4;
  39. }
  40. .loader .line.fourth {
  41. background: #556270;
  42. }
  43. .loader .mask {
  44. position: absolute;
  45. z-index: 2;
  46. }
  47. .loader .mask.horizontal {
  48. width: 100%;
  49. height: calc(50% - 1px);
  50. }
  51. .loader .mask.horizontal.top {
  52. top: 0;
  53. }
  54. .loader .mask.horizontal.bottom {
  55. bottom: 0;
  56. }
  57. .loader .mask.vertical {
  58. height: 100%;
  59. width: calc(50% - 1px);
  60. }
  61. .loader .mask.vertical.right {
  62. right: 0;
  63. }
  64. .loader .mask.vertical.left {
  65. left: 0;
  66. }
  67. .loader .mask.top-right {
  68. right: 0;
  69. top: 0;
  70. width: 0;
  71. height: 0;
  72. border-style: solid;
  73. border-width: 0 271px 200px 0;
  74. }
  75. .loader .mask.bottom-left {
  76. left: 0;
  77. bottom: 0;
  78. width: 0;
  79. height: 0;
  80. border-style: solid;
  81. border-width: 200px 0 0 271px;
  82. -webkit-transform-origin: top right;
  83. transform-origin: top right;
  84. }
  85. .loader .mask.top-left {
  86. left: 0;
  87. top: 0;
  88. width: 0;
  89. height: 0;
  90. border-style: solid;
  91. border-width: 200px 271px 0 0;
  92. }
  93. .loader .mask.bottom-right {
  94. bottom: 0;
  95. right: 0;
  96. width: 0;
  97. height: 0;
  98. border-style: solid;
  99. border-width: 0 0 200px 271px;
  100. }
  101. .loader.first {
  102. background: #F9D423;
  103. }
  104. .loader.first .mask {
  105. background: #F9D423;
  106. }
  107. .loader.second {
  108. background: #FE4365;
  109. }
  110. .loader.second .mask {
  111. background: #FE4365;
  112. }
  113. .loader.third {
  114. background: #C7F464;
  115. }
  116. .loader.third .mask.top-right {
  117. border-color: transparent #C7F464 transparent transparent;
  118. }
  119. .loader.third .mask.bottom-left {
  120. border-color: transparent transparent transparent #C7F464;
  121. }
  122. .loader.fourth {
  123. background: #4ECDC4;
  124. }
  125. .loader.fourth .mask.top-left {
  126. border-color: #4ECDC4 transparent transparent transparent;
  127. }
  128. .loader.fourth .mask.bottom-right {
  129. border-color: transparent transparent #4ECDC4 transparent;
  130. }
  131.  
  132. .content {
  133. position: absolute;
  134. top: 20%;
  135. left: 0;
  136. width: 100%;
  137. height: 100%;
  138. z-index: 1;
  139. background: #556270;
  140. }
  141. .content h1 {
  142. position: absolute;
  143. top: 20%;
  144. left: 50%;
  145. margin: 0;
  146. padding: 0;
  147. -webkit-transform: translateX(-50%) translateY(-50%);
  148. transform: translateX(-50%) translateY(-50%);
  149. font-family: "Megrim", cursive;
  150. font-size: 80px;
  151. color: white;
  152. text-align: center;
  153. }
  154. .content h1 .underline {
  155. position: relative;
  156. display: block;
  157. width: 160px;
  158. height: 5px;
  159. background: white;
  160. margin-top: 20px;
  161. left: 50%;
  162. -webkit-transform: translateX(-48%);
  163. transform: translateX(-48%);
  164. }
  165. ul {
  166. list-style-type: none;
  167. margin: 0;
  168. padding: 0;
  169. overflow: hidden;
  170. border-width: 60%;
  171. background-color: #556270;
  172. text-align: center;
  173. }
  174.  
  175. li {
  176. float: left;
  177. position: relative;
  178. left: 33%;
  179. text-align: center;
  180. }
  181.  
  182. li a {
  183. display: block;
  184. color: white;
  185. text-align: center;
  186. padding: 14px 16px;
  187. text-decoration: none;
  188. }
  189.  
  190. li a:hover {
  191. background-color: #bdc3c7;
  192. text-align: center;
  193. }
  194. .menu {
  195. position: relative;
  196. text-align: center;
  197. top: 40%;
  198. }
  199. </style></head><body>
  200. <div class="loader first">
  201. <div class="line first"></div>
  202. <div class="mask horizontal top"></div>
  203. <div class="mask horizontal bottom"></div>
  204. </div>
  205.  
  206. <div class="loader second">
  207. <div class="line second"></div>
  208. <div class="mask vertical left"></div>
  209. <div class="mask vertical right"></div>
  210. </div>
  211.  
  212. <div class="loader third">
  213. <div class="line third"></div>
  214. <div class="mask top-right"></div>
  215. <div class="mask bottom-left"></div>
  216. </div>
  217.  
  218. <div class="loader fourth">
  219. <div class="line fourth"></div>
  220. <div class="mask top-left"></div>
  221. <div class="mask bottom-right"></div>
  222. </div>
  223.  
  224. <div class="content">
  225. <h1>
  226. <span class="letter">W</span>
  227. <span class="letter">e</span>
  228. <span class="letter">l</span>
  229. <span class="letter">c</span>
  230. <span class="letter">o</span>
  231. <span class="letter">m</span>
  232. <span class="letter">e</span>
  233.  
  234. <div class="underline"></div>
  235. </h1>
  236. <div class="menu" align="center">
  237. <ul>
  238. <li><a href="#home">Home</a></li>
  239. <li><a href="projects">Projects</a></li>
  240. <li><a href="shells">Shells</a></li>
  241. <li><a href="scam">Scam</a></li>
  242. <li><a href="waters">W4T3R5</a></li>
  243. <li><a href="tools">Tools</a></li>
  244. </ul>
  245. </div>
  246. </div>
  247. <script src='asu.js'></script>
  248. <script >var screenWidth,
  249. screenHeight;
  250.  
  251. function start () {
  252.  
  253. resize();
  254. window.addEventListener('resize', resize);
  255.  
  256. var tlLoader = setTimelineLoader(),
  257. tlContent = setTimelineContent(),
  258. tlGlobal = new TimelineMax();
  259.  
  260. tlGlobal.set(document.querySelector('.content'), {alpha: 0});
  261. tlGlobal.add(tlLoader);
  262. tlGlobal.set(document.querySelector('.content'), {alpha: 1});
  263. tlGlobal.add(tlContent);
  264. tlGlobal.play();
  265.  
  266. };
  267.  
  268. function resize () {
  269. screenWidth = document.documentElement.clientWidth,
  270. screenHeight = document.documentElement.clientHeight;
  271. };
  272.  
  273. function setTimelineLoader () {
  274. var first = document.querySelector('.line.first'),
  275. maskTop = document.querySelector('.mask.top'),
  276. maskBottom = document.querySelector('.mask.bottom');
  277.  
  278. var second = document.querySelector('.line.second'),
  279. maskLeft = document.querySelector('.mask.left'),
  280. maskRight = document.querySelector('.mask.right');
  281.  
  282. var third = document.querySelector('.line.third'),
  283. maskBottomLeft = document.querySelector('.mask.bottom-left'),
  284. maskTopRight = document.querySelector('.mask.top-right');
  285. maskTopRight.style.borderWidth = '0 '+ (screenWidth-1) + 'px '+ (screenHeight-1) +'px 0';
  286. maskBottomLeft.style.borderWidth = ''+ (screenHeight-1) +'px 0 0 '+ (screenWidth-1) +'px';
  287.  
  288. var fourth = document.querySelector('.line.fourth'),
  289. maskTopLeft = document.querySelector('.mask.top-left'),
  290. maskBottomRight = document.querySelector('.mask.bottom-right');
  291. maskTopLeft.style.borderWidth = (screenHeight-1) + 'px '+ (screenWidth-1) +'px 0 0';
  292. maskBottomRight.style.borderWidth = '0 0 '+ (screenHeight-1) +'px '+ (screenWidth-1) +'px';
  293.  
  294. TweenMax.set(document.querySelector('.loader.second'), {alpha: 0});
  295. TweenMax.set(document.querySelector('.loader.third'), {alpha: 0});
  296. TweenMax.set(document.querySelector('.loader.fourth'), {alpha: 0});
  297.  
  298. var tl = new TimelineMax();
  299.  
  300. tl.fromTo(first, 0.4, {x: screenWidth}, {x: 0, ease: Circ.easeIn}, 0);
  301. tl.fromTo(maskTop, 0.4, {y: 0}, {y: -screenHeight/2, ease: Expo.easeOut, delay: 0.1}, 0.4);
  302. tl.fromTo(maskBottom, 0.4, {y: 0}, {y: screenHeight/2, ease: Expo.easeOut, delay: 0.1}, 0.4);
  303. tl.set(document.querySelector('.loader.first'), {alpha: 0});
  304.  
  305. tl.set(document.querySelector('.loader.second'), {alpha: 1});
  306. tl.fromTo(second, 0.4, {y: -screenHeight}, {y: 0, ease: Circ.easeIn});
  307. tl.fromTo(maskRight, 0.4, {x: 0}, {x: screenWidth/2, ease: Expo.easeOut, delay: 0.1}, 1.2); // 2.5
  308. tl.fromTo(maskLeft, 0.4, {x: 0}, {x: -screenWidth/2, ease: Expo.easeOut, delay: 0.1}, 1.2);
  309. tl.set(document.querySelector('.loader.second'), {alpha: 0});
  310.  
  311. tl.set(document.querySelector('.loader.third'), {alpha: 1});
  312. tl.fromTo(third, 0.4, {x: screenWidth}, {x: 0, ease: Circ.easeIn});
  313. tl.fromTo(maskTopRight, 0.4, {y: 0}, {y: -screenHeight, ease: Circ.easeOut, delay: 0.1}, 2);
  314. tl.fromTo(maskBottomLeft, 0.4, {y: 0}, {y: screenHeight, ease: Circ.easeOut, delay: 0.1}, 2);
  315.  
  316. tl.set(document.querySelector('.loader.fourth'), {alpha: 1});
  317. tl.fromTo(fourth, 0.4, {y: -screenHeight}, {y: 0, ease: Circ.easeIn});
  318. tl.fromTo(maskTopLeft, 0.4, {x: 0}, {x: -screenWidth, ease: Circ.easeOut, delay: 0.1}, 2.8);
  319. tl.fromTo(maskBottomRight, 0.4, {x: 0}, {x: screenWidth, ease: Circ.easeOut, delay: 0.1}, 2.8);
  320.  
  321. return tl;
  322. };
  323.  
  324. function setTimelineContent () {
  325. var tl = new TimelineMax();
  326. tl.set(document.querySelector('.underline'), {width: 0});
  327. tl.staggerFromTo(document.querySelectorAll('.letter'), 0.9, {'font-size': 0, alpha: 0}, {'font-size': '80px', alpha: 1, ease: Expo.easeInOut}, 0.08);
  328. tl.fromTo(document.querySelector('.underline'), 0.6, {width: 0, alpha: 0}, {width: 160, alpha: 1, ease: Sine.easeOut});
  329.  
  330. return tl;
  331. }
  332.  
  333.  
  334. start();
  335. </script>
  336. </body></html>
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!