CSS only marquee effect

migrations/v333_m14_update_bbcodes.php

@@ -0,0 +1,45 @@
+<?php
+/**
+*
+* Advanced BBCode Box
+*
+* @copyright (c) 2021 Matt Friedman
+* @license GNU General Public License, version 2 (GPL-2.0)
+*
+*/
+
+namespace vse\abbc3\migrations;
+
+class v333_m14_update_bbcodes extends bbcodes_migration_base
+{
+	/**
+	 * {@inheritdoc}
+	 */
+	public static function depends_on()
+	{
+		return [
+			'\vse\abbc3\migrations\v310_m4_install_data',
+			'\vse\abbc3\migrations\v310_m5_update_bbcodes'];
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	public function update_data()
+	{
+		return [
+			['custom', [[$this, 'install_abbc3_bbcodes']]],
+		];
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected static $bbcode_data = [
+		'marq=' => [
+			'bbcode_helpline'	=> 'ABBC3_MARQUEE_HELPLINE',
+			'bbcode_match'		=> '[marq={IDENTIFIER}]{TEXT}[/marq]',
+			'bbcode_tpl'		=> '<div class="abbc3-marquee"><div class="abbc3-marquee-{IDENTIFIER}">{TEXT}</div></div>',
+		],
+	];
+}

styles/all/theme/abbc3_common.css

@@ -74,3 +74,76 @@
 .pipe-table tr:hover {
 	background-color: #f5f5f5;
 }
+
+/* Marquee styling */
+.abbc3-marquee {
+	overflow: hidden;
+}
+
+.abbc3-marquee-left {
+	text-align: center;
+	-webkit-transform: translateX(100%);
+	-moz-transform: translateX(100%);
+	transform: translateX(100%);
+	-webkit-animation: marquee-x 10s linear normal infinite;
+	-moz-animation: marquee-x 10s linear normal infinite;
+	animation: marquee-x 10s linear normal infinite;
+}
+
+.abbc3-marquee-right {
+	text-align: center;
+	-webkit-transform: translateX(-100%);
+	-moz-transform: translateX(-100%);
+	transform: translateX(-100%);
+	-webkit-animation: marquee-x 10s linear reverse infinite;
+	-moz-animation: marquee-x 10s linear reverse infinite;
+	animation: marquee-x 10s linear reverse infinite;
+}
+
+.abbc3-marquee-up {
+	height: 20em;
+	-webkit-transform: translateY(100%);
+	-moz-transform: translateY(100%);
+	transform: translateY(100%);
+	-webkit-animation: marquee-y 5s linear normal infinite;
+	-moz-animation: marquee-y 5s linear normal infinite;
+	animation: marquee-y 5s linear normal infinite;
+}
+
+.abbc3-marquee-down {
+	height: 20em;
+	-webkit-transform: translateY(-100%);
+	-moz-transform: translateY(-100%);
+	transform: translateY(-100%);
+	-webkit-animation: marquee-y 5s linear reverse infinite;
+	-moz-animation: marquee-y 5s linear reverse infinite;
+	animation: marquee-y 5s linear reverse infinite;
+}
+
+@keyframes marquee-x {
+	0% {
+		-webkit-transform: translateX(100%);
+		-moz-transform: translateX(100%);
+		transform: translateX(100%);
+	}
+
+	100% {
+		-webkit-transform: translateX(-100%);
+		-moz-transform: translateX(-100%);
+		transform: translateX(-100%);
+	}
+}
+
+@keyframes marquee-y {
+	0% {
+		-webkit-transform: translateY(100%);
+		-moz-transform: translateY(100%);
+		transform: translateY(100%);
+	}
+
+	100% {
+		-webkit-transform: translateY(-100%);
+		-moz-transform: translateY(-100%);
+		transform: translateY(-100%);
+	}
+}