Putting animated text in the background with CSS? - html

Question

I've found other examples of text in the background but not animated. I want it to be positioned like this.
Here's what I'm working with. https://jsfiddle.net/3esj55rb
.marquee {
color: #333;
padding-left: 1.5em;
position: relative;
font: 50px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
width: 450px;
margin: 2em auto
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 25s linear infinite;
}
.marquee:hover {
color: #F65314;
animation-play-state: paused
}
#keyframes marquee {
0% {
text-indent: 27.5em
}
100% {
text-indent: -105em
}
}
/* Make it pretty */
.microsoft {
padding-left: 1.5em;
position: relative;
font: 50px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
/* ::before was :before before ::before was ::before - kthx */
.microsoft:before,
.microsoft::before {
z-index: 2;
content: '';
position: absolute;
top: -1em;
left: -1em;
width: .5em;
height: .5em;
box-shadow: 1.0em 1.25em 0 #F65314, 1.6em 1.25em 0 #7CBB00, 1.0em 1.85em 0 #00A1F1, 1.6em 1.85em 0 #FFBB00;
}
.microsoft:after,
.microsoft::after {
z-index: 1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 2em;
height: 2em;
background-image: linear-gradient(90deg, white 70%, rgba(255, 255, 255, 0));
}
/* Style the links */
.vanity {
color: #333;
text-align: left;
font: 20px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a,
.microsoft a {
color: #1570A6;
transition: color .5s;
text-decoration: none;
}
.vanity a:hover,
.microsoft a:hover {
color: #F65314;
}
.text {
color: #333;
text-align: left;
font: 20px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.topText {
color: #333;
text-align: left;
font: 20px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
margin-top: 70px;
}
<p class="topText">
Boston, city, capital of the commonwealth of Massachusetts,
and seat of Suffolk county, in the northeastern United States.
It lies on Massachusetts Bay, an arm of the Atlantic Ocean.
The city proper has an unusually small area for a major city,
and more than one-fourth of the total—including part of the
Charles River, Boston Harbor, and a portion of the Atlantic—is water.
Area city, 46 square miles (119 square km).
</p>
<p class="marquee"> Visit Boston. This text should be in the background</p>
<p class="text">
The area, the people, and the institutions within its political
boundaries can only begin to define the essence of Boston. Its
nickname “Beantown” has its origin in colonial times, when Boston,
as a stop on a major trade route with the West Indies, had a steady
supply of molasses from the Caribbean, thus leading to the creation
of a popular dish that became known as Boston baked beans (beans
baked in molasses).
</p>
<p class="vanity">
Follow us on twitter
#boston to know more.
</p>
<p class="vanity">
Test test
click here for website or our state's mass.gov
</p>

Answer 1

Added z index and made position relative to the container.
.marquee {
color: #333;
padding-left: 1.5em;
font: 50px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
margin: 2em auto
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 10s linear infinite;
z-index: -1;
position: fixed;
width: 450px;
top: 15%;
}

Answer 2

With the use of CSS you can define #keyframes so that you can create different positions, sizes, angels and properties of an object.
for your reference:
#keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
Here you can find the resources:https://css-tricks.com/css-techniques-and-effects-for-knockout-text/

Answer 3

Short answer
You have to play with position (relative / absolute along with top). Beware of children ordering. Also, when you need to stop the animation when hovering, make sure you are putting the :hover listener to the proper tag.
Long answer
For the sake of playing with position, I came up with a solution. However, this solution requires text duplication.
The idea is as follows:
A container will contain three children
The first child is the first text. It is invisible and its purpose is to fix the container height
The second child is the sliding text. With a position: absolute, it has to vertically align its content via a subcontainer.
The third child is the displayed text with an absolute position as well
I expanded the original text to ensure that my marquee is properly vertically aligned.
Cons
Text is displayed twice
a lot of CSS classes & container but it is always like this, isn't it?
Pros
You can put whatever you want in the .marquee__content, not only a p but also some h2 or h3 or some picture, it should all slide. the .marquee *{...} style ensure that all children do not wrap text
CSS clearer separation: which div is what
Finally the code:
/* ========== Container ========== */
/* cosmetic only */
body {
background-color: #cacaca;
}
.container {
/* Required for playing with positions ! */
position: relative;
/* irrelevant: cosmetic only */
width: 60%;
margin: auto;
background: white;
}
/* ========== Text =============== */
/* define all text size so that height fixer can
have the appropriate height */
.text {
/* to ensure both box__text have same height */
font-size: 20px;
/* cosmetic only */
padding: 1rem;
box-sizing: border-box;
}
/* this hack requires an invisible box__text to set
parent div height */
.text--height-fixer {
visibility: hidden;
}
.text--shown {
position: absolute;
/* move to top of parent */
top: 0;
/* take parent width / height */
width: 100%;
height: 100%;
}
/* ========== Marquee ============ */
.marquee {
position: absolute;
/* move to top of parent */
top: 0;
/* take parent width / height */
width: 100%;
height: 100%;
/* hide x overflow for the slide effect */
overflow-x: hidden;
/* vertically align content. I chose display: flex as
I am lazy but this is not the core of the question */
display: flex;
/* cosmetic only */
padding: 1rem;
box-sizing: border-box;
opacity: 0.6;
}
/* force one line layout for all children, not only <p> */
.marquee * {
/* remove line break */
white-space: nowrap;
/* remove all default margin */
margin: auto;
}
/* to match the provided picture */
.marquee .boston {
color: lightblue;
font-size: 4rem;
font-weight: 800;
transition: color 0.2s;
}
#keyframes marquee {
0% {
margin-left: 100%;
}
100% {
margin-left: -100%;
}
}
.marquee__content {
animation: marquee 10s linear infinite;
}
/* this is the tricky part: the "hover" event should not be listened
on marquee but on the container */
.container:hover .marquee__content {
animation-play-state: paused;
}
.container:hover .marquee .boston {
color: orange;
}
<!-- container to manage all positions. Children order matters !-->
<div class="container">
<!-- relative must be first -->
<div class="text text--height-fixer">
<p>
The area, the people, and the institutions within its political boundaries can only begin to define the essence of Boston. Its nickname “Beantown” has its origin in colonial times, when Boston, as a stop on a major trade route with the West Indies, had
a steady supply of molasses from the Caribbean, thus leading to the creation of a popular dish that became known as Boston baked beans (beans baked in molasses). The area, the people, and the institutions within its political boundaries can only
begin to define the essence of Boston. Its nickname “Beantown” has its origin in colonial times, when Boston, as a stop on a major trade route with the West Indies, had a steady supply of molasses from the Caribbean, thus leading to the creation
of a popular dish that became known as Boston baked beans (beans baked in molasses).
</p>
</div>
<!-- marquee should be declared before text so that it appears below without z-index -->
<div class="marquee">
<div class="marquee__content">
<p class="boston">
Visit Boston. This text should be in the background
</p>
</div>
</div>
<div class="text text--shown">
<p>
The area, the people, and the institutions within its political boundaries can only begin to define the essence of Boston. Its nickname “Beantown” has its origin in colonial times, when Boston, as a stop on a major trade route with the West Indies, had
a steady supply of molasses from the Caribbean, thus leading to the creation of a popular dish that became known as Boston baked beans (beans baked in molasses). The area, the people, and the institutions within its political boundaries can only
begin to define the essence of Boston. Its nickname “Beantown” has its origin in colonial times, when Boston, as a stop on a major trade route with the West Indies, had a steady supply of molasses from the Caribbean, thus leading to the creation
of a popular dish that became known as Boston baked beans (beans baked in molasses).
</p>
</div>
</div>
If anyone has a better solution which allows any marquee content (not limited to a single p), feel free to share!