API tools faq
paste
ziyas

scrollboxes on hover frmis crd co code

ziyas
Aug 11th, 2021 (edited)
2,335
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.60 KB | None | 0 0
raw download clone embed print report
  1. <!-- scrollboxes on hover w typing name typing tab clicksplosion vinyl music player and fonts made by @crditem! -->
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5. <body>
  6. <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@800&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Mali:wght@400;600;700&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet"><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><link href="//fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet"><script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script><script src="https://dl.dropbox.com/s/vyffmps0ly6ikf4/glenplayer06.js"></script>
  7. </body>
  8. <style>
  9. @font-face { font-family: cutie; src: url(https://dl.dropbox.com/s/xo075bh6tbd4f7d/CP.ttf); }
  10. @font-face { font-family: billo; src: url(https://dl.dropbox.com/s/klv8tmajlqrb2xz/BILLO___.TTF); }
  11. @font-face { font-family: day; src: url(https://dl.dropbox.com/s/yob9nensv1rr0zq/HelloDay.otf); }
  12. @font-face { font-family: janda; src: url(https://dl.dropbox.com/s/yrdkxo1lp0quocw/JandaHappyDay.ttf); }
  13. @font-face { font-family: kitten; src: url(https://dl.dropbox.com/s/gluaq7dfui5acoa/KittenSlantTrial.ttf); }
  14.  
  15. #news { font-family: billo; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; position: absolute; color: white; font-weight: bold; font-size: 2.2em; z-index: 2; bottom: 80px; left: 20px; }
  16.  
  17. #abt { font-family: cutie; position: absolute; bottom: 70px; left: 20px; color: white; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; font-size: 1.2em; }
  18.  
  19. #cont { background: white; box-shadow: 0 0 8px 8px white inset; position: relative; left: -15px; margin-left: auto; margin-right: auto; width: 50%; border-radius: 7px; height: 200px; transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; padding: 10px; display: flex; }
  20.  
  21. .inside { border-radius: 7px; margin-left: auto; margin-right: auto; width: 200px; height: 100%; object-fit: cover; transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; }
  22.  
  23. #cont:hover { width: 100%; position: relative; left: 5px; } #cont:hover .inside { width: 40%; height: 100%; object-fit: cover; }
  24.  
  25. #cont2 { height: 200px; width: 100%; margin-left: 10px; padding: 0; }
  26.  
  27. #scroll1 { text-align: left; border-width:7px; border-style:solid; border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round; padding: 7px; height: 82px; width: 100%; opacity: 0; overflow: scroll; font-family: 'Mali', cursive; font-size: 0.8em; transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; line-height: 1.3em; }
  28.  
  29. #scroll2 { line-height: 1.3em; transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; text-align: left; border-width:7px; border-style:solid; border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round; margin-top: 10px; padding: 7px; height: 82px; width: 100%; opacity: 0; overflow: scroll; font-family: 'Mali', cursive; font-size: 0.8em; }
  30. #cont:hover
  31. #scroll1 { opacity: 1; }
  32. #cont:hover #scroll2 { opacity: 1; }
  33. mark { background: #faeadb; border-radius:7px; border: 1px solid black; padding-left: 5px; padding-right: 5px; }
  34.  
  35. :root { --Music-Player-Vinyl:#fff; --Vinyl-Icon-Size:17px; --Vinyl-Spin-Speed:3.5s; --Music-Controls:#fff; --Music-Controls-Size:12px; --Music-Title-Font-Size:11px; --Music-Title-Color:#000; } .glenjams-06 { display:none; position: absolute; bottom: 20px; left: 20px; z-index:99; } .pasta { display:flex; align-items:center; } .vinyl-spin { animation:recordspin var(--Vinyl-Spin-Speed) linear infinite; -webkit-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite; -moz-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite; -o-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite; } .vinyl-pause { animation-play-state:paused; -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -o-animation-play-state:paused; } @-webkit-keyframes recordspin { from { -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } } @keyframes recordspin { from { -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } to { -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } } .vinyl, .vinyl svg { width:var(--Vinyl-Icon-Size); height:var(--Vinyl-Icon-Size); } .music-controls { margin-left:10px; width:var(--Music-Controls-Size); overflow:hidden; cursor:pointer; } .music-controls svg { width:var(--Music-Controls-Size); height:var(--Music-Controls-Size); color:var(--Music-Controls); stroke-width:1.5px; } .pausee {display:none;} .beff {display:none;} .aff {display:block;} .music-title { margin-left:8px; font-family:work sans; font-size:var(--Music-Title-Font-Size); color:var(--Music-Title-Color); } </style><div id="cont"><div id="news"></div><div id="abt">race prns</div><div class="glenjams-06"><div class="pasta"><div class="vinyl"></div><div class="music-controls"><div class="playy"><i data-feather="play"></i></div><div class="pausee"><i data-feather="pause"></i></div></div><div class="music-title"></div><audio id="audio" src="https://dl.dropbox.com/s/52ib0akxyy5msir/Joy%20Hello%20Lyrics%20%28%EC%A1%B0%EC%9D%B4%20%EC%95%88%EB%85%95%20%EA%B0%80%EC%82%AC%29%20%28Color%20Coded%20Lyrics%20EngRomHan%29.mp3" type="audio"></audio></div></div>
  36.  
  37. <img class=inside src="https://data.whicdn.com/images/357565974/original.gif"><div id="cont2"><div id="scroll1"><span style="font-family: cutie; font-size:1.2em;">
  38.  
  39. <mark>about</mark></span> hi i'm <strong>name</strong>! or <strong>name</strong> ~ info info info info info info info info info info info info info info info info info info info info info info info info info
  40. <br></br>
  41. info info info info info info info info info info info info info info info info info info info info info info info info <br></br>
  42. <span style="font-family: cutie; font-size:1.2em;"><mark>byf</mark></span> byf byf byf byf byf byf byf byf byf byf byf byf byf byf byf byf byf byf byf byf byf byf byf byf
  43. <br></br>
  44. <span style="font-family: cutie; font-size:1.2em;"><mark>dni</mark></span> dni dni dni dni dni dni dni dni dni dni dni dni dni dni dni dni dni dni dni dni dni dni dni dni
  45.  
  46. </div><div id="scroll2"> <span style="font-family: cutie; font-size:1.2em;"><mark>kpop</mark></span> <strong> ults <span style="font-family: 'Gamja Flower', cursive;"> ♡</span> </strong> semis semis semis semis semis semis semis semis semis semis semis semis semis semis semis semis semis semis semis <br></br>
  47.  
  48. <span style="font-family: cutie; font-size:1.2em;"><mark>others</mark></span> others others others others others others others others others others others others others others others others others others others
  49.  
  50. </div><script>feather.replace()</script></div></div></div></div>
  51. </script><SCRIPT LANGUAGE="JavaScript">
  52. <!-- Begin
  53. var scrl = " welcome to my site! ";
  54. function scrlsts() {
  55. scrl = scrl.substring(1, scrl.length) + scrl.substring(0, 1);
  56. document.title = scrl;
  57. setTimeout("scrlsts()", 300);
  58. }
  59. // End -->
  60. </script><body onLoad="scrlsts()"><script type="text/javascript">
  61. // ]]>
  62. </script>
  63. <script type="text/javascript">
  64. // <![CDATA[
  65. var news=Array("name","name2","name3");
  66. var cursor=""; // set cursor
  67. var delay=2; // seconds between each news item
  68.  
  69. /***************************\
  70. * News Ticker Text Effect *
  71. *(c)2004-14 mf2fm web-design*
  72. * http://www.mf2fm.com/rv *
  73. * DON'T EDIT BELOW THIS BOX *
  74. \***************************/
  75. var newsp, cursp, flash, item=0;
  76.  
  77. if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
  78. var oldonload=window.onload;
  79. if (typeof(oldonload)!='function') window.onload=funky;
  80. else window.onload=function() {
  81. if (oldonload) oldonload();
  82. funky();
  83. }
  84. }
  85.  
  86. addRVLoadEvent(teleprint);
  87.  
  88. function teleprint () { if (document.getElementById) {
  89. var span=document.getElementById("news");
  90. while (span.childNodes.length) span.removeChild(span.childNodes[0]);
  91. delay*=1000;
  92. newsp=document.createElement("span");
  93. cursp=document.createElement("span");
  94. cursp.appendChild(document.createTextNode(String.fromCharCode(160)+cursor));
  95. span.appendChild(newsp);
  96. span.appendChild(cursp);
  97. ticker();
  98. }}
  99.  
  100. function ticker() {
  101. var i;
  102. while (newsp.childNodes.length) newsp.removeChild(newsp.childNodes[0]);
  103. newsp.appendChild(document.createTextNode(news[item].substring(0,1)));
  104. for (i=1; i<news[item].length; i++) setTimeout('newsp.firstChild.nodeValue="'+news[item].substring(0, i+1)+'"', 100*i);
  105. if (news[item].indexOf("www")!=-1) setTimeout('linkit('+item+')', 100*i);
  106. setTimeout('flash=setInterval("http://cursp.style.visibility=(http://cursp.style.visibility==\'visible\')?\'hidden\':\'visible\'", 234)', 100*i)
  107. setTimeout('clearInterval(flash)', delay);
  108. setTimeout('http://cursp.style.visibility="visible"', delay);
  109. setTimeout('ticker()', delay);
  110. item=++item%news.length;
  111. }
  112.  
  113. function linkit(q) {
  114. var a,p,e,l;
  115. p=news[q].indexOf("www");
  116. e=news[q].indexOf(" ", p);
  117. if (e==-1) e=news[q].length;
  118. l=news[q].substring(p, e);
  119. while (newsp.childNodes.length) newsp.removeChild(newsp.childNodes[0]);
  120. newsp.appendChild(document.createTextNode(news[q].substring(0, p)));
  121. a=document.createElement("a");
  122. a.href="http://"+l;
  123. a.appendChild(document.createTextNode(l));
  124. newsp.appendChild(a);
  125. newsp.appendChild(document.createTextNode(news[q].substring(e)));
  126. }
  127. // ]]>
  128.  
  129. </script>
  130. <script type="text/javascript">
  131. // <![CDATA[
  132. var sparks = 12;
  133. // how many sparks per clicksplosion
  134. var speed = 33;
  135. // how fast - smaller is faster
  136. var bangs = 5;
  137. // how many can be launched simultaneously (note that using too many can slow the script down)
  138. var colours = new Array('#faeadb','#5b6484','#000000','#faeadb','#5b6484','#000000','#faeadb');
  139. // blue red green purple cyan orange pink
  140.  
  141. /****************************
  142. * Clicksplosion Effect *
  143. *(c)2012-3 mf2fm web-design *
  144. * http://www.mf2fm.com/rv *
  145. * DON'T EDIT BELOW THIS BOX *
  146. ****************************/
  147. var intensity = new Array();
  148. var Xpos = new Array();
  149. var Ypos = new Array();
  150. var dX = new Array();
  151. var dY = new Array();
  152. var stars = new Array();
  153. var decay = new Array();
  154. var timers = new Array();
  155. var swide = 800;
  156. var shigh = 600;
  157. var sleft = sdown = 0;
  158. var count = 0;
  159.  
  160. function addLoadEvent(funky) {
  161. var oldonload = window.onload;
  162. if (typeof (oldonload) != 'function')
  163. window.onload = funky;
  164. else
  165. window.onload = function() {
  166. if (oldonload)
  167. oldonload();
  168. funky();
  169. }
  170. }
  171.  
  172. addLoadEvent(clicksplode);
  173.  
  174. function clicksplode() {
  175. if (document.getElementById) {
  176. var i, j;
  177. window.onscroll = set_scroll;
  178. window.onresize = set_width;
  179. document.onclick = eksplode;
  180. set_width();
  181. set_scroll();
  182. for (i = 0; i < bangs; i++)
  183. for (j = sparks * i; j < sparks + sparks * i; j++) {
  184. stars[j] = createDiv('♡', 13);
  185. document.body.appendChild(stars[j]);
  186. }
  187. }
  188. }
  189.  
  190. function createDiv(char, size) {
  191. var div, sty;
  192. div = document.createElement('div');
  193. sty = div.style;
  194. sty.font = size + 'px monospace';
  195. sty.position = 'absolute';
  196. sty.backgroundColor = 'transparent';
  197. sty.visibility = 'hidden';
  198. sty.zIndex = '101';
  199. div.appendChild(document.createTextNode(char));
  200. return (div);
  201. }
  202.  
  203. function bang(N) {
  204. var i, Z, A = 0;
  205. for (i = sparks * N; i < sparks * (N + 1); i++) {
  206. if (decay[i]) {
  207. Z = stars[i].style;
  208. Xpos[i] += dX[i];
  209. Ypos[i] += (dY[i] += 1.25 / intensity[N]);
  210. if (Xpos[i] >= swide || Xpos[i] < 0 || Ypos[i] >= shigh + sdown || Ypos[i] < 0)
  211. decay[i] = 1;
  212. else {
  213. Z.left = Xpos[i] + 'px';
  214. Z.top = Ypos[i] + 'px';
  215. }
  216. if (decay[i] == 15)
  217. Z.fontSize = '7px';
  218. else if (decay[i] == 7)
  219. Z.fontSize = '2px';
  220. else if (decay[i] == 1)
  221. Z.visibility = 'hidden';
  222. decay[i]--;
  223. } else
  224. A++;
  225. }
  226. if (A != sparks)
  227. timers[N] = setTimeout('bang(' + N + ')', speed);
  228. }
  229.  
  230. function eksplode(e) {
  231. var x, y, i, M, Z, N;
  232. set_scroll();
  233. y = (e) ? e.pageY : event.y + sdown;
  234. x = (e) ? e.pageX : event.x + sleft;
  235. N = ++count % bangs;
  236. M = Math.floor(Math.random() * 3 * colours.length);
  237. intensity[N] = 5 + Math.random() * 4;
  238. for (i = N * sparks; i < (N + 1) * sparks; i++) {
  239. Xpos[i] = x;
  240. Ypos[i] = y - 5;
  241. dY[i] = (Math.random() - 0.5) * intensity[N];
  242. dX[i] = (Math.random() - 0.5) * (intensity[N] - Math.abs(dY[i])) * 1.25;
  243. decay[i] = 16 + Math.floor(Math.random() * 16);
  244. Z = stars[i].style;
  245. if (M < colours.length)
  246. Z.color = colours[i % 2 ? count % colours.length : M];
  247. else if (M < 2 * colours.length)
  248. Z.color = colours[count % colours.length];
  249. else
  250. Z.color = colours[i % colours.length];
  251. Z.fontSize = '13px';
  252. Z.visibility = 'visible';
  253. }
  254. clearTimeout(timers[N]);
  255. bang(N);
  256. }
  257.  
  258. function set_width() {
  259. var sw_min = 999999;
  260. var sh_min = 999999;
  261. if (document.documentElement && document.documentElement.clientWidth) {
  262. if (document.documentElement.clientWidth > 0)
  263. sw_min = document.documentElement.clientWidth;
  264. if (document.documentElement.clientHeight > 0)
  265. sh_min = document.documentElement.clientHeight;
  266. }
  267. if (typeof (self.innerWidth) == 'number' && self.innerWidth) {
  268. if (self.innerWidth > 0 && self.innerWidth < sw_min)
  269. sw_min = self.innerWidth;
  270. if (self.innerHeight > 0 && self.innerHeight < sh_min)
  271. sh_min = self.innerHeight;
  272. }
  273. if (document.body.clientWidth) {
  274. if (document.body.clientWidth > 0 && document.body.clientWidth < sw_min)
  275. sw_min = document.body.clientWidth;
  276. if (document.body.clientHeight > 0 && document.body.clientHeight < sh_min)
  277. sh_min = document.body.clientHeight;
  278. }
  279. if (sw_min == 999999 || sh_min == 999999) {
  280. sw_min = 800;
  281. sh_min = 600;
  282. }
  283. swide = sw_min - 7;
  284. shigh = sh_min - 7;
  285. }
  286.  
  287. function set_scroll() {
  288. if (typeof (self.pageYOffset) == 'number') {
  289. sdown = self.pageYOffset;
  290. sleft = self.pageXOffset;
  291. } else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
  292. sdown = document.body.scrollTop;
  293. sleft = document.body.scrollLeft;
  294. } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
  295. sleft = document.documentElement.scrollLeft;
  296. sdown = document.documentElement.scrollTop;
  297. } else {
  298. sdown = 0;
  299. sleft = 0;
  300. }
  301. }
  302. // ]]>
  303. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!