How to Create a Marquee Effect

.marquee {  background-color: #ddd;  width: 500px;  margin: 0 auto;  overflow: hidden;  white-space: nowrap;}.marquee span {  display: inline-block;  font-size: 20px;  position: relative;  left: 100%;  animation: marquee 8s linear infinite;}.marquee:hover span {  animation-play-state: paused;}
.marquee span:nth-child(1) {  animation-delay: 0s;}.marquee span:nth-child(2) {  animation-delay: 0.8s;}.marquee span:nth-child(3) {  animation-delay: 1.6s;}.marquee span:nth-child(4) {  animation-delay: 2.4s;}.marquee span:nth-child(5) {  animation-delay: 3.2s;}
@keyframes marquee {  0%   { left: 100%; }  100% { left: -100%; }}

<p class="marquee">  <span>this is a</span>  <span>simple marquee</span>  <span>using css</span>  <span>only tech</span>  <span>with a delay</span></p>

How to create a marquee effect for a text of smaller length not exceeding the screen size in Android?

I used simple light weight of ticker like animation which I developed in my early Android days.

below is complete code.

Hope this helps.

Works for all API levels of Android

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.view.Menu;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setticker("Hello", this);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }


    public  void setticker(String text, Context contx) {
        if (text != "") {
            LinearLayout parent_layout = (LinearLayout) ((Activity) contx)
                    .findViewById(R.id.ticker_area);

            TextView view = new TextView(contx);
            view.setText(text);

            view.setTextColor(Color.BLACK);
            view.setTextSize(25.0F);
            Context context = view.getContext(); // gets the context of the view

            // measures the unconstrained size of the view
            // before it is drawn in the layout
            view.measure(View.MeasureSpec.UNSPECIFIED,
                    View.MeasureSpec.UNSPECIFIED);

            // takes the unconstrained width of the view
            float width = view.getMeasuredWidth();
            float height = view.getMeasuredHeight();

            // gets the screen width
            float screenWidth = ((Activity) context).getWindowManager()
                    .getDefaultDisplay().getWidth();

            view.setLayoutParams(new LinearLayout.LayoutParams((int) width,
                    (int) height, 1f));

            System.out.println("width and screenwidth are" + width + "/"
                    + screenWidth + "///" + view.getMeasuredWidth());

            // performs the calculation
            float toXDelta = width - (screenWidth - 0);

            // sets toXDelta to -300 if the text width is smaller that the
            // screen size
            if (toXDelta < 0) {
                toXDelta = 0 - screenWidth;// -300;
            } else {
                toXDelta = 0 - screenWidth - toXDelta;// -300 - toXDelta;
            }
            // Animation parameters
            Animation mAnimation = new TranslateAnimation(screenWidth,
                    toXDelta, 0, 0);
            mAnimation.setDuration(15000);
            mAnimation.setRepeatMode(Animation.RESTART);
            mAnimation.setRepeatCount(Animation.INFINITE);
            view.setAnimation(mAnimation);
            parent_layout.addView(view);
        }
    }


}

in activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:id="@+id/ticker_area"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#9CB1DD"
        android:orientation="horizontal" >
    </LinearLayout>
</RelativeLayout>

How to make marquee text only when it's overflowing?

The easiest way to determine if an element is overflowing is to compare its scroll height/width to its offset height/width. If any of the scroll values are larger than their offset pairs, your element's contents are overflowing.

function isElementOverflowing(element) {
    var overflowX = element.offsetWidth < element.scrollWidth,
        overflowY = element.offsetHeight < element.scrollHeight;

    return (overflowX || overflowY);
}

From here it's a simple question of checking the return value of this function and adding a marquee effect if true. To achieve this, you can wrap your div's contents in a <marquee>, or achieve the same visual effect using the prefixed marquee CSS rules or simulating it via a CSS animation.

NB: while the <marquee> tag still works as expected in most browsers, it is considered deprecated hence not futureproof.

• Here is a quick fiddle on wrapping in a marquee tag, play around with text length to see how it works. (alternatively, you can set the marquee's behavior to alternate from side to side: here's how )
• here is a tutorial on CSS marquee
• and here is a thread on visually simulating a marquee with animations

Good luck!

Related Topics