ranboo's code stuff idk
hello im ranboo im here to code and to do. nothing else lol. have a collection of some of my html and java shit. text effects img effects etc. stuff you'd find on a carrd.

text effects
1
2
3
4
5
6
height: 115px;
overflow:scroll;
overflow-x:hidden;
border:1px dashed black;
padding-left:5px;
padding-right:5px;
<Style>.bouncyyy { font-size:4em; z-index: 99; animation: bounce 2s infinite; animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1) width:auto; ;}

.letterone { animation-delay:0s; display:inline-block;}
.lettertwo { animation-delay:0.2s; display:inline-block;}
.letterthree { animation-delay:0.4s; display:inline-block; }
.letterfour { animation-delay:0.6s; display:inline-block;}
.letterfive { animation-delay:0.8s; display:inline-block;}
.lettersix { animation-delay:1s; display:inline-block;}
.letterseven { animation-delay:1.2s; display:inline-block;}

@keyframes bounce { 0% { transform: scale(1,1) translateY(0); } 10% { transform: scale(1.1,.9) translateY(0); } 30% { transform: scale(.9,1.1) translateY(-30px); } 50% { transform: scale(1.05,.95) translateY(0); } 60% { transform: scale(1,1) translateY(-4px); } 100% { transform: scale(1,1) translateY(0); } }</style>

<p class="bouncyyy letterone">A</p><p class="bouncyyy lettertwo">L</p><p class="bouncyyy letterthree">L</p><p class="bouncyyy letterfour">I</p><p class="bouncyyy letterfive">S</p><p class="bouncyyy lettersix">O</p><p class="bouncyyy letterseven">N</p>

if you want more letters than 7 on your thing, just rinse and repeat with the code (add a .lettereight delay 1.4 etc...)

.pop {
    animation: pop 0.58s infinite;
    -webkit-animation: pop 0.58s infinite;
}
@keyframes pop {
    from {
        transform:scale(0.90)
    }
    50% {
        transform:scale(1.01)
    }
    to {
        transform:scale(0.90)
    }
}
@-webkit-keyframes pop {
    from {
        -webkit-transform:scale(0.90)
    }
    50% {
        -webkit-transform:scale(1.01)
    }
    to {
        -webkit-transform:scale(0.90)
    }
}
<html>
<head>

<h1>INSERT YOUR TEXT HERE!</h1>

<style>

body {
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 font-family: 'Times', cursive;
}

h1 {
 font-size: 60px;
 background-image: url(YOUR IMAGE/GIF HERE);
 background-size: cover;
 background-clip: text;
 -webkit-background-clip: text;
 color: transparent;
 -webkit-text-stroke: 1px black;
font-weight:bold; 
font-style: italic;
}

</style>

</body>
</html>
<style>
#wobble {
 text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
 font-size:200%;
 font-weight:bold; 
 color: #fff;
 }
</style>

<script type="text/javascript">
// <![CDATA[
var speed=100; // speed of wobbling, lower is faster
var height=3; // height of wobbling in pixels
var alink="http://www.mf2fm.com/rv"; // page to link text to (set to ="" for no link)

/****************************
*    Wobbly Text Effect     *
*(c) 2003-6 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var wobtxt, wobble, wobcnt=0;
window.onload=function() { if (document.getElementById) {
  var i, wobli;
  wobble=document.getElementById("wobble");
  wobtxt=wobble.firstChild.nodeValue;
  while (wobble.childNodes.length) wobble.removeChild(wobble.childNodes[0]);
  for (i=0; i<wobtxt.length; i++) {
    wobli=document.createElement("span");
    wobli.setAttribute("id", "wobb"+i);
    wobli.style.position="relative";
    wobli.appendChild(document.createTextNode(wobtxt.charAt(i)));
    if (alink) {
      wobli.style.cursor="pointer";
      wobli.onclick=function() { top.location.href=alink; }
    }
    wobble.appendChild(wobli);
  }
  setInterval("wobbler()", speed);
}}

function wobbler() {
  for (var i=0; i<wobtxt.length; i++) document.getElementById("wobb"+i).style.top=Math.round(height*Math.sin(i+wobcnt))+"px"
  wobcnt++;
}
// ]]>
</script>

<div id="wobble">WOBBLY TEXT</div>
Edit Report
Pub: 22 Sep 2022 12:58 UTC
Edit: 22 Sep 2022 21:53 UTC
Views: 1119