API tools faq
paste
Advertisement
Guest User

very cool very swag

a guest
Aug 22nd, 2019
188
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.94 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  5. <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  6. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  7. <meta charset="utf-8">
  8. <title>Untitled Document</title>
  9. </head>
  10.  
  11. <body>
  12. <style>
  13. @import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400|Creepster|Blinker|Livvic|Oswald|Vampiro+One&display=swap');
  14.  
  15. body {
  16. overflow: hidden;
  17. background-image: url(http://i.picpar.com/HNAd.png);
  18.  
  19. }
  20.  
  21. a {
  22. color: inherit;
  23. text-decoration: none;
  24. }
  25.  
  26. b {
  27. font-weight: 800;
  28. }
  29.  
  30. ::-webkit-scrollbar {
  31. width: 0px; /* Remove scrollbar space */
  32. background: transparent; /* Optional: just make scrollbar invisible */
  33. }
  34.  
  35.  
  36.  
  37. /*Divs*/
  38.  
  39. .cont {
  40. position: absolute;
  41. bottom: 53vw;
  42. }
  43.  
  44. .main {
  45. width: 30vw;
  46. height: 20vw;
  47. background-color: black;
  48. position: absolute;
  49. top: 29vw;
  50. left: 30vw;
  51. border: .04vw solid rgba(255,255,255,0.50);
  52. box-shadow: .3vw .5vw .2vw 0 rgba(31,5,24,1.00);
  53. }
  54.  
  55. .bat-cont {
  56. width: 26vw;
  57. position: absolute;
  58. bottom: 18.2vw;
  59. left: -2vw;
  60. z-index: 2;
  61. }
  62.  
  63. .pizza-cont {
  64. width: 12vw;
  65. height: 10vw;
  66. position: absolute;
  67. left: 23vw;
  68. bottom: 11.5vw;
  69. z-index: 2;
  70. }
  71.  
  72.  
  73. .title {
  74. width: 20vw;
  75. height: 15vw;
  76. position: absolute;
  77. bottom: -11.4vw;
  78. left: 13vw;
  79. z-index: 2;
  80. }
  81.  
  82. .nav-cont {
  83. width: 4.5vw;
  84. height: 15vw;
  85. position: absolute;
  86. left: -6.5vw;
  87. top: 2.5vw;
  88. background-color: rgba(255,255,255,0.10);
  89. border: .04vw solid rgba(255,255,255,0.50);
  90. z-index: 4;
  91.  
  92. }
  93.  
  94. .nav, .nav2, .nav3, .nav4, .credit {
  95. width: 4vw;
  96. height: 1.5vw;
  97. background-color: rgba(0,0,0,1.00);
  98. border: .04vw solid rgba(255,255,255,0.50);
  99. position: relative;
  100.  
  101.  
  102. }
  103.  
  104. .wingL {
  105. width: 4vw;
  106. height: 3vw;
  107. position: absolute;
  108. left: -4vw;
  109. bottom: .05vw;
  110. z-index: -1;
  111. pointer-events: none;
  112. transform: rotate(-15deg);
  113. opacity: 0;
  114. }
  115.  
  116. .wingR {
  117. width: 4vw;
  118. height: 3vw;
  119. position: absolute;
  120. right: -3.9vw;
  121. bottom: -.1vw;
  122. z-index: -1;
  123. pointer-events: none;
  124. transform: rotate(15deg);
  125. opacity: 0;
  126. }
  127.  
  128. /*Info Tabs*/
  129. .infobox {
  130. width: 29vw;
  131. height: 19vw;
  132. background-color: rgba(255,255,255,0.10);
  133. border: .01vw solid white;
  134. position: absolute;
  135. top: .5vw;
  136. left: .5vw;
  137. z-index: 1;
  138. }
  139.  
  140. .info-field, .info-field2, .info-field3, .info-field4 {
  141. width: 28.2vw;
  142. height: 13vw;
  143. background-color: rgba(255,36,36,0.30);
  144. border: .01vw solid white;
  145. position: absolute;
  146. top: 2.5vw;
  147. left: .4vw;
  148. white-space: nowrap;
  149. opacity: 0;
  150. z-index: -1;
  151. }
  152.  
  153. .real-info, .real-info2, .real-info3, .real-info4 {
  154. width: 27vw;
  155. height: 9vw;
  156. background-color: rgba(0,0,0,0.25);
  157. border: .02vw solid black;
  158. position: absolute;
  159. top: 3.4vw;
  160. left: .6vw;
  161. white-space: normal;
  162. word-wrap: break-word;
  163. overflow-y: scroll;
  164. overflow-x: none;
  165. }
  166.  
  167. .real-info {
  168. overflow-y: hidden;
  169. }
  170.  
  171. .real-info4 {
  172. overflow-y: hidden;
  173. }
  174. .real-cont, .real-cont2 {
  175. width: 14vw;
  176. height: 7.4vw;
  177. background-color: rgba(0,0,0,0.25);
  178. border: .02vw solid white;
  179. position: absolute;
  180. overflow-y: scroll;
  181. }
  182.  
  183. .real-image, .real-image2 {
  184. width: 14vw;
  185. height: 15vw;
  186. position: absolute;
  187.  
  188. }
  189.  
  190. /*Friends Tab*/
  191. .friend-cont {
  192. position: absolute;
  193. left: .5vw;
  194. top: .5vw;
  195. }
  196.  
  197. .friend-cont2 {
  198. position: absolute;
  199. left: .5vw;
  200. top: 4.5vw;
  201. }
  202.  
  203. .friend-cont3 {
  204. position: absolute;
  205. left: .5vw;
  206. top: 8.5vw;
  207. }
  208.  
  209. .friend-cont4 {
  210. position: absolute;
  211. left: .5vw;
  212. top: 12.5vw;
  213. }
  214.  
  215. .friend-sq {
  216. width: 3vw;
  217. height: 3vw;
  218. border: solid .01vw white;
  219.  
  220. }
  221.  
  222. .friend-title {
  223. width: 5vw;
  224. height: 1vw;
  225. background-color: rgba(255,255,255,0.20);
  226. position: absolute;
  227. top: .1vw;
  228. left: 3.3vw;
  229. text-align: center;
  230.  
  231. }
  232.  
  233. .friend-field {
  234. width: 8vw;
  235. height: 1.5vw;
  236. background-color: rgba(255,255,255,0.20);
  237. position: absolute;
  238. top: 1.5vw;
  239. left: 3.3vw;
  240. }
  241.  
  242. /*Music Player*/
  243.  
  244. .music-cont {
  245. width: 28vw;
  246. height: 1vw;
  247. border-top: .01vw solid white;
  248. border-bottom: .01vw solid white;
  249. position: absolute;
  250. top: 1.2vw;
  251. left: .5vw;
  252. overflow: hidden;
  253. opacity: 0;
  254. }
  255.  
  256. .music-field {
  257. width: 28vw;
  258. height: 1vw;
  259. background-color: rgba(65,65,65,0.34);
  260. overflow: hidden;
  261. }
  262.  
  263.  
  264. .lilbat {
  265. width: 6w;
  266. height: 5vw;
  267. position: absolute;
  268. bottom: -.3vw;
  269. left: 1.5vw;
  270. z-index: 2;
  271. pointer-events: none;
  272. opacity: 0;
  273. }
  274. /*Positions*/
  275.  
  276. .nav {
  277. left: .22vw;
  278. top: .2vw;
  279. }
  280.  
  281. .nav2 {
  282. left: .22vw;
  283. top: 2.2vw;
  284. }
  285.  
  286. .nav3 {
  287. left: .22vw;
  288. top: 4.2vw;
  289. }
  290.  
  291. .nav4 {
  292. left: .22vw;
  293. top: 6.2vw;
  294. }
  295.  
  296. .real-cont {
  297. top: .45vw;
  298. left: .5vw;
  299. }
  300.  
  301. .real-image {
  302. top: -3vw;
  303. right: -.6vw;
  304. }
  305.  
  306. .real-cont2 {
  307. top: .45vw;
  308. right: .5vw;
  309. }
  310.  
  311. .real-image2 {
  312. top: -0vw;
  313. left: 1vw;
  314. }
  315.  
  316.  
  317. .credit {
  318. left: .22vw;
  319. top: 8.2vw;
  320. }
  321.  
  322. /*Text*/
  323.  
  324. /*Nav*/
  325. .stats {
  326. font-family: Creepster;
  327. font-size: 1.5vw;
  328. color: rgba(157,241,190,1.00);
  329. position: absolute;
  330. left: .45vw;
  331. bottom: -.1vw;
  332. text-shadow: .01vw .1vw .1vw #FF74FE;
  333. }
  334.  
  335. .history {
  336. font-family: Creepster;
  337. font-size: 1.2vw;
  338. color: rgba(157,241,190,1.00);
  339. position: absolute;
  340. left: .2vw;
  341. bottom: .1vw;
  342. text-shadow: .01vw .1vw .1vw #FF74FE;
  343. }
  344.  
  345. .friends {
  346. font-family: Creepster;
  347. font-size: 1.2vw;
  348. color: rgba(157,241,190,1.00);
  349. position: absolute;
  350. left: .2vw;
  351. bottom: .1vw;
  352. text-shadow: .01vw .1vw .1vw #FF74FE;
  353. }
  354.  
  355. .ooc {
  356. font-family: Creepster;
  357. font-size: 1.5vw;
  358. color: rgba(157,241,190,1.00);
  359. position: absolute;
  360. left: .95vw;
  361. bottom: -.03vw;
  362. text-shadow: .01vw .1vw .1vw #FF74FE;
  363. }
  364.  
  365. /*Info*/
  366. .sub-title {
  367. font-family: Creepster;
  368. font-size: 2.5vw;
  369. color: rgba(157,241,190,1.00);
  370. position: absolute;
  371. left: .8vw;
  372. top: .3vw;
  373. text-shadow:
  374. .01vw .1vw .1vw rgba(255,116,254,1.00),
  375. .01vw .15vw .1vw rgba(255,249,116,1.00),
  376. .01vw .2vw .1vw rgba(113,0,255,1.00),
  377. .01vw .3vw .1vw rgba(255,116,254,1.00),
  378. .01vw .35vw .1vw rgba(255,249,116,1.00),
  379. .01vw .4vw .1vw rgba(113,0,255,1.00);
  380. letter-spacing: .15vw;
  381. z-index: -1;
  382. opacity: 0;
  383. }
  384.  
  385. .info {
  386. font-family: Livvic;
  387. color: white;
  388. font-size: 1vw;
  389. padding-left: 5vw;
  390. }
  391.  
  392. .stat {
  393. font-family: Creepster;
  394. font-size: 1vw;
  395. color: rgba(157,241,190,1.00);
  396. text-shadow: .01vw .1vw .1vw #FF74FE;
  397. padding-left: .5vw;
  398. }
  399.  
  400. .stat2 {
  401. font-family: Creepster;
  402. font-size: 1vw;
  403. color: rgba(157,241,190,1.00);
  404. text-shadow: .01vw .1vw .1vw #FF74FE;
  405. padding-left: .5vw;
  406. }
  407.  
  408. .info2 {
  409. font-family: Livvic;
  410. color: white;
  411. font-size: 1vw;
  412. }
  413.  
  414. .info3 {
  415. font-family: Livvic;
  416. color: white;
  417. font-size: 1vw;
  418. }
  419.  
  420. .info {
  421. font-family: Livvic;
  422. color: white;
  423. font-size: 1vw;
  424. }
  425.  
  426. /*Friend Tab*/
  427. .friend-title-text {
  428. font-family: Creepster;
  429. font-size: 1vw;
  430. color: rgba(157,241,190,1.00);
  431. text-shadow: .01vw .1vw .1vw #FF74FE;
  432. padding-left: 0vw;
  433. white-space: nowrap;
  434. position: absolute;
  435. left: .5vw;
  436. top: -.10vw;
  437.  
  438. }
  439.  
  440. .friend-desc {
  441. font-family: Livvic;
  442. color: white;
  443. font-size: .5vw;
  444. position: absolute;
  445. top: .01vw;
  446. left: .2vw;
  447. }
  448.  
  449. /*Music*/
  450.  
  451. .marquee {
  452. font-family: Creepster;
  453. font-size: 1vw;
  454. color: rgba(157,241,190,1.00);
  455. text-shadow: .01vw .1vw .1vw #FF74FE;
  456. white-space: nowrap;
  457. position: absolute;
  458. top: -.12vw;
  459. transform:translateX(100%);
  460. animation: example1 15s linear infinite;
  461. }
  462.  
  463. /*Credit*/
  464.  
  465. .credit-text {
  466. font-family: Noto Sans Jp;
  467. font-size: 1vw;
  468. color: rgba(157,241,190,1.00);
  469. position: absolute;
  470. left: .5vw;
  471. bottom: .2vw;
  472. text-shadow: .01vw .1vw .1vw #FF74FE;
  473. }
  474.  
  475.  
  476. /*Animations*/
  477.  
  478. @keyframes move {
  479. 0%, 100% {
  480. top: 1.2vw;
  481. }
  482. 50% {
  483. top: 2vw;
  484. }
  485. }
  486.  
  487. @keyframes move2 {
  488. 0%, 100% {
  489. top: 2.2vw;
  490. }
  491. 50% {
  492. top: 3vw;
  493. }
  494. }
  495.  
  496. @keyframes move3 {
  497. 0%, 100% {
  498. top: 3.2vw;
  499. }
  500. 50% {
  501. top: 4vw;
  502. }
  503. }
  504.  
  505. @keyframes move4 {
  506. 0%, 100% {
  507. top: 4.2vw;
  508. }
  509. 50% {
  510. top: 5vw;
  511. }
  512. }
  513.  
  514. @keyframes example1 {
  515. 0% {
  516. transform: translateX(500%);
  517. }
  518. 100% {
  519. transform: translateX(-500%);
  520. }
  521.  
  522. }
  523.  
  524. @keyframes credit {
  525. 0%, 100% {
  526. top: 5.2vw;
  527. }
  528. 50% {
  529. top: 6vw;
  530. }
  531. }
  532.  
  533. /*Misc*/
  534.  
  535. .wingL img {
  536. height: 100%;
  537. width: 100%;
  538. }
  539.  
  540. .wingR img {
  541. height: 100%;
  542. width: 100%;
  543. }
  544.  
  545. .bat-cont img {
  546. max-height: 100%;
  547. max-width: 100%;
  548. }
  549.  
  550. .pizza-cont img {
  551. max-height: 100%;
  552. max-width: 100%;
  553. }
  554.  
  555. .title img {
  556. max-height: 100%;
  557. max-width: 100%;
  558. }
  559.  
  560. .lilbat img {
  561. max-height: 100%;
  562. max-width: 100%;
  563. }
  564.  
  565. .real-image img {
  566. max-height: 100%;
  567. max-width: 100%;
  568. }
  569.  
  570. .real-image2 img {
  571. max-height: 100%;
  572. max-width: 100%;
  573. }
  574.  
  575. .friend-sq img {
  576. max-height: 100%;
  577. max-width: 100%;
  578. }
  579.  
  580. .pause {
  581. animation-play-state: paused;
  582. }
  583.  
  584. .animate {
  585. animation: move 4.1s ease infinite;
  586. }
  587.  
  588. .animate2 {
  589. animation: move2 4.2s ease infinite;
  590. }
  591.  
  592. .animate3 {
  593. animation: move3 4.3s ease infinite;
  594. }
  595.  
  596. .animate4 {
  597. animation: move4 4.4s ease infinite;
  598. }
  599.  
  600. .credit-anim {
  601. animation: credit 4.5s ease infinite
  602. }
  603.  
  604. .show-wings {
  605. opacity: 1;
  606. }
  607.  
  608. .show {
  609. opacity: 1;
  610. z-index: 1;
  611. }
  612.  
  613. .show-bat {
  614. opacity: 1;
  615. z-index: 2;
  616. }
  617.  
  618. </style>
  619.  
  620. <audio class="player" src="http://bit.ly/2NoXsfb"></audio>
  621.  
  622. <div class="cont">
  623. <div class="main">
  624. <div class="bat-cont"><img src="http://i.picpar.com/1NAd.png"></div>
  625.  
  626. <div class="pizza-cont"><img src="http://i.picpar.com/2NAd.png"></div>
  627.  
  628. <div class="title"><img src="http://i.picpar.com/VNAd.png"></div>
  629.  
  630. <div class="music-cont">
  631. <div class="music-field">
  632. <span class="marquee">song name here</span>
  633. </div>
  634. </div>
  635.  
  636. <div class="infobox">
  637. <div id="ichi" class="info-field">
  638. <span id="ichi" class="sub-title"><i>what's it doing here?</i></span>
  639.  
  640. <div class="real-info">
  641. <div class="real-cont">
  642. <span class="stat"><i>stat:</i></span><span class="info">INFO</span><br>
  643. <span class="stat"><i>stat:</i></span><span class="info">INFO</span><br>
  644. <span class="stat"><i>stat:</i></span><span class="info">INFO</span><br>
  645. <span class="stat"><i>stat:</i></span><span class="info">INFO</span><br>
  646. <span class="stat"><i>stat:</i></span><span class="info">INFO</span><br>
  647. <span class="stat"><i>stat:</i></span><span class="info">INFO</span><br>
  648. <span class="stat"><i>stat:</i></span><span class="info">INFO</span><br>
  649. </div>
  650.  
  651. <div class="real-image"><img src="http://i.picpar.com/wPAd.png"></div>
  652. </div>
  653. </div>
  654.  
  655. <div id="ni" class="info-field2">
  656. <span id="ni" class="sub-title"><i>where'd it come from?</i></span>
  657.  
  658. <div class="real-info2">
  659. <span class="info2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eleifend placerat quam, in consectetur nisl cursus consequat. Morbi mi eros, consequat quis dui a, congue auctor nisi. Aliquam placerat cursus augue, ac ultrices elit dictum non. Suspendisse posuere quam est, nec imperdiet urna maximus vel. Nulla felis justo, sodales in turpis sed, dignissim suscipit ipsum. Aliquam scelerisque maximus congue. Donec nisl nulla, sagittis vitae mi ut, posuere molestie erat. Etiam dolor purus, vehicula at lectus ut, rutrum rutrum risus. Aenean porttitor blandit tellus, in aliquet nunc tristique et. Quisque vitae est lobortis, viverra risus in, pellentesque ante. Maecenas eget metus neque. Quisque dignissim tempus felis vitae sagittis. Pellentesque tincidunt commodo erat et egestas.</span>
  660. </div>
  661. </div>
  662.  
  663. <div id="san" class="info-field3">
  664. <span id="san" class="sub-title"><i>are there more of it?</i></span>
  665.  
  666. <div class="real-info3">
  667. <div class="friend-cont">
  668. <div class="friend-sq"><img src="IMAGE HERE"></div>
  669. <div class="friend-title">
  670. <span class="friend-title-text">name here</span>
  671. </div>
  672. <div class="friend-field">
  673. <span class="friend-desc">write something here about your cool friend! wow so nice :) haha</span>
  674. </div>
  675. </div>
  676.  
  677. <div class="friend-cont2">
  678. <div class="friend-sq"><img src="IMAGE HERE"></div>
  679. <div class="friend-title">
  680. <span class="friend-title-text">name here</span>
  681. </div>
  682. <div class="friend-field">
  683. <span class="friend-desc">write something here about your cool friend! wow so nice :) haha</span>
  684. </div>
  685. </div>
  686.  
  687. <div class="friend-cont3">
  688. <div class="friend-sq"><img src="IMAGE HERE"></div>
  689. <div class="friend-title">
  690. <span class="friend-title-text">name here</span>
  691. </div>
  692. <div class="friend-field">
  693. <span class="friend-desc">write something here about your cool friend! wow so nice :) haha</span>
  694. </div>
  695. </div>
  696.  
  697. <div class="friend-cont4">
  698. <div class="friend-sq"><img src="IMAGE HERE"></div>
  699. <div class="friend-title">
  700. <span class="friend-title-text">name here</span>
  701. </div>
  702. <div class="friend-field">
  703. <span class="friend-desc">write something here about your cool friend! wow so nice :) haha</span>
  704. </div>
  705. </div>
  706.  
  707. <span class="info3"></span>
  708. </div>
  709. </div>
  710.  
  711. <div id="yon" class="info-field4">
  712. <span id="yon" class="sub-title"><i>it came from in there!</i></span>
  713.  
  714. <div class="real-info4">
  715. <div class="real-cont2">
  716. <span class="stat2"><i>OOC RULE</i></span><br>
  717. <span class="stat2"><i>OOC RULE</i></span><br>
  718. <span class="stat2"><i>OOC RULE</i></span><br>
  719. <span class="stat2"><i>OOC RULE</i></span><br>
  720. <span class="stat2"><i>OOC RULE</i></span><br>
  721. <span class="stat2"><i>OOC RULE</i></span><br>
  722. <span class="stat2"><i>OOC RULE</i></span><br>
  723. <span class="stat2"><i>OOC RULE</i></span><br>
  724.  
  725.  
  726. </div>
  727.  
  728. <div class="real-image2"><img src="http://i.picpar.com/6PAd.png"></div>
  729. </div>
  730. </div>
  731.  
  732. <div id="bat" class="lilbat"><img src="http://i.picpar.com/mPAd.gif"></div>
  733. </div>
  734.  
  735.  
  736.  
  737.  
  738.  
  739. <div class="nav-cont">
  740. <div id="one" class="nav animate">
  741. <span class="stats">Stats</span>
  742. <div class="wingL"><img src="http://i.picpar.com/JOAd.png"></div>
  743. <div class="wingR"><img src="http://i.picpar.com/NOAd.png"></div>
  744. </div>
  745.  
  746. <div id="two" class="nav2 animate2">
  747. <span class="history">history</span>
  748. <div class="wingL"><img src="http://i.picpar.com/JOAd.png"></div>
  749. <div class="wingR"><img src="http://i.picpar.com/NOAd.png"></div>
  750. </div>
  751.  
  752. <div id="three" class="nav3 animate3">
  753. <span class="friends">friends</span>
  754. <div class="wingL"><img src="http://i.picpar.com/JOAd.png"></div>
  755. <div class="wingR"><img src="http://i.picpar.com/NOAd.png"></div>
  756. </div>
  757.  
  758. <div id="four" class="nav4 animate4">
  759. <span class="ooc">ooc</span>
  760. <div class="wingL"><img src="http://i.picpar.com/JOAd.png"></div>
  761. <div class="wingR"><img src="http://i.picpar.com/NOAd.png"></div>
  762. </div>
  763.  
  764. <div id="credit" class="credit credit-anim">
  765. <span class="credit-text"><a target="_blank" href="https://roleplay.chat/profile.php?user=nomad">遊牧民</a></span>
  766. <div class="wingL"><img src="http://i.picpar.com/JOAd.png"></div>
  767. <div class="wingR"><img src="http://i.picpar.com/NOAd.png"></div>
  768. </div>
  769. </div>
  770. </div>
  771.  
  772.  
  773. <div class="image"></div>
  774. </div>
  775.  
  776. </body>
  777. <script>
  778.  
  779. var beepOne = $(".player")[0];
  780. $(".pizza-cont img").css("cursor", "pointer").click(function() {
  781. if (beepOne.paused == false) {
  782. beepOne.pause();
  783. } else {
  784. beepOne.play();
  785. }
  786. $(".music-cont").toggleClass("show", 1000);
  787. });
  788.  
  789. beepOne.volume = .5;
  790. beepOne.loop = true;
  791.  
  792.  
  793.  
  794. $("#one").css("cursor", "pointer").hover(function(){
  795. $(".animate").css("animation-play-state", "paused");
  796. $("#one .wingL, #one .wingR").toggleClass("show-wings", 1000);
  797.  
  798.  
  799. },
  800. function(){
  801. $(".animate").css("animation-play-state", "running");
  802. $("#one .wingL, #one .wingR").toggleClass("show-wings", 1000);
  803. }).click(function(){
  804. $(".info-field, #ichi").toggleClass("show", 1000);
  805. $("#bat").addClass("show-bat", 1000);
  806.  
  807. if ($("info-field2, .info-field3, .info-field4, #ni, #san, #yon").hasClass("show")== 1) {
  808. $("info-field2, .info-field3, .info-field4, #ni, #san, #yon").removeClass("show", 1000)
  809. }
  810. });
  811.  
  812. $("#two").css("cursor", "pointer").hover(function(){
  813. $(".animate2").css("animation-play-state", "paused");
  814. $("#two .wingL, #two .wingR").toggleClass("show-wings", 1000);
  815.  
  816.  
  817. },
  818. function(){
  819. $(".animate2").css("animation-play-state", "running");
  820. $("#two .wingL, #two .wingR").toggleClass("show-wings", 1000);
  821. }).click(function(){
  822. $(".info-field2, #ni").toggleClass("show", 1000);
  823. $("#bat").addClass("show-bat", 1000);
  824.  
  825. if ($("info-field, .info-field3, .info-field4, #ichi, #san, #yon").hasClass("show")== 1) {
  826. $("info-field, .info-field3, .info-field4, #ichi, #san, #yon").removeClass("show", 1000)
  827. }
  828. });
  829.  
  830. $("#three").css("cursor", "pointer").hover(function(){
  831. $(".animate3").css("animation-play-state", "paused");
  832. $("#three .wingL, #three .wingR").toggleClass("show-wings", 1000);
  833.  
  834.  
  835. },
  836. function(){
  837. $(".animate3").css("animation-play-state", "running");
  838. $("#three .wingL, #three .wingR").toggleClass("show-wings", 1000);
  839. }).click(function(){
  840. $(".info-field3, #san").toggleClass("show", 1000);
  841. $("#bat").addClass("show-bat", 1000);
  842.  
  843. if ($("info-field, .info-field2, .info-field4, #ichi, #ni, #yon").hasClass("show")== 1) {
  844. $("info-field, .info-field2, .info-field4, #ichi, #ni, #yon").removeClass("show", 1000)
  845. }
  846. });
  847.  
  848. $("#four").css("cursor", "pointer").hover(function(){
  849. $(".animate4").css("animation-play-state", "paused");
  850. $("#four .wingL, #four .wingR").toggleClass("show-wings", 1000);
  851.  
  852.  
  853. },
  854. function(){
  855. $(".animate4").css("animation-play-state", "running");
  856. $("#four .wingL, #four .wingR").toggleClass("show-wings", 1000);
  857. }).click(function(){
  858. $(".info-field4, #yon").toggleClass("show", 1000);
  859. $("#bat").addClass("show-bat", 1000);
  860.  
  861. if ($("info-field, .info-field3, .info-field2, #ichi, #san, #ni").hasClass("show")== 1) {
  862. $("info-field, .info-field3, .info-field2, #ichi, #san, #ni").removeClass("show", 1000)
  863. }
  864. });
  865.  
  866. $("#credit").css("cursor", "pointer").hover(function(){
  867. $(".credit-anim").css("animation-play-state", "paused");
  868. $("#credit .wingL, #credit .wingR").toggleClass("show-wings", 1000);
  869.  
  870.  
  871. },
  872. function(){
  873. $(".credit-anim").css("animation-play-state", "running");
  874. $("#credit .wingL, #credit .wingR").toggleClass("show-wings", 1000);
  875. });
  876.  
  877. </script>
  878. </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!