Mixed Content
Description
Watch a horizontal scroller including texts, images, gifs, ASCII emoticons, links and even videos.
Javascript Example
Below is the equivalent javascript code using the pure vanilla js version of SuperScroll.
// Free video from https://pixabay.com/de/videos/neon-terrain-retro-abstrakt-welt-21368/
let content = "ASCII Emoticons: ❤️😅😉😜😍✌️ - ";
content += "GIFs: <img src=\"/assets/demo/anim-globe.gif\" width=\"106px\" height=\"80px\" /> - ";
content += "Images: <div style=\"border-radius: 100%; overflow:hidden; width: 80px; height: 80px;\"><img src=\"/assets/demo/7.jpg\" width=\"80px\" height=\"80px\" /></div> - ";
content += "Videos: <video playsinline=\"playsinline\" autoplay=\"autoplay\" muted=\"muted\" loop=\"loop\" width=\"142\" height=\"80\"><source src=\"/assets/demo/neon21368.mp4\" type=\"video/mp4\"></video> - ";
content += "Links: <a href=\"https://superplug.in\" target=\"_blank\">Click me!</a> - ";
new SuperMarquee( document.getElementById( "supermarquee" ), { "content" : content });
<div id="supermarquee"></div>
#supermarquee {
color: #8089ff;
font-size: 48px;
line-height: 80px;
}
jQuery Example
The demo above is constructed with the jQuery version of this library. See the code below to find out more.
// Free video from https://pixabay.com/de/videos/neon-terrain-retro-abstrakt-welt-21368/
let content = "ASCII Emoticons: ❤️😅😉😜😍✌️ - ";
content += "GIFs: <img src=\"/assets/demo/anim-globe.gif\" width=\"106px\" height=\"80px\" /> - ";
content += "Images: <div style=\"border-radius: 100%; overflow:hidden; width: 80px; height: 80px;\"><img src=\"/assets/demo//7.jpg\" width=\"80px\" height=\"80px\" /></div> - ";
content += "Videos: <video playsinline=\"playsinline\" autoplay=\"autoplay\" muted=\"muted\" loop=\"loop\" width=\"142\" height=\"80\"><source src=\"/assets/demo/neon21368.mp4\" type=\"video/mp4\"></video> - ";
content += "Links: <a href=\"https://superplug.in\" target=\"_blank\">Click me!</a> - ";
$( "#supermarquee" ).supermarquee({
"content" : content
});
<div id="supermarquee"></div>
#supermarquee {
color: #8089ff;
font-size: 48px;
line-height: 80px;
}