Develop Reference

Trouble making Marquee text continous in HTML

I'm trying to make my marquee text continuous, but can't figure out how too. This is what I've right now in my HTML:
.marquee2 {
position: relative;
overflow: hidden;
--offset: 20vw;
--move-initial: calc(-20% + var(--offset));
--move-final: calc(-40% + var(--offset));
}
.marquee__inner2 {
width: fit-content;
display: flex;
position: relative;
transform: translate3d(var(--move-initial), 0, 0);
animation: marquee 12s linear infinite;
animation-play-state: play;
color: #1a1a1a;
font-family: 'Noctis Bold';
}
.marquee2 span {
font-size: 5vh;
padding: 0 2vw;
}
.marquee2:hover .marquee__inner2 {
animation-play-state: paused;
}
#keyframes marquee2 {
0% {
transform: translate3d(var(--move-initial), 0, 0);
}
100% {
transform: translate3d(var(--move-final), 0, 0);
}
}
<div class="bg33">
<div class="marquee2" id="showScroll2">
<div class="marquee__inner2" aria-hidden="true">
<span>HTML</span>
<span>CSS</span>
<span>SASS</span>
<span>JAVASCRIPT</span>
<span>JQUERY</span>
<span>VUE.JS</span>
<span>PYTHON</span>
<span>JAVA</span>
<span>REACT</span>
<span>GIT</span>
<span>NPM</span>
<span>RSTUDIO</span>
<span>JIRA</span>
<span>AGILE</span>
<span>FIGMA</span>
<span>PS</span>
<span>ILLUSTRATOR</span>
<span>BALSAMIQ</span>
</div>
</div>
</div>
The text doesn't seem to be continuous and it break and starts off again, which is annoying and doesn't show all the text. I want this text to loop over to see appears continuous and full for viewing by the audience. Can anyone help me with this?

A simple way of doing this - if you know the text will at least cover the viewport width - is to have a second copy. Then you animate by moving the whole thing left by half its width and starting again.
Here's the altered snippet, note you don't need initial setup conditions to center anything.
.marquee2 {
position: relative;
overflow: hidden;
--offset: 20vw;
--move-initial: calc(-20% + var(--offset));
--move-final: calc(-40% + var(--offset));
}
.marquee__inner2 {
width: fit-content;
display: flex;
position: relative;
transform: translate3d(0, 0, 0);
animation: marquee2 12s linear infinite;
animation-play-state: play;
color: #1a1a1a;
font-family: 'Noctis Bold';
}
.marquee2 span {
font-size: 5vh;
padding: 0 2vw;
}
.marquee2:hover .marquee__inner2 {
animation-play-state: paused;
}
#keyframes marquee2 {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0);
}
<div class="bg33">
<div class="marquee2" id="showScroll2">
<div class="marquee__inner2" aria-hidden="true">
<span>HTML</span>
<span>CSS</span>
<span>SASS</span>
<span>JAVASCRIPT</span>
<span>JQUERY</span>
<span>VUE.JS</span>
<span>PYTHON</span>
<span>JAVA</span>
<span>REACT</span>
<span>GIT</span>
<span>NPM</span>
<span>RSTUDIO</span>
<span>JIRA</span>
<span>AGILE</span>
<span>FIGMA</span>
<span>PS</span>
<span>ILLUSTRATOR</span>
<span>BALSAMIQ</span>
<span>HTML</span>
<span>CSS</span>
<span>SASS</span>
<span>JAVASCRIPT</span>
<span>JQUERY</span>
<span>VUE.JS</span>
<span>PYTHON</span>
<span>JAVA</span>
<span>REACT</span>
<span>GIT</span>
<span>NPM</span>
<span>RSTUDIO</span>
<span>JIRA</span>
<span>AGILE</span>
<span>FIGMA</span>
<span>PS</span>
<span>ILLUSTRATOR</span>
<span>BALSAMIQ</span>
</div>
</div>
</div>

Scrolling Text in Chrome Disappears after some time

I created a marquee-like effect on the top of this page. The text is coded to continuously scroll horizontally. The text should continuously scroll with no gaps. It's working in Safari and Firefox, but for some reason in Chrome, after a few seconds, it just cuts off. The weird thing is, if I highlight the area where I know the text is, it reappears. Do you all know why this is happening? Any insight/help would be appreciated as I am a student learning how to code! I've attached screenshots, of how it first looks when the text disappears, and the other screenshot shows it reappearing after I highlight the area.
Screenshot of Text Disappearing
Screenshot of me Highlighting the area of the scrollable text, makes the text visible again on the page
I am using MacOS Catalina Version 10.15.7 and my Chrome version is Version 87.0.4280.88 (Official Build) (x86_64). I showed this code to a friend as well, and they experienced the same issue in Chrome.
UPDATE: Looks like this issue is related to overflow:hidden
Below is my html
<section class="intro section section-pad bg-cover" id="intro">
<div class="copy container">
<div class="marquee">
<!-- Here we add the title in multiple repeating times using javascript -->
<span>Event -- January 1-2, 2020, Zoom</span>
</div>
</section>
Here is the CSS:
.section {
/*each section will take 100% of the height of browser */
min-height: 100vh;
/* Will help to vertically align container box */
display: flex;
position: relative;
}
/* Provide padding to left and right of section */
.section-pad {
padding-left: 5vw;
padding-right: 5vw;
}
.container {
/* Take the width of widest content box */
max-width: 780px;
/* Center our box horizontally and vertically using flex on .section */
margin: auto;
}
.marquee {
position: absolute;
top: 3vh;
left: 0;
width: 100%;
/*Each letter will be 5% of viewport width */
font-size: 5vw;
/* As tall as text */
line-height: 1;
text-transform: uppercase;
/*no scrollbars */
overflow: hidden;
}
.marquee span {
transform: translate3d(0, 0, 0);
-webkit-animation-name: moveLeft;
animation-name: moveLeft;
-webkit-animation-duration: 500s;
animation-duration: 500s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
/*This will ensure the text stays all on the same line */
white-space: nowrap;
/* Our span is inline by default, so change it to block */
display: block;
/*Help with animation */
position: relative;
}
#keyframes moveLeft {
0% {
/* transform: translate(0);*/
-webkit-transform: translatex(0);
transform: translatex(0);
}
100% {
/* transform: translateX(-3000vw); */
-webkit-transform: translatex(-3000vw);
transform: translatex(-3000vw);
}
}
#-webkit-keyframes moveLeft {
0% {
/* transform: translate(0);*/
-webkit-transform: translatex(0);
transform: translatex(0);
}
100% {
/* transform: translateX(-3000vw); */
-webkit-transform: translatex(-3000vw);
transform: translatex(-3000vw);
}
}
And Finally here is the Javascript used
function makeMarquee () {
const title ='Event -- January 1-2, 2021, Zoom'
//use Array constructor to create an empty list with a length of 50 that is filled with the title.
//We can join all the contents of array using dash
const marqueeText = new Array(500).fill(title).join(' -- ')
//query Selector same as $ jquery, grab the span tags
const marquee = document.querySelector('.marquee span')
//set the text of span to be the marqueeText
marquee.innerHTML = marqueeText
}
makeMarquee()
Below is a Snippet as well
function makeMarquee () {
const title ='Event -- January 1-2, 2021, Zoom'
//use Array constructor to create an empty list with a length of 50 that is filled with the title.
//We can join all the contents of array using dash
const marqueeText = new Array(500).fill(title).join(' -- ')
//query Selector same as $ jquery, grab the span tags
const marquee = document.querySelector('.marquee span')
//set the text of span to be the marqueeText
marquee.innerHTML = marqueeText
}
makeMarquee()
.section {
/*each section will take 100% of the height of browser */
min-height: 100vh;
/* Will help to vertically align container box */
display: flex;
position: relative;
}
/* Provide padding to left and right of section */
.section-pad {
padding-left: 5vw;
padding-right: 5vw;
}
.container {
/* Take the width of widest content box */
max-width: 780px;
/* Center our box horizontally and vertically using flex on .section */
margin: auto;
}
.marquee {
position: absolute;
top: 3vh;
left: 0;
width: 100%;
/*Each letter will be 5% of viewport width */
font-size: 5vw;
/* As tall as text */
line-height: 1;
text-transform: uppercase;
/*no scrollbars */
overflow: hidden;
}
.marquee span {
transform: translate3d(0, 0, 0);
-webkit-animation-name: moveLeft;
animation-name: moveLeft;
-webkit-animation-duration: 500s;
animation-duration: 500s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
/*This will ensure the text stays all on the same line */
white-space: nowrap;
/* Our span is inline by default, so change it to block */
display: block;
/*Help with animation */
position: relative;
}
#keyframes moveLeft {
0% {
/* transform: translate(0);*/
-webkit-transform: translatex(0);
transform: translatex(0);
}
100% {
/* transform: translateX(-3000vw); */
-webkit-transform: translatex(-3000vw);
transform: translatex(-3000vw);
}
}
#-webkit-keyframes moveLeft {
0% {
/* transform: translate(0);*/
-webkit-transform: translatex(0);
transform: translatex(0);
}
100% {
/* transform: translateX(-3000vw); */
-webkit-transform: translatex(-3000vw);
transform: translatex(-3000vw);
}
}
<section class="intro section section-pad bg-cover" id="intro">
<div class="copy container">
<div class="marquee">
<!-- Here we add the title in multiple repeating times using javascript -->
<span>Event -- January 1-2, 2020, Zoom</span>
</div>
</div>
</section>

The gap in Chrome (and Edge) is caused by setting overflow: hidden on the marquee. The browsers seem to sense that they have shown enough (I am not sure what enough means in this context as the max-width is set quite low at 768px) and that they must not show the overflow but they carry on with the animation so after 50 seconds it starts again from the beginning.
Why the other browsers (Firefox, Safari) don't honor the overflow I have not been able to discover.
If you change the .marquee to have overflow: visible then all these browsers will continue the animation with no gaps.
UPDATE: in addition section is given overflow: hidden and the timing and distance travelled has been altered to prevent an x-overflow bar showing.
function makeMarquee () {
const title ='Event -- January 1-2, 2021, Zoom'
//use Array constructor to create an empty list with a length of 50 that is filled with the title.
//We can join all the contents of array using dash
const marqueeText = new Array(500).fill(title).join(' -- ')
//query Selector same as $ jquery, grab the span tags
const marquee = document.querySelector('.marquee span');
//set the text of span to be the marqueeText
marquee.innerHTML = marqueeText
// setTimeout(function () {marquee.style.animationName = 'moveLeft';},1000);
}
makeMarquee()
.section {
/*each section will take 100% of the height of browser */
min-height: 100vh;
/* Will help to vertically align container box */
display: flex;
position: relative;
overflow: hidden; /* added to prevent 'gap' appearing on Chrome/Edge */
}
/* Provide padding to left and right of section */
.section-pad {
padding-left: 5vw;
padding-right: 5vw;
}
.container {
/* Take the width of widest content box */
max-width: 780px;
/* Center our box horizontally and vertically using flex on .section */
margin: auto;
}
.marquee {
position: absolute;
top: 3vh;
left: 0;
width: 100%;
/*Each letter will be 5% of viewport width */
font-size: 5vw;
/* As tall as text */
line-height: 1;
text-transform: uppercase;
/*no scrollbars */
/* but - make visible otherwise Chrome/Edge stop showing overflowed bits so get a gap */
overflow: visible; /* was hidden not visible */
}
.marquee span {
transform: translate3d(0, 0, 0);
animation-name: moveLeft;
animation-duration: 550s; /* altered from 50s as have longer for the text to travel now */
animation-timing-function: linear;
animation-iteration-count: infinite;
/*This will ensure the text stays all on the same line */
white-space: nowrap;
/* Our span is inline by default, so change it to block */
display: block;
/*Help with animation */
position: relative;
width: 4000vw; /* this is a bit hacky but does the trick - fools Chrome etc into thinking overflow is OK */
}
#keyframes moveLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);/* was 3000vw */
}
}
<section class="intro section section-pad bg-cover" id="intro">
<div class="copy container">
<div class="marquee">
<!-- Here we add the title in multiple repeating times using javascript -->
<span>Event -- January 1-2, 2020, Zoom</span>
</div>
</div>
</section>

Running text marquee using jquery animate [duplicate]

I'm creating a marquee effect with CSS3 animation.
#caption {
position: fixed;
bottom: 0;
left: 0;
font-size: 20px;
line-height: 30px;
height:30px;
width: 100%;
white-space: nowrap;
-moz-animation: caption 50s linear 0s infinite;
-webkit-animation: caption 50s linear 0s infinite;
}
#-moz-keyframes caption {
0% { margin-left:120%; } 100% { margin-left:-4200px; }
}
#-webkit-keyframes caption {
0% { margin-left:120%; } 100% { margin-left:-4200px; }
}
<div id="caption">
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.
</div>
Now I can get the basic marquee effect, but the code is too specific for this demo.
Is there a way to avoid using specific values like margin-left:-4200px;, so that it can adapt text in any length?
Here is a similar demo: http://jsfiddle.net/jonathansampson/XxUXD/ that uses text-indent but still with specific values.

With a small change of the markup, here's my approach (I've just inserted a span inside the paragraph):
.marquee {
width: 450px;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
}
.marquee span {
display: inline-block;
width: max-content;
padding-left: 100%;
/* show the marquee just outside the paragraph */
will-change: transform;
animation: marquee 15s linear infinite;
}
.marquee span:hover {
animation-play-state: paused
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
/* Respect user preferences about animations */
#media (prefers-reduced-motion: reduce) {
.marquee span {
animation-iteration-count: 1;
animation-duration: 0.01;
/* instead of animation: none, so an animationend event is
* still available, if previously attached.
*/
width: auto;
padding-left: 0;
}
}
<p class="marquee">
<span>
When I had journeyed half of our life's way, I found myself
within a shadowed forest, for I had lost the path that
does not stray. – (Dante Alighieri, <i>Divine Comedy</i>.
1265-1321)
</span>
</p>
No hardcoded values — dependent on paragraph width — have been inserted.
The animation applies the CSS3 transform property (use prefixes where needed) so it performs well.
If you need to insert a delay just once at the beginning then also set an animation-delay. If you need instead to insert a small delay at every loop then try to play with an higher padding-left (e.g. 150%)

Based on the previous reply, mainly #fcalderan, this marquee scrolls when hovered, with the advantage that the animation scrolls completely even if the text is shorter than the space within it scrolls, also any text length takes the same amount of time (this may be a pros or a cons) when not hovered the text return in the initial position.
No hardcoded value other than the scroll time, best suited for small scroll spaces
.marquee {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
display: inline-flex;
}
.marquee span {
display: flex;
flex-basis: 100%;
animation: marquee-reset;
animation-play-state: paused;
}
.marquee:hover> span {
animation: marquee 2s linear infinite;
animation-play-state: running;
}
#keyframes marquee {
0% {
transform: translate(0%, 0);
}
50% {
transform: translate(-100%, 0);
}
50.001% {
transform: translate(100%, 0);
}
100% {
transform: translate(0%, 0);
}
}
#keyframes marquee-reset {
0% {
transform: translate(0%, 0);
}
}
<span class="marquee">
<span>This is the marquee text (hover the mouse here)</span>
</span>

The accepted answers animation does not work on Safari, I've updated it using translate instead of padding-left which makes for a smoother, bulletproof animation.
Also, the accepted answers demo fiddle has a lot of unnecessary styles.
So I created a simple version if you just want to cut and paste the useful code and not spend 5 mins clearing through the demo.
http://jsfiddle.net/e8ws12pt/
.marquee {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
padding: 0;
height: 16px;
display: block;
}
.marquee span {
display: inline-block;
text-indent: 0;
overflow: hidden;
-webkit-transition: 15s;
transition: 15s;
-webkit-animation: marquee 15s linear infinite;
animation: marquee 15s linear infinite;
}
#keyframes marquee {
0% { transform: translate(100%, 0); -webkit-transform: translateX(100%); }
100% { transform: translate(-100%, 0); -webkit-transform: translateX(-100%); }
}
<p class="marquee"><span>Simple CSS Marquee - Lorem ipsum dolor amet tattooed squid microdosing taiyaki cardigan polaroid single-origin coffee iPhone. Edison bulb blue bottle neutra shabby chic. Kitsch affogato you probably haven't heard of them, keytar forage plaid occupy pitchfork. Enamel pin crucifix tilde fingerstache, lomo unicorn chartreuse plaid XOXO yr VHS shabby chic meggings pinterest kickstarter.</span></p>

The following should do what you want.
#keyframes marquee {
from { text-indent: 100% }
to { text-indent: -100% }
}

How to animate with relative transforms in css?

