Not Solved Help styling "Cool Announcements with Marquee" container
#8
Not Solved
(2019-12-04, 05:39 PM)SvePu Wrote: Here is your code Wink

<style type="text/css">
    .marquee_cont {
        height: 2em;
        background: #fefefe;
        color: #333;
        border: 1px solid #4a4a4a;
        position: relative;
        padding: 5px 0;
        border-radius: 3px;
    }

    .marquee_badge {
        position: absolute;
        padding: 5px 20px;
        line-height: 2em;
        height: 2em;
        top: 0;
        left: 0;
        background: red;
        border: 1px solid red;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        color: white;
        font-weight: 800;
        margin: -1px;
        z-index: 1;
    }

    .marquee {
        max-width: 100vw;
        white-space: nowrap;
        overflow: hidden;
        line-height: 2em;
        margin: 0 5px 0 145px;
    }

    .marquee span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 10s linear infinite;
    }

    .marquee span:hover {
        animation-play-state: paused
    }

    @keyframes marquee {
        0%  { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
</style>

<div class="marquee_cont">
    <div class="marquee_badge"><i class="fas fa-microphone-alt fa-lg"></i> Forum News</div>
    <div id="marquee" class="marquee">
        <span>{$mybb->settings['ann']}</span>
    </div>
    <script type="text/javascript">
    if (document.getElementById('marquee')) {
        var marquee = document.getElementById('marquee');
        len = marquee.innerHTML.length;
        marquee.firstElementChild.style.animationDuration = len/6 +'s';
    }
    </script>
</div>
<br />

SvePu, that is amazing!  You even added the hover pause!  I love it! 

Is the scroll speed adjustable?  I may need to speed it up just a bit but otherwise...PERFECT!!

Thanks again!!
MyBB 1.8.22 (x4)
7173Mustangs.com, pa2a.org, pazrt.com & paguntalk.com
Reply


Messages In This Thread
RE: Help styling "Cool Announcements with Marquee" container - by RocketFoot - 2019-12-04, 05:54 PM

Forum Jump:


Users browsing this thread: 1 Guest(s)