Wooden Scroll Box Moving Images Carrd @coracrd

Made for mobile, pro standard.

Page Settings:

width - 24

padding vertical and horizontal - 0

size - 20

alignment - center

spacing - 0.75

1. Add a container

Container Settings:

Columns - Left 25% Right 75%

width - 31

padding vertical and horizontal - 0.125

gutters - 0.125

margins - auto

alignment - right

Contents alignment - center, top

spacing - 0.75

Go into Mobile > Manual and switch the Layout from stack to default

2. Add an image, put in the left side of the container

This will be the image moving at the side of your scroll box

Image Settings:

width - 9.375

height - auto

3. Add an embed, put in the right side of the container

Name Embed: This embed adds the positioning and animation of your name text at the top right corner of the scroll box on the carrd

<style>

@font-face {

font-family: quick love;

src: url(https://dl.dropbox.com/s/1gykjoyyrosf5r3/Quick%20Love.ttf?dl=0);

}

#quick love {

#font-family: quick love;

}

#news {

text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;

font-size:200%;

font-family: quick love;

font-weight:bold;

font-size: 50px;

color: #dde5b6;

position: absolute;

z-index:99;

left:277px;

bottom:188px;

transform: rotate(5deg);

}

</style>

<head>

// <![CDATA[

var news=Array("Name","Another","Whatever"); /*Delete underlined if only one name*/

var cursor=""; // set cursor

var delay=2; // seconds between each news item

/***************************\

* News Ticker Text Effect *

* http://www.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("cursp.style.visibility=(cursp.style.visibility==\'visible\')?\'hidden\':\'visible\'", 234)', 100*i)

setTimeout('clearInterval(flash)', delay);

setTimeout('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>

</head>

<span id="news">NEWS-TICKER</span>

4. Add an image, put on top outside of the container

No need to change the settings of this image! It looks like this as of now

5. Add another embed, put it above everything

Leaf Embed: This embed adds the positioning and animation of the picture at the top left corner of the scroll box on the carrd!

<style>

#image02 {

animation: brrr 0.5s infinite; /* hdsjhdj */

position: absolute;

width:40px;

height:auto;

z-index: 50;

left: 92px;

top: 6px;

}

@keyframes brrr { 0% { transform: rotate(2deg); } 50% { transform: rotate(2deg); } 51% { transform: rotate(-2deg); } 100% { transform: rotate(-2deg); } } }

}

</style>

6. Add another embed, put it above everything else

Sayu Embed: This embed adds the positioning and animation of the picture at the left corner of the scroll box on the carrd!

<style>

#image01 {

animation: brrr 0.5s infinite;

position: absolute;

right: 130px;

width: 100%;

top: 4.85em; z-index: 50; }

@keyframes brrr { 0% { transform: rotate(2deg); } 50% { transform: rotate(2deg); } 51% { transform: rotate(-2deg); } 100% { transform: rotate(-2deg); } } }

}

</style>

7. Add another embed, put it under your name embed

Scroll Box Embed: This embed adds the scroll box and everything inside it on the carrd

<style>

@font-face {

font-family: pancis;

src: url(https://dl.dropbox.com/s/96qhr2o6ch0s2op/Pancis-Regular.ttf?dl=0);

}

#pancis{

#font-family: pancis;

}

@font-face {

font-family: 'Magica';

src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);

}

#magica {

font-family: 'Magica';

}

@font-face {

font-family: 'ogquality';

src: url(https://dl.dropbox.com/s/97mgazjydryt33h/Original%20Quality%20DEMO.otf?dl=0);

}

#ogquality{

font-family: 'ogquality';

}

#scroll1 {

border-width:7px;

border-style:solid;

border-image: url("https://i.imgur.com/rXiSx14.png") 8 fill round;

height: 210px;

width: 100%;

font-family: ogquality;

font-size: 16px;

overflow: auto;

text-align:left;

padding-left: 18px;

padding-right: 18px;

padding-top: 18px;

padding-bottom: 10px;

}

mark { /* This is the text bubble mark tag thingy*/

background: #adc178;

border-radius:7px;

border: 1px solid black;

padding-left: 5px;

padding-right: 5px;

color: #fff;

text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;

letter-spacing: normal;

font-family: pancis;

font-size: 12px;

num { /* css for numbers in byf & dfi */

color: #fff;

text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;

font-family: ogquality;

font-size: 16px;

overflow: auto;

text-align:left;

}

heavy {

font-weight: 900;

}

heavy {

color: 900;

}

</style>

<mark>about me!</mark> <! -- don’t forget to add a space after each mark to keep the text separated! -->

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

<mark>interests</mark>

<span style="color: #f0ffc6; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;">thing</span>,

<num>1.</num> Text text text

<num> 3.</num> Text text text

<num> 4.</num> Text text text

<num> 5.</num> Text text text

<num>1.</num> Text text text

<num> 2.</num> Text text text

<num> 3.</num> Text text text

<num> 4.</num> Text text text

<num> 5.</num> Text text text

<mark>notes</mark> whatever text you want idk

wooden border by coracrd /* pls don't delete cr! */

</div>

And now you should be done!

Any questions about anything leave them on our cc -> https://curiouscat.qa/coracrd

If you send us something through dms it will probably be answered way later than any ccs, just keep that in mind!