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.