Marquee text up/down with a fixed image on ticker/dataset

The Archives Help Topics
1

I want to use a unique region to display image and text from a data set. But I want the image to be still and use the marquee effect only on the text. Can this be done?

2

No. The whole content will scroll.

You would have to use two regions to accomplish what you want.

3

This marquee, fade, scroll (etc…) animations, are they made via CSS?

If I use CSS to make this custom animations, would it ok?

4

I’m not 100% sure. My impression is they’re jQuery based javascript animations from what I understand. You may be able to apply your own animations. You’re very welcome to try.

5

Again, the bootstrap works well !

But not for my odroid c1. It seems that my android has a problem with html 5 and CSS3 (my another try, to make a random playlist using embedded videos, didn’t work on odroid c1 too). I’ll try to find out what is happening with this android build.

But if you want to make custom animations, like photos and text rotating, scrolling, fading, etc… CSS3 appears to works fine. =)

1 Like
6

Yes they are - although the jQuery plugin may well use CSS3 to achieve some of the animations. I can tell you for sure that it doesn’t use any of the openGL stuff

7

Just a relevant update.

Don’t know exactly why, but the CSS animations started to work. Although, I was starting to use pure JS animations, and they execute smoothly than the CSS ones.

Soon as I finish the JS code to this text scroll, I’ll post it here. It is a great complement to use with random dataset entries.

8

Here is the code. Basically, it’s a Div with a fixed size with overflow hidden (this will crop the content). Inside this div will have another one that will move.

<script type="text/javascript">
//this script set how much the text needs to scroll.
var containerH = document.getElementById('container_div').clientHeight;
var contentH= document.getElementById('content_div').clientHeight;
var valor_rol=(containerH-contentH);
if (valor_rol>0){
  valor_rol=0;
}
//end

//this one will animate the text
var foo = null;
function doMove() {
var top_atual=parseInt(foo.style.top);

  if(top_atual>valor_rol) {
      foo.style.top=parseInt(foo.style.top)-1+'px'; //here you can change the direction and how much it will go each "frame"
  }
  setTimeout(doMove,20);}    // repeat the function every 20 ms

function init() {
  foo = document.getElementById('content_div'); // get the div wich will move
  foo.style.top = '0px'; // set its initial position to 0px
  
  setTimeout(doMove,7000); // wait 7seconds and then starts to animate
}
window.onload = init;

</script>

<div id="container_div"> <!-- This Div will be the main box -->
<div id="content_div">[dica|9]</div>  <!-- This Div will move-->
</div>


------------------ style ----------------

#container_div {
bottom:0;
right:0;
position:absolute;
    width: 1360px;
    height: 255px;
    overflow:hidden;

}

#content_div{
position:absolute;
color:#fff;
font-size:70px;
width:1360px;

}

Again, make this animations with css3 it’s much easier. But in my case it is not 100% doable.

1 Like
9

I’ve changed the title so that someone searching has more chance of getting a hit! Thanks for posting back with your solution :smile: