Marquee Set Speed

Marquee Set Speed

You have to create a custom class for scrolling the text:

ScrollTextView.java

public class ScrollTextView extends TextView {

     // scrolling feature
     private Scroller mSlr;

     // milliseconds for a round of scrolling
     private int mRndDuration = 10000;

     // the X offset when paused
     private int mXPaused = 0;

     // whether it's being paused
     private boolean mPaused = true;

     /*
     * constructor
     */
     public ScrollTextView(Context context) {
         this(context, null);
         // customize the TextView
         setSingleLine();
         setEllipsize(null);
         setVisibility(INVISIBLE);
     }

     /*
     * constructor
     */
     public ScrollTextView(Context context, AttributeSet attrs) {
         this(context, attrs, android.R.attr.textViewStyle);
         // customize the TextView
         setSingleLine();
         setEllipsize(null);
         setVisibility(INVISIBLE);
     }

     /*
     * constructor
     */
     public ScrollTextView(Context context, AttributeSet attrs, int defStyle) {
         super(context, attrs, defStyle);
         // customize the TextView
         setSingleLine();
         setEllipsize(null);
         setVisibility(INVISIBLE);
     }

     /**
     * begin to scroll the text from the original position
     */
     public void startScroll() {
         // begin from the very right side
         mXPaused = -1 * getWidth();
         // assume it's paused
         mPaused = true;
         resumeScroll();
     }

     /**
     * resume the scroll from the pausing point
     */
     public void resumeScroll() {

         if (!mPaused) return;

         // Do not know why it would not scroll sometimes
         // if setHorizontallyScrolling is called in constructor.
         setHorizontallyScrolling(true);

         // use LinearInterpolator for steady scrolling
         mSlr = new Scroller(this.getContext(), new LinearInterpolator());
         setScroller(mSlr);

         int scrollingLen = calculateScrollingLen();
         int distance = scrollingLen - (getWidth() + mXPaused);
         int duration = (new Double(mRndDuration * distance * 1.00000
         / scrollingLen)).intValue();

         setVisibility(VISIBLE);
         mSlr.startScroll(mXPaused, 0, distance, 0, duration);
         invalidate();
         mPaused = false;
     }

     /**
     * calculate the scrolling length of the text in pixel
     *
     * @return the scrolling length in pixels
     */
     private int calculateScrollingLen() {
         TextPaint tp = getPaint();
         Rect rect = new Rect();
         String strTxt = getText().toString();
         tp.getTextBounds(strTxt, 0, strTxt.length(), rect);
         int scrollingLen = rect.width() + getWidth();
         rect = null;
         return scrollingLen;
     }

     /**
     * pause scrolling the text
     */
     public void pauseScroll() {
         if (null == mSlr) return;

         if (mPaused)
         return;

         mPaused = true;

         // abortAnimation sets the current X to be the final X,
         // and sets isFinished to be true
         // so current position shall be saved
         mXPaused = mSlr.getCurrX();

         mSlr.abortAnimation();
     }

     @Override
     /*
     * override the computeScroll to restart scrolling when finished so as that
     * the text is scrolled forever
     */
     public void computeScroll() {
         super.computeScroll();

         if (null == mSlr) return;

         if (mSlr.isFinished() && (!mPaused)) {
           this.startScroll();
         }
     }

     public int getRndDuration() {
       return mRndDuration;
     }

     public void setRndDuration(int duration) {
       this.mRndDuration = duration;
     }

     public boolean isPaused() {
       return mPaused;
     }
}

In your layout write like this:

<yourpackagename.ScrollTextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/scrolltext" />

In your activity write like this:

ScrollTextView scrolltext=(ScrollTextView) findViewById(R.id.scrolltext);
scrolltext.setText(yourscrollingtext);
scrolltext.setTextColor(Color.BLACK);
scrolltext.startScroll();

If you want to increase the scrolling speed then reduce the value of :

private int mRndDuration = 10000;//reduce the value of mRndDuration to increase scrolling speed

CSS Marquee speed

Right, this is more of a math problem than anything.

We can do a simple Time = Distance/Speed calculation like this

function calcSpeed(speed) {  // Time = Distance/Speed  var spanSelector = document.querySelector('.marquee span');  var spanLength = spanSelector.offsetWidth;  var timeTaken = spanLength / speed;  spanSelector.style.animationDuration = timeTaken + "s";}calcSpeed(100);
function calcFastSpeed(speed) {  // Time = Distance/Speed  var spanSelector = document.querySelector('.fast.marquee span');  var spanLength = spanSelector.offsetWidth;  var timeTaken = spanLength / speed;  spanSelector.style.animationDuration = timeTaken + "s";}calcFastSpeed(500);

/* Make it a marquee */
.marquee {  width: 100%;  margin: 0 auto;  white-space: nowrap;  overflow: hidden;  background-color: #000000;  bottom: 0px;  color: white;}.marquee span {  display: inline-block;  padding-left: 100%;  text-indent: 0;  animation: marquee linear infinite;  animation-delay: 5s;  background-color: #000000;  color: white;  bottom: 0px;}/* Make it move */
@keyframes marquee {  0% {    transform: translate(10%, 0);  }  100% {    transform: translate(-100%, 0);  }}/* Make it pretty */
.scroll {  padding-left: 1.5em;  position: fixed;  font: 50px'Verdana';  bottom: 0px;  color: white;  left: 0px;  height: 10%;}

<div class="marquee">  <span>Lots of text, written in a long sentence to make it go off the screen. Well I hope it goes off the screen</span></div><br /><div class="fast marquee">  <span>Lots of text, written in a long sentence to make it go off the screen. Well I hope it goes off the screen</span></div>

Change marquee speed with hover (HTML)

Not quite sure why you are using HTML inside a CSS-field, but personally, I would use JavaScript-tags to set the attributes:

<marquee onmouseover="this.setAttribute('scrolldelay', 40)" onmouseout="this.setAttribute('scrolldelay', 30)" truespeed = "true" scrolldelay = "30">Such Doge, Much Wow</marquee>

Edit Some things you say seem quite incorrect (frankly, I don't see how any of that is JavaScript code), just so you are aware of that. So far, you seem to have attempted to mix HTML with CSS, which doesn't really make any sense.

Change pace and direction of marquee

You can create a scrolling marquee (i.e. scrolling text or scrolling images) by using the tag. It can be completely customized. In your you are interested in modifying the direction and pace of scrolling text, which is possible by adding some attributes.

For example, a sample html code:

<marquee behavior="scroll" direction="left" scrollamount="1">Pace-slow</marquee>

Here attribute direction can take values like LEFT,UP,RIGHT etc depending on direction of scroll and scroll amount can control the speed, more the faster.

---

Related Topics