The web site of scripteds

• Text section contains text styles, hovers, and animations. Click the scrollbox underneath the title to copy the code!

Sample

Floating

Sample

Pop out

Sample Marquee

Sample
Bounce

.lebounce mark:nth-child(1) {
    animation-delay: 0s;
    display: inline-block;
  }

.lebounce mark:nth-child(2) {
    animation-delay: 0.2s;
    display: inline-block;
  }

.lebounce mark:nth-child(3) {
    animation-delay: 0.4s;
    display: inline-block;
  }

.lebounce mark:nth-child(4) {
    animation-delay: 0.6s;
    display: inline-block;
  }

.lebounce mark:nth-child(5) {
    animation-delay: 0.8s;
    display: inline-block;
  }

.lebounce mark:nth-child(6) {
    animation-delay: 1s;
    display: inline-block;
  }

.lebounce mark:nth-child(7) {
    animation-delay: 1.2s;
    display: inline-block;
  }

.lebounce mark:nth-child(8) {
    animation-delay: 1.4s;
    display: inline-block;
  }

.lebounce mark:nth-child(9) {
    animation-delay: 1.6s;
    display: inline-block;
  }

.lebounce mark:nth-child(10) {
    animation-delay: 1.8s;
    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>

<div class="lebounce"><mark>I</mark><mark>n</mark><mark>s</mark><mark>e</mark><mark>r</mark><mark>t</mark> <mark>h</mark><mark>e</mark><mark>r</mark><mark>e</mark></div>
<div style="font-size: 1.5em;">
  To insert into Carrd: copy and paste all the styles into an embed, nothing outside of it. If you have pro plus, give the text you want to have bouncy letters the "lebounce" class. If you have pro standard, change ".lebounce" to "#text01" or whatever the ID of your text is. To then put the code into action, highlight each individual letter using Carrd's markdown rules (==l====i====k=====e== ==t====h====i====s==). Voila.
  As for creds...<br>
  CYBERPINKED FOR THE BASE CODE. ALLISON OF MCYT.CRD.CO. Then also li'l old me, Jake @carrduser, only if you repost to your resource Carrd because I optimized it for Carrd. THANKS!!!!!!! Muchas gracias.
</div>

Sample

Tilt

Sample

Expand Hover

Sample Wobble

Sample

Rolling Text

/***************************\
*    Rolling Text Effect    *
* (c)2014+ mf2fm web-design *
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var diddly=new Array();
var rolltop;
var referee=0;
delay*=1000;

if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addRVLoadEvent(prepare_to_go);

function prepare_to_go() {
  var i, r;
  var r=document.getElementById("rolling");
  rolltop=r.clientHeight;
  while (r.childNodes.length) r.removeChild(r.childNodes[0]);
  r.style.position="relative";
  r.style.overflow="hidden";
  r.appendChild(document.createTextNode(String.fromCharCode(160)));
  for (i=0; i<text.length; i++) {
    diddly[i]=document.createElement("div");
	diddly[i].style.position="absolute";
	diddly[i].style.top=rolltop+"px";
	diddly[i].style.left="0px";
	if (text[i].indexOf("www")!=-1) slinkit(diddly[i], text[i]);
	else diddly[i].appendChild(document.createTextNode(text[i]));
	r.appendChild(diddly[i]);
  }
  rolling_in_the_hay();
}

function rolling_in_the_hay() {
  var i, j;
  j=referee%text.length;
  for (i=rolltop; i>=0; i--) setTimeout("diddly["+j+"].style.top='"+i+"px'", speed*(rolltop-i));
  for (i=-1; i>-rolltop; i--) setTimeout("diddly["+j+"].style.top='"+i+"px'", delay-speed*i);
  ++referee;
  setTimeout('rolling_in_the_hay()', delay);
}

function slinkit(r, t) {
  var a, s, e;
  s=t.indexOf("www");
  e=t.indexOf(" ", s);
  if (e==-1) e=t.length;
  r.appendChild(document.createTextNode(t.substring(0, s)));
  a=document.createElement("a");
  a.href="http://"+t.substring(s, e);
  a.appendChild(document.createTextNode(t.substring(s, e)));
  r.appendChild(a);
  r.appendChild(document.createTextNode(t.substring(e)));
}
// ]]>
</script>
<style>
h2{
font-size: 200%;
 color: #FF99CA ;
 font-family: “sans-serif”;
font-weight: bold;
text-shadow: 3px 3px 4px #FFB0D6 ;
}
</style>
<div id="rolling">TALA</div>

Sample

Bubbling

/****************************
*    Bubbling Text Effect   *
*(c)2003-13 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var bubbcol=new Array();
var bubbshd;
var bubbler, bubbtxt;
var bubbchr=new Array();

function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addLoadEvent(bubbagump);

function dechex(dec) {
  dec=Math.floor(dec);
  return ((dec<16)?'0':'')+dec.toString(16);
}

ScRiPted

Old Scripted Double Borders

90 degree Gradient Text

Vertical Marquee

Flirty Text

/****************************
* Flirty Texy Effect *
*(c)2003-6 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var flitxt;
var flipos=0;
var flidir=1;

Neon Light

/****************************
*Multi-Wipe Neon Text Effect*
*(c)2003-13 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var w_txt, w_txl;
var w_flp=bgcolour;
var w_sty=Math.floor(Math.random()*8);
var w_cnt=-1;
var wipes=new Array();
var wrand=new Array();

addLoadEvent(fzzz);

function c(i, shade) {
  if (shade==bgcolour) wipes[i].textShadow="none";
  else wipes[i].textShadow=glcolour+" 0px 0px 5px";
  wipes[i].color=shade;
}

function randwipe() {
  var w_old;
  if (w_cnt++<w_txl+2+delay*(w_flp==fgcolour)) eval("wipe"+w_sty+"();");
  else {
    w_cnt=-1;
    w_flp=(w_flp==fgcolour)?bgcolour:fgcolour;
    w_old=w_sty;
    while (w_old==w_sty) w_sty=Math.floor(Math.random()*9);
  }
}

function dechex(dec) { return ((dec<16)?"0":"")+dec.toString(16); }

function wipe0() { // full curtains
  var half=Math.floor(w_txl/2);
  if (w_cnt<w_txl) {
    c(w_cnt, (w_cnt<half)?hlcolour:w_flp);
    c(w_txl-w_cnt-1, (w_cnt<half)?hlcolour:w_flp);
  }
}

function wipe2() { // forwards
  if (w_cnt<w_txl) c(w_cnt, hlcolour);
  if (w_cnt>0 && w_cnt<w_txl+1) c(w_cnt-1, w_flp);
}

function wipe3() { // backwards
  if (w_cnt<w_txl) c(w_txl-(w_cnt+1), hlcolour);
  if (w_cnt>0 && w_cnt<w_txl+1) c(w_txl-w_cnt, w_flp);
}

function wipe4() { // searchlight
  if (w_cnt<w_txl) c(w_cnt, hlcolour);
  if (w_cnt>0 && w_cnt<w_txl+1) c(w_cnt-1, w_flp);
  if (w_cnt>1 && w_cnt<w_txl+2) c(w_cnt-2, hlcolour);
  if (w_cnt>2 && w_cnt<w_txl+3) c(w_cnt-3, (w_flp==fgcolour)?bgcolour:fgcolour);
  if (w_cnt==w_txl+2) w_flp=(w_flp==fgcolour)?bgcolour:fgcolour;
}

function wipe6() { // flash
  var i;
  if (w_cnt<6*Math.floor(w_txl/6)+3) {
    if (w_cnt%6==0 || w_cnt%6==3) for (i=0; i<w_txl; i++) c(i, hlcolour);
    else if (w_cnt%6==1) for (i=0; i<w_txl; i++) c(i, w_flp);
    else if (w_cnt%6==4) for (i=0; i<w_txl; i++) c(i, (w_flp==fgcolour)?bgcolour:fgcolour);
  }
}

Sample

Blinking Text

Sample

GIF on Text

Sample

Gradient Text

Sample

Blur Hover

Sample

Mark: Stitch Style

Sample

Jerky

Sample

Candycane

Sample

Rainbow

Sample

Glow

Sample

Single Color Outline

Rainbow Glow

/****************************
*    Rainbow Text Effect    *
*(c)2003-13 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var rainbow, raintxt, raincnt=0;

addLoadEvent(regenbogen);

function raining() {
  var i, c;
  for (i=0; i<raintxt.length; i++) {
    c=raincol[(i+raincnt)%raincol.length];
    document.getElementById("rain"+i).style.color=c;
	if (glow) document.getElementById("rain"+i).style.textShadow=c+" 0px 0px "+glow+"px";
  }
  raincnt++;
}
// ]]>
</script>
      <span id="rainbow">RAINBOW TEXT</span>