SCRIPTED RESOURCES

scripted resources scripted.neocities.org

Text Animations

Blinking

Bouncy 1

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

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

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

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

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

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

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

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

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

.bounce mark:nth-child(10) {
    animation-delay: 1.8s;
    display: inline-block;
  }

@keyframes bounce-anim {
    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="bounce"><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 ".bounce" 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>

Bouncy 2

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);
}

Candy cane

Downloading Data progress bars

Flirty

/****************************
* 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;

<div id="flirt">Sample ... Sample ... Sample .... </div>

Glitch

Outline Glow

Infinite Shake

Jerky

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);
  }
}

Horizontal Marquee

Moving Text Site Name

/***************************\
* News Ticker Text Effect *
*(c)2004-14 mf2fm web-design*
* http://mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var newsp, cursp, flash, item=0;

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(teleprint);

function teleprint () { if (document.getElementById) {
 var span=document.getElementById("news");
 while (span.childNodes.length) span.removeChild(span.childNodes[0]);
 delay*=1000;
 newsp=document.createElement("span");
 cursp=document.createElement("span");
 cursp.appendChild(document.createTextNode(String.fromCharCode(160)+cursor));
 span.appendChild(newsp);
 span.appendChild(cursp);
 ticker();
}}

function ticker() {
 var i;
 while (newsp.childNodes.length) newsp.removeChild(newsp.childNodes[0]);
 newsp.appendChild(document.createTextNode(news[item].substring(0,1)));
 for (i=1; i<news[item].length; i++) setTimeout('newsp.firstChild.nodeValue="'+news[item].substring(0, i+1)+'"', 100*i);
 if (news[item].indexOf("www")!=-1) setTimeout('linkit('+item+')', 100*i);
 setTimeout('flash=setInterval("http://cursp.style.visibility=(http://cursp.style.visibility==\'visible\')?\'hidden\':\'visible\'", 234)', 100*i)
 setTimeout('clearInterval(flash)', delay);
 setTimeout('http://cursp.style.visibility="visible"', delay);
 setTimeout('ticker()', delay);
 item=++item%news.length;
}

function linkit(q) {
 var a,p,e,l;
 p=news[q].indexOf("www");
 e=news[q].indexOf(" ", p);
 if (e==-1) e=news[q].length;
 l=news[q].substring(p, e);
 while (newsp.childNodes.length) newsp.removeChild(newsp.childNodes[0]);
 newsp.appendChild(document.createTextNode(news[q].substring(0, p)));
 a=document.createElement("a");
 a.href="http://"+l;
 a.appendChild(document.createTextNode(l));
 newsp.appendChild(a);
 newsp.appendChild(document.createTextNode(news[q].substring(e)));
}
// ]]>
</script>
<style>
#news {
 color: #5C5C5C;
 text-shadow: 0rem 0rem 0.500rem #00000040;
}
</style>
<span id="news"></span>

Vertical Marquee

Pop out

Rainbow

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">Sample</span>

Rainbow Outline

addLoadEvent(regenbogen);

Rolling

/***************************\
*    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>
<div id="rolling">Sample.... Sample ... Sample .... WOW</div>

Shaky Filter

#text {
    animation: squiggly-anim 0.5s linear infinite;
  }

.svg-container {
    width: 0;
    height: 0;
    overflow: hidden;
  }
</style>

<p id="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</p>

Tilt

Text Styles

90* Gradient

Double Color Border

Image/GIF on Text

Gradient

Single Color Outline

Two Color Outline

Gamja Heart

Magica Heart

Mark 1: Stitch

Mark 2

Mark 3

Mark 4

Mark 5

Button 1

Button 2 (c) itzhuo

#text:hover {
    webkit-filter: blur(1px);
    filter: blur(1px);
    letter-spacing: 1.5px;
  }
</style>

<p id="text">Sample</p>

Button 3 (c) sawyer/3k05

Underline: Basic

Underline: Dotted

Underline: Wavy

Text Hover

Background Color

Background Sideways

Blur

Expand

Breeze Link (c) carrduser

Float

Change Color

Sound on Click

<p onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()" class="text">Sample</p>

Italic

Strong

Basic: Dotted Underline

Basic: Wavy Underline

Basic: Underline

Transition: Underline

Transition: Dashed

Transition: Squiggly