CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

Cascading Style Sheets (CSS) - Textos rolantes verticalmente

Por Benedito Silva Júnior - publicado em 14/07/2016



Com o CSS é possível aplicar efeitos de textos rolantes em determinadas áreas de sites nas quais textos rolam de baixo para cima, em determinada velocidade.

Veja:

1. Crie o arquivo no qual terá o conteúdo a ser mostrado na área especial (arquivo-de-conteudos.php):

<style type="text/css"> body { background-color: transparent; margin: 0; padding: 0; border: 0; } a:link {text-decoration: none;color: #000} a:active {text-decoration: none;} a:visited {text-decoration: none;color: #000} a:hover {text-decoration: underline;color: #000} /* FONT COLORS */ div{color: #000; font-family: Arial, Helvetica, sans-serif; size:12px; } .title {color: #000; font: 12px Verdana, Geneva, sans-serif; font-weight: bold; } #NewsDiv {position: absolute; left: 0; top: 0; width: auto; } </style> <script type="text/javascript"> <!-- HIDE CODE JAVASCRIPT NEWS SCROLLER ver 2.0 2013 var scrollspeed = 1; // SET SCROLLER SPEED 1 = SLOWEST var speedjump = 20; // ADJUST SCROLL JUMPING = RANGE 20 TO 40 var startdelay = 0; // START SCROLLING DELAY IN SECONDS var nextdelay = 0; // SECOND SCROLL DELAY IN SECONDS 0 = QUICKEST var topspace = 0; // TOP SPACING FIRST TIME SCROLLING var frameheight = 204; // IF YOU RESIZE THE WINDOW EDIT THIS HEIGHT TO MATCH current = (scrollspeed); function HeightData() { AreaHeight = dataobj.offsetHeight; if (AreaHeight === 0) { setTimeout("HeightData()", (startdelay * 1000)); } else { ScrollNewsDiv(); } } function NewsScrollStart() { dataobj = document.all ? document.all.NewsDiv : document.getElementById("NewsDiv"); dataobj.style.top = topspace + 'px'; setTimeout("HeightData()", (startdelay * 1000)); } function ScrollNewsDiv() { dataobj.style.top = parseInt(dataobj.style.top) - scrollspeed + 'px'; if (parseInt(dataobj.style.top) < AreaHeight * (-1)) { dataobj.style.top = frameheight + 'px'; setTimeout("ScrollNewsDiv()", (nextdelay * 1000)); } else { setTimeout("ScrollNewsDiv()", speedjump); } } // END HIDE CODE Se preferir, crie um arquivo separado para armazenar os códigos CSS acima. </script> </head> <body onMouseover="scrollspeed=0" onMouseout="scrollspeed=current" OnLoad="NewsScrollStart();"> <div id="NewsDiv" style="text-align: left; padding: 5px;"> <center> <font face="Arial, Helvetica, sans-serif" size="2"> <!-- SCROLLER CONTENT STARTS HERE --> <span class="title"> Título 01</a> </span> <br /> <a href="link01.php"> Descrição do título. </a> <br /><br /> <span class="title"> Título 02</a> </span> <br /> <a href="link02.php"> Descrição do título.</a> </a> <br /><br /> <span class="title"> Título 03</a> </span> <br /> <a href="link03.php"> Descrição do título. </a> <br /><br /> <!-- SCROLLER CONTENT ENDS HERE --> </font> </center> </div>

2. Insira os códigos abaixo na área do site onde os textos rolantes serão mostrados:

<div style="width: 198px; border: none 1px solid; background-color: none; text-align: center; padding: 0px 2px 7px 2px;"> <div style="color: #FFFFFF; font-family: Arial, sans-serif; font-weight: bold; text-align: center; padding: 3px;"> </div> <iframe id="NewsWindow" seamless src="arquivo-de-conteudos.php" width="198" height="200" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" style="display: block; margin: 0 auto; padding: 0; border: none;"></iframe> </div> //Determine o comprimento e altura da área onde os textos rolarão modificando os parâmetros "width" e "height" do bloco de códigos acima.


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo