Develop Reference

Is There A Way To Mimic The <marquee> Tag In Javascript? [duplicate]

Longer time I'm curious about HTML tag <marquee>.
You can find in MDN specification:
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
or on W3C wiki:
No, really. don't use it.
I searched several articles and found some mention about CSS relevant replacement. CSS attributes like:
marquee-play-count
marquee-direction
marquee-speed
but it seems, they don't work. They were a part of specification in year 2008, but they were excluded in year 2014
One way, proposed by W3 Consortium, is using CSS3 animations, but it seems for me much more complicated than easy-to-maintain <marquee>.
There are also plenty of JS alternatives, with lots of source code that you can add to your projects and make them larger.
I'm always reading things as: "don't ever use marquee", "is obsolete". And I don't get why.
So, can anybody explain to me, why is marquee deprecated, why is so "dangerous" using it and what is the easiest substitution?
I found an example, it looks nice. When you use all prefixes needed for good browser support, you have around 20-25 lines of CSS, with 2 values hardcoded (start and stop indent), depending on text length. This solution is not so flexible, and you can't create bottom-to-top effect with this.

I don't think you should move the content but that doesn't answer your question... Take a look at the CSS:
.marquee {
width: 450px;
line-height: 50px;
background-color: red;
color: white;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
Here is the codepen.
Edit:
Here is the bottom to top codepen.

<marquee> was never part of any HTML specification and what you link to is a CSS spec so it's hard to deprecate something that was never included. HTML is about structure of a document, not its presentation. So having a self-animated element as part of HTML does not abide by those goals. Animation is in CSS.

You just have to define class and attached looping animation once in CSS and use it afterwards everywhere you need. But, as many people said - it's a bit annoying practice, and there is a good reason, why this tag is becoming obsolete.
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 5s linear infinite;
-webkit-animation: example1 5s linear infinite;
animation: example1 5s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<div class="example1">
<h3>Scrolling text... </h3>
</div>

I know this was answered a couple years ago, but I found this when inspecting
this. When I inspected, I found this.
#keyframes scroll {
from {
transform: translate(0,0)
}
to {
transform: translate(-300px,0)
}
}
.resultMarquee {
animation: scroll 7s linear 0s infinite;
position: absolute
}

As stated before: the easiest substitution is CSS animation
To all the critics of the marquee:
It is a very useful tool for UI,
I am using it just on hover,
to display more information in a limited space.
The example for the mp3-player is excellent,
even my car-radio is using the effect to show the current song.
So nothing wrong about that, my opinion ...

I have created a jQuery script that will replace the old marquee tag with standard div. The code will also parse the marquee attributes like direction, scrolldelay and scrollamount. Actually the code can skip the jQuery part but I felt too lazy to do so, and the vanilla JS part is actually a solution that I modified from #Stano answere from here
Here is the code:
jQuery(function($) {
if ($('marquee').length == 0) {
return;
}
$('marquee').each(function() {
let direction = $(this).attr('direction');
let scrollamount = $(this).attr('scrollamount');
let scrolldelay = $(this).attr('scrolldelay');
let newMarquee = $('<div class="new-marquee"></div>');
$(newMarquee).html($(this).html());
$(newMarquee).attr('direction', direction);
$(newMarquee).attr('scrollamount', scrollamount);
$(newMarquee).attr('scrolldelay', scrolldelay);
$(newMarquee).css('white-space', 'nowrap');
let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
$(this).replaceWith(wrapper);
});
function start_marquee() {
let marqueeElements = document.getElementsByClassName('new-marquee');
let marqueLen = marqueeElements.length
for (let k = 0; k < marqueLen; k++) {
let space = ' ';
let marqueeEl = marqueeElements[k];
let direction = marqueeEl.getAttribute('direction');
let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
let scrollamount = marqueeEl.getAttribute('scrollamount');
let marqueeText = marqueeEl.innerHTML;
marqueeEl.innerHTML = marqueeText + space;
marqueeEl.style.position = 'absolute';
let width = (marqueeEl.clientWidth + 1);
let i = (direction == 'rigth') ? width : 0;
let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;
marqueeEl.style.position = '';
marqueeEl.innerHTML = marqueeText + space + marqueeText + space;
setInterval(function() {
if (direction.toLowerCase() == 'left') {
i = i < width ? i + step : 1;
marqueeEl.style.marginLeft = -i + 'px';
} else {
i = i > -width ? i - step : width;
marqueeEl.style.marginLeft = -i + 'px';
}
}, scrolldelay);
}
}
start_marquee();
});
.wrap {
width: 50%;
margin: 0 auto;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<marquee direction="left" scrollamount="5" scrolldelay="1"> Timses Jokowi: Apa Urusan Pilpres dengan masuk surga? --- Ma'ruf Amin: Semua orang tahu saya tua, tapi... --- Kata Cak Imin soal pidato Jokowi dan Prabowo yang jadi kontroversi --- 2 tahun ditahan, pendeta AS Andrew Brunson dibebaskan
Turki --- Perkembangan terbaru kasus SPG yang buang bayi dari lantai 3 Mal --- Breaking News --- </marquee>
<marquee direction="rigth" scrollamount="10" scrolldelay="2"> Timses Jokowi: Apa Urusan Pilpres dengan masuk surga? --- Ma'ruf Amin: Semua orang tahu saya tua, tapi... --- Kata Cak Imin soal pidato Jokowi dan Prabowo yang jadi kontroversi --- 2 tahun ditahan, pendeta AS Andrew Brunson dibebaskan
Turki --- Perkembangan terbaru kasus SPG yang buang bayi dari lantai 3 Mal --- Breaking News --- </marquee>
</div>

CSS animation with 'IntersectionObserver' doesn't work (Vanilla JS)

I'm having issues with my InsersectionObserver code: The content of the .timeline-graphs class should be appearing from bellow (#keyframes animation in CSS), but only when the the viewport intersects with it, thanks to InsersectionObserver (JS). Simple enough, but I can't manage it to work. This is the code:
HTML, CSS and JAVASCRIPT:
const elementsToExpand = document.querySelectorAll('.timeline-graphs');
let expansionObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
entry.target.classList.add('isVisible');
} else {
entry.target.classList.remove('isVisible');
}
});
});
elementsToExpand.forEach((element) => {
expansionObserver.observe(element);
});
.timeline-graphs {
display: flex;
flex-flow: row no-wrap;
justify-content: center;
text-align: center;
align-items: center;
}
.timeline-graphs.isVisible {
animation-name: fadeIn;
animation-duration: 2.5s;
animation-fill-mode: both;
}
#keyframes fadeIn {
0% {
opacity: 0;
-webkit-transform: translate3d(0,40%,0);
transform: translate3d(0,40%,0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
}
<section class="timeline-graph-section">
<article class="timeline-graphs">
<h1>This is a title</h1>
</article>
</section>
I appreciate any support on this!

As per your current implementation, the viewport is always intersecting with your timeline-graphs element.
To mimic proper working add a good amount of margin-top to this element and try to bring the timeline-graphs in and out of the view via scroll.

Solved! After seeing the code working everywhere for everybody (including seeing it work in Codepen with my own eyes) but never in my local ropository, I suspected it had to be one of two things: There was an implicit library/framework at work in stackOverflow/CodePen that I wasn't using... or something was up with the HTML code I didn't include in here.
And that was exactly it: I took the script out of the head element and placed it on the last line inside the body element, right before the closing tag. Now the code works! Thank you all for you help with this!

JS/CSS - Moving letters around their original positions on a page

This is my first question on SO, I hope I'm doing it well.
My goal is to have a "magical rune effect", where each letter of a text "floats around" its original position, as if it was suspended in mid-air on a magic parchment of some sort.
To put it simply, it will be used for a game. I know how to make something "float at random" on a page, like a hot air balloon; but this isn't what I'm trying to do : I want the letters to move around their original position.
So far, I've tried something (you can check my fiddle at https://jsfiddle.net/3as4omj2/ ), but I'm running into problems.
(don't worry about the default font and the ugly aqua background, it's used for positionning)
function float(element, range, speed) {
var position = $(element).offset();
$(element).attr( 'original_x', position.left);
$(element).attr( 'original_y', position.top);
$(element).attr( 'range', range );
$(element).attr( 'speed', speed );
drift(element);
}
function drift(element) {
var max = Number.parseInt($(element).attr('range'));
var speed = Number.parseInt($(element).attr('speed'));
var pos_x = Number.parseInt($(element).attr('original_x'));
var pos_y = Number.parseInt($(element).attr('original_y'));
var drift_x = max/2 - Math.floor(Math.random()*max);
var drift_y = max/2 - Math.floor(Math.random()*max);
var final_x = pos_x + drift_x;
var final_y = pos_y + drift_y;
var total_wait = Math.sqrt(drift_x*drift_x+drift_y*drift_y)*speed;
$(element).animate({
left : final_x+"px",
top : final_y+"px"
}, total_wait, /*"linear",*/ function(){
setTimeout(function () {
drift(element);
}, Math.abs(total_wait-Math.floor(Math.random()*150)));
});
}
$( "#go" ).click(function() {
float($("#t"),50, 10);
float($("#e"),50, 10);
float($("#s"),50, 10);
float($("#s"),50, 10);
float($("#t2"),50, 10);
})
Here's my problems and questions so far :
I can't line up my letters to form a word (like, "TEST" is seen vertically, I'd love to see it as an horizontal "TEST"); ideally, using spans, so I can dynamically add a word or remove it without creating dozens of elements.
The text moves bananas... and I don't seem to be understanding why. :(
I'd love to be able to "move the original position" along, so that I can animate the letters further (moving the general text left to right, for example).
Ultimately, is there a way to optimize the size of the font to the user's display ?
Can you guys give me some advice ?
Thank you in advance.

You could try using CSS3 animation instead, setting custom animation delay for every letter using :nth-of-type() selector. To better understand all the animation properties, see this docs. All the rest is the matter of tweaking translate values.
If you are determined enough, creating custom #keyframes for each letter is also an option.
.runes span {
position: relative;
display: inline-block;
padding: 10px;
background: aqua;
animation-duration: 2s;
animation-name: float;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.runes span:nth-of-type(1) {
animation-delay: .3s;
}
.runes span:nth-of-type(2) {
animation-delay: .4s;
}
.runes span:nth-of-type(3) {
animation-delay: .5s;
}
.runes span:nth-of-type(4) {
animation-delay: .7s;
}
#keyframes float {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(8px, 0);
}
50% {
transform: translate(0, 8px);
}
75% {
transform: translate(5px, 5px);
}
}
<section class="runes">
<span>T</span>
<span>E</span>
<span>S</span>
<span>T</span>
</section>

Random animation on Simple Image Slideshow

I want to apply a random animation on my slideshow image. First, I tried adding an animation such as scale but it didn't work as I wanted it to.
Things I want to fix:
Smoothness on fadein
Random animation (can be anything at this point, I just want to see how it's done)
Fiddle: http://jsfiddle.net/jzhang172/e7cLtsg9/1/
$(function() {
$('img').hide();
function anim() {
$("#wrap img").first().appendTo('#wrap').fadeOut(3500).addClass('transition').addClass('scaleme');
$("#wrap img").first().fadeIn(3500).removeClass('scaleme');
setTimeout(anim, 3700);
}
anim();
});
body,
html {
margin: 0;
padding: 0;
background: black;
}
#wrap img {
position: absolute;
top: 0;
display: none;
width: 100%;
height: 100%;
}
.transition {
transition: 10s;
}
.scaleme {
transition: 10s;
transform: scale(1.3);
}
.box {
height: 300px;
width: 500px;
position: relative;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div id="wrap">
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-3.jpg" />
</div>
</div>

Here is a sample using CSS animations and jQuery (for achieving the randomness of animations). If you don't wish to use CSS animations and want to stick to transitions + jQuery effects (like fadeIn), you can still adapt this code to support it because the base idea will still remain the same. I am not too comfortable with jQuery effects and have hence stuck to using CSS animations.
Below is an overview of how it is being done (refer inline comments for more details):
Inside a wrapper there are a group of images that are part of the slide-show (like in your demo).
Using CSS #keyframes, a list of animations (one of which would be used randomly) is created in addition to the default fade-in-out animation. This list is also maintained in an array variable (in JS for picking up a random one from the list).
On load, the default fade-in-out animation and one random animation is added to the 1st element.
An animationend event handler is added to all of the images. This event handler will be triggered when the animation on an element ends. When this is triggered, animation on the current element is removed and the default fade-in-out + a random animation is added to the next element.
The animations are added using inline styles because if we add multiple CSS classes each with one different animation, then the animation in the latest class will override the others (that is, they will not happen together).
A loop effect is achieved by checking if the current element has any other img sibling elements. If there are none, the animation is added back to the 1st element.
$(window).load(function() {
$img = $('img'); // the images
var anim = ['zoom', 'shrink', 'move-down-up', 'move-right-left']; // the list of random animations
var rand = Math.floor(Math.random() * 4) + 1; // random number
$img.each(function() { // attach event handler for each image
$(this).on('animationend', function(e) { // when animation on one image has ended
if (e.originalEvent.animationName == 'fade-in-out') { // check the animation's name
rand = Math.floor(Math.random() * 4) + 1; // get a random number
$(this).css('animation-name', 'none'); // remove animation on current element
if ($(this).next('img').length > 0) // if there is a next sibling
$(this).next('img').css('animation-name', 'fade-in-out, ' + anim[rand - 1]); // add animation on next sibling
else
$img.eq(0).css('animation-name', 'fade-in-out, ' + anim[rand - 1]); // else add animation on first image (loop)
}
});
});
$img.eq(0).css('animation-name', 'fade-in-out, ' + anim[rand - 1]); //add animation to 1st element on load
})
#wrapper {
height: 250px;
width: 300px;
position: relative;
}
img {
position: absolute;
z-index: 1;
bottom: 20px;
left: 10px;
opacity: 0;
transform-origin: left top; /* to be on the safe side */
animation-duration: 3s; /* increase only if you want duration to be longer */
animation-fill-mode: backwards; /* fill mode - better to not change */
animation-iteration-count: 1; /* no. of iterations - don't change */
animation-timing-function: ease; /* better to leave as-is but can be changed */
}
#keyframes fade-in-out {
0%, 100% {
opacity: 0;
}
33.33%, 66.66% { /* duration is 3s, so fade-in at 1s, stay till 2s, fade-out from 2s */
opacity: 1;
}
}
#keyframes zoom {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
}
#keyframes shrink {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(.5);
}
}
#keyframes move-down-up {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(50px);
}
}
#keyframes move-right-left {
0%, 100% {
transform: translateX(0px);
}
50% {
transform: translateX(50px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<img src="https://placehold.it/200/000000/ffffff" />
<img src="https://placehold.it/200/ff0000/ffffff" />
<img src="https://placehold.it/200/00ff00/ffffff" />
<img src="https://placehold.it/200/0000ff/ffffff" />
</div>

Flip / Rotate text upside down, in both X and Y

Id like to easy flip a text upside down, like this page is doing: http://papertiger.com/
I want to do this as easy as possible, using
-webkit-transition: 0s;
-webkit-transform rotateX(180deg)
This is my code:
HTML:
<script>
$(document).ready(function() {
Js.init();
});
</script>
<body>
<div id="flipbox">
<p id="text">Front</p>
</div>
</body>
JAVASCRIPT:
var Js = {
init: function() {
var up=true;
//do this every 5 seconds
var i = window.setInterval( function(){
up=!up;
Js.rotate(up);
//this will run just once after the timeout
var j = window.setTimeout( function(){
//Js.switchText(up);
}, 1000 );
}, 5000 );
},
rotate: function(up){
if(up){
$("#flipbox").removeClass('rotateDown');
$("#flipbox").addClass('rotateUp');
}else{
$("#flibox").removeClass('rotateUp');
$("#flipbox").addClass('rotateDown');
}
},
switchText: function(up) {
if(up){
$("#text").text('front');
}else{
$("#text").text('back');
}
}
}
CSS:
#flipbox{
color: green;
display: block;
font-size: 70px;
perspective: 800px;
perspective-origin: 50% 100px;
}
.rotateDown{
transition: 2s;
-webkit-transform: rotateX(180deg);
}
.rotateUp{
transition: 2s;
-webkit-transform: rotateX(0deg);
}
.upSideDown{
-webkit-transition: 0s;
-webkit-transform: rotate(180deg);
}
As it is now, I get the text "First" to rotate as I want to. To switch the text and rotate it in Y 180 degrees (to make it readable, since its now upside down), does not work, and is why the line is commented.
So, I think I need to have the text rotated by both X and Y 180 degress, how do I do that? rotate3d(1,1,0,180deg) does not work like that. If I write rotateX followed by rotateY, the first one gets overwritten.
...or is the jQuery plugin flippy somthing I should look for?
Ive tried to make a jsfiddle. It did not work, but can be found here: http://jsfiddle.net/EdNVw/
Thanks in advace for any advice!