Create a Scrolling Text Effect

Resources and discussions about HTML, CSS, JavaScript, and frameworks for building user interfaces.
Post Reply
User avatar
paypal56_ab6mk6y7
Site Admin
Posts: 74
Joined: Sat Oct 26, 2024 3:05 pm

Create a Scrolling Text Effect

Post by paypal56_ab6mk6y7 »

#### **Objective:**

Create, using HTML, CSS, and optionally JavaScript, a horizontal scrolling text effect on a webpage.

---
### **Requirements:

1. Create a web page with the title **"My Scrolling Text"**.
2. On that page, the text **"This text scrolls smoothly to the left without stopping"** must appear and constantly move to the left.
3. The following technologies should be used:
- **HTML** for the page structure.
- **CSS** for styling and animations.
- **JavaScript** for additional interactivity (optional).

---

### **Specifications:**

1. The text is to smoothly scroll and should repeat when it goes out of view.
2. The page should be responsive, with the text displaying on screens of all sizes appropriately.
3. Use semantic HTML elements, such as `header`, `main`, and `footer`, if needed.
4. Libraries, including jQuery and GSAP are **allowed** but try implementing from scratch.

---

### **Bonus Tasks:**
1. Make the text pause if the mouse is hovered on the text.
2. Do multiple lines of scrolling texts with different scrolling speeds each.

---

### **Example Solution:**

```html

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Scrolling Text</title>
  <style>
body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background-color: #f0f0f0;
overflow: hidden;
    }
  .scroll-container {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
    }
  .scroll-text {
      display: inline-block;
      font-size: 24px;
color: #333;
      animation: scroll-left 10s linear infinite;
    }
    @keyframes scroll-left {
      from {
        transform: translateX(100%);
      }
      to {
        transform: translateX(-100%;
}
}
  .scroll-text:hover {
     animation-play-state: paused;
   }
 </style>
</head>
<body>
  <div class="scroll-container">
    <div class="scroll-text">This text moves smoothly to the left without pause</div>
  </div>
</body>
</html>
```

---
Expected Output:
1. Save the above code with the name index.html.
2. Open the file in a browser. You should see the text smoothly scrolling from right to left.
3. Hover over the text, and the animation pauses.
User avatar
paypal56_ab6mk6y7
Site Admin
Posts: 74
Joined: Sat Oct 26, 2024 3:05 pm

Re: Create a Scrolling Text Effect

Post by paypal56_ab6mk6y7 »

There are several ways to make text scroll across a webpage depending on the device or technology at play. Here are a few:

---

### **1. HTML and CSS**
- **Marquee Tag (Deprecated)**:
```html

Code: Select all

 <marquee>Scrolling Text</marquee>
```
*Note*: The `<marquee>` tag is deprecated and not recommended.
- **CSS Animation**:
```html

Code: Select all

 <div class="scroll-text">Scrolling Text</div>

 <style>
.scroll-text {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      position: relative;
    }
  .scroll-text::after {
      content: "";
      display: block;
    }
  .scroll-text span {
display: inline-block;
      animation: scroll 10s linear infinite;
    }
    @keyframes scroll {
      from { transform: translateX(100%); }
      to { transform: translateX(-100%); }
    }
  </style>
```

---

### **2. JavaScript**
- **Using DOM Manipulation**:
```html

Code: Select all

<div id="scrolling-text">Scrolling Text</div>

  <script>
    const scrollingText = document.getElementById("scrolling-text");
    let x = 0;
    function scrollText() {
      x -= 1;
      scrollingText.style.transform = `translateX(${x}px)`;
      if (Math.abs(x) > scrollingText.offsetWidth) x = window.innerWidth;
      requestAnimationFrame(scrollText);
    }
    scrollText();
</script>
```
---
### **3. jQuery (Library)
```html

Code: Select all

  <div class="scrolling-text">Scrolling Text</div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function () {
      $(".scrolling-text").animate({ left: "-100%" }, 10000, "linear");
    });
  </script>
```
---
### **4. Canvas (HTML5)
- For advanced and customizable scrolling text effects.
```html

Code: Select all

<canvas id="textCanvas" width="400" height="100"></canvas>

  <script>
    const canvas = document.getElementById("textCanvas");
    const ctx = canvas.getContext("2d");
    let x = canvas.width;

    function drawScrollingText() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.font = "20px Arial";
      ctx.fillText("Scrolling Text", x, 50);
x -= 2;
      if (x < -200) x = canvas.width;
      requestAnimationFrame(drawScrollingText);
    }
    drawScrollingText();
  </script>
```
---
### **5. Web Libraries/Frameworks**
- **GSAP (GreenSock Animation Platform)**:
```javascript

Code: Select all

  gsap.to(".scrolling-text", {
    x: -1000,
    duration: 5,
repeat: -1,
    ease: "linear",
  });
```

---

### **6. Desktop Applications**
- **PowerPoint**: Use animation effects for scrolling text.
- **Video Editing Software**: Tools like Adobe Premiere Pro or After Effects allow creating scrolling text.

---

### **7. Command-Line/CLI Tools**
- **In Linux/Terminal**: Using shell scripting to display scrolling text.
```bash

Code: Select all

echo "Scrolling Text" | pv -qL 10
```

---

### **8. Programming Languages**
- **Python with Tkinter**:
```python

Code: Select all

  import tkinter as tk

  root = tk.Tk()
  canvas = tk.Canvas(root, width=400, height=100)
  canvas.pack()

  text = canvas.create_text(200, 50, text="Scrolling Text", font=("Arial", 20))
  def scroll():
      canvas.move(text, -1, 0)
      if canvas.coords(text)[0] < -50:
canvas.coords(text, 450, 50)
      root.after(10, scroll)

  scroll()
  root.mainloop()
```

Pick whichever one works better for your platform and use case!
Post Reply