I have two boxes:
<div class='item' style='transform:translateY(100px)'>
</div>
<div class='item' style='transform:translateY(300px)'>
</div>
They both use the same class:
.item {
position:absolute;
background:red;
animation:float 3s ease-in-out infinite;
width:100px;
height:100px;
}
The animation looks like:
#keyframes float {
from, to { transform: translateY(-10px); }
50% { transform: translateY(10px); }
}
But this makes both boxes go between -10 and 10px. What I'd like is for it to be relative to the current value of the box.
So box1 at y:100px would animate from 90px to 110px
and box2 at y:300px would animate from 290px to 310px
Is it possible to do this in css? I'd rather not have a specific animation per box. Because I may have hundred of boxes.
jsfiddle:
https://jsfiddle.net/foreyez/1n1en8uk/
This shows that at the point of animation, both boxes are at the same place... but if it were relative animation they would just be floating up and down in their current place.
Note: please don't use top/left to get relative position I'm looking specifically for relative TRANSFORMS. (if you must know why I'm doing this in 3d for the z axis as x,y are already used).

You can set position of .item elements to relative; use :nth-of-type() pseudo selector to set the top property of each element to the initial position where element should be animated from between the 20px range in relation to its .item sibling.
.item {
position: relative;
background: red;
animation: float 3s infinite ease-in-out;
width: 100px;
height: 100px;
}
.item:nth-of-type(1) {
top: 100px;
}
.item:nth-of-type(2) {
top: 300px;
}
#keyframes float {
from, to {
transform: translateY(-10px);
}
50% {
transform: translateY(10px);
}
}
<div class="item">
</div>
<div class="item">
</div>
jsfiddle https://jsfiddle.net/1n1en8uk/3/

Here's a nasty javascript solution (yes, I'm looking for a CSS solution that's why I won't mark this as the answer) that injects a dynamic keyframe to the page:
As long as there are less than 100 boxes should work alright I guess.
https://jsfiddle.net/foreyez/6v7n4ro3/
function getTranslateY(obj)
{
var transformMatrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
var matrix = transformMatrix.replace(/[^0-9\-.,]/g, '').split(',');
var x = matrix[12] || matrix[4];//translate x
var y = matrix[13] || matrix[5];//translate y
return parseInt(y);
}
function insertAnimation(idx, yy)
{
var style1 = document.documentElement.appendChild(document.createElement("style")),
rule1 = "#keyframes float" + idx + " {\
from, to { transform: translateY("+ (yy-10) +"px); }\
50% { transform: translateY(" + (yy+10) + "px); }\
}";
style1.sheet.insertRule(rule1, 0);
}
$(".item").each(function(idx) {
var currentTranslateY = getTranslateY($(this));
insertAnimation(idx, currentTranslateY);
$(this).css('animation','float' + idx + ' 3s ease-in-out infinite');
});

Note: please don't use top/left to get relative position I'm looking
specifically for relative TRANSFORMS.
You can adjust html to single .item element as child of a container element with transform set to translateY(100px), position set to absolute; utilize css :after pseudo element at .item element with transform set to translateY(200px)
.float {
transform: translateY(100px);
position: absolute;
}
.item {
animation: float 3s infinite ease-in-out;
}
.item, .item:after {
display: block;
position: relative;
background: red;
width: 100px;
height: 100px;
}
.item:after {
content: "";
transform: translateY(200px);
}
#keyframes float {
from, to {
transform: translateY(-10px);
}
50% {
transform: translateY(10px);
}
}
<div class="float">
<div class="item">
</div>
</div>
jsfiddle https://jsfiddle.net/1n1en8uk/5/

how to get flip with css3 and change the element?

my context
HTML
<div class="cart">
<div class="black"></div>
</div>
JS
var whiteEl="<div class="white"></div>";
//I would like to replace black with white, flip animation.
$(".cart").empty().append(whiteEl);
whiteEl.addClass("flipanim");
css
#-webkit-keyframes flip{
from{
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(180deg);
}
}
/*
similar cross browser code*/
.flipanim{
-webkit-animation: flip 1s 1;
-moz-animation:flip 1s 1;
-o-animation:flip 1s 1;
animation:flip 1s 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
I am using key frame animation for show transform animation.
and in javascript adding class to attached element.
my animation not working.
How can I add the new element with flip animation to ".cart"?

try this
$(".cart").html('').append(whiteEl);
//since you have already appended the created div here.. you can use class selctor.
$('.white').addClass("flipanim");

You don't need to remove any content for that and also don't need Javascript for it:
html-markup:
<div class="container">
<div class="cart">
<div class="black">Black side</div>
<div class="white">White side</div>
</div>
</div>
css:
.cart div {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
}
.cart .black {
background:#111;
color:white;
}
.cart .white {
-webkit-transform: rotateY(180deg);
color: black;
background: #eee;
}
Now you can apply your effects simply with:
.container:hover .cart {
-webkit-transform: rotateY(180deg);
}
See the Demo