Three notification bar scrolling effects implemented with pure CSS

Three notification bar scrolling effects implemented with pure CSS

Preface

The notification bar component is a relatively common component. Basically every site will have such a component. Its main function is to announce some changes in the site or inform some winners.
I have been reviewing the CSS3 animation part recently. I thought that most of the notification bar components are still implemented with JS. I just took this component as a review. I wrote three small examples below to share. You are welcome to watch them. If you have any questions, please leave a message and comment.

The first

HTML Part

<div class="notice">
    <div class="notice__inner">
        <div class="notice__box">
            <div class="notice__item">Congratulations to member user <span style="color: red;">Chengrenren</span> for winning the prize</div>
            <div class="notice__item">Congratulations to member user <span style="color: red;">Xiao Mi Quan Quan</span> for winning the prize</div>
            <div class="notice__item">Congratulations to member user <span style="color: red;">Cooke_</span> for winning the prize</div>
            <div class="notice__item">Congratulations to member user &nbsp;<span style="color: red;">Love Music Website</span>&nbsp; for winning the prize</div>
            <div class="notice__item">Congratulations to member user <span style="color: red;">Voice of Youth</span> for winning the prize</div>
            <div class="notice__item">Congratulations to member user &nbsp;<span style="color: red;">Xianren</span>&nbsp; for winning the prize</div>
            <div class="notice__item">Congratulations to the member user&nbsp;<span style="color: red;">300,000 number</span>&nbsp;winning the prize</div>
            <div class="notice__item">Congratulations to member user &nbsp;<span style="color: red;">Maboroshii</span>&nbsp; for winning the prize</div>
            <div class="notice__item">Congratulations to member user Chen Yaming for winning the prize</div>
            <div class="notice__item">Congratulations to the member user&nbsp;<span style="color: red;">I finally got rich</span>&nbsp;Winning the prize</div>
        </div>
        <div class="notice__box">
            <div class="notice__item">Congratulations to member user <span style="color: red;">Chengrenren</span> for winning the prize</div>
            <div class="notice__item">Congratulations to member user <span style="color: red;">Xiao Mi Quan Quan</span> for winning the prize</div>
            <div class="notice__item">Congratulations to member user <span style="color: red;">Cooke_</span> for winning the prize</div>
            <div class="notice__item">Congratulations to member user &nbsp;<span style="color: red;">Love Music Website</span>&nbsp; for winning the prize</div>
            <div class="notice__item">Congratulations to member user <span style="color: red;">Voice of Youth</span> for winning the prize</div>
            <div class="notice__item">Congratulations to member user &nbsp;<span style="color: red;">Xianren</span>&nbsp; for winning the prize</div>
            <div class="notice__item">Congratulations to the member user&nbsp;<span style="color: red;">300,000 number</span>&nbsp;winning the prize</div>
            <div class="notice__item">Congratulations to member user &nbsp;<span style="color: red;">Maboroshii</span>&nbsp; for winning the prize</div>
            <div class="notice__item">Congratulations to member user Chen Yaming for winning the prize</div>
            <div class="notice__item">Congratulations to the member user&nbsp;<span style="color: red;">I finally got rich</span>&nbsp;Winning the prize</div>
        </div>
    </div>
</div>

CSS Part

.notice{
    width: 300px;
    height: 300px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin: 100px auto;
}
.notice__inner{
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 14px;
    color: #666;
}
.notice__box{
    animation: roll 10s linear infinite;
}
.notice__item{
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    white-space: nowrap;
}
@keyframes roll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-300px);
    }
}

  • The viewport container height needs to be fixed, and the content will be hidden if it exceeds the viewport container.
  • In order to create a seamless scroll back, the content needs to be prepared in two copies, right after each other;
  • The scrolling effect is achieved by moving the inner layer translateY;
  • When the first content completely scrolls out of the viewport container, immediately restore the content position;
  • This process is looped through infinite;

The second

HTML Part

<div class="notice">
    <div class="notice__inner">
        <div class="notice__item">The whole process of HTTP upgrade to HTTPS, Nginx configuration smooth upgrade</div>
        <div class="notice__item">There are multiple versions of Vuecli on one computer, which is convenient for quickly initializing different versions of Vue projects</div>
        <div class="notice__item">Front-end modular specification definition - import and export under different specifications</div>
        <div class="notice__item">Quickly and concisely explain the role of v-for loop key in Vue</div>
        <div class="notice__item">Analysis and handwritten implementation of Call and Apply functions</div>
        <div class="notice__item">A year as an ordinary picture cutter | Nuggets annual essay solicitation</div>
        <div class="notice__item">Browser cache (i.e. HTTP cache) that the front-end needs to know | 🏆 Call for papers for the eighth technical topic</div>
    </div>
</div>

CSS Part

.notice{
    width: 600px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin: 100px auto;
    overflow: hidden;
}
.notice__inner{
    animation: roll 36s linear infinite;
    margin-top: 0
}
.notice__item{
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    white-space: nowrap;
    text-decoration: underline;
}
@keyframes roll {
    0% {
        margin-top: 0;
    }
    4% {
        margin-top: 0;
    }
    8% {
        margin-top: 0;
    }
    12% {
        margin-top: -40px;
    }
    16% {
        margin-top: -40px;
    }
    20% {
        margin-top: -80px;
    }
    twenty four% {
        margin-top: -80px;
    }
    28% {
        margin-top: -120px;
    }
    32% {
        margin-top: -120px;
    }
    36% {
        margin-top: -160px;
    }
    40% {
        margin-top: -160px;
    }
    44%
        margin-top: -200px;
    }
    48% {
        margin-top: -200px;
    }
    52% {
        margin-top: -240px;
    }
    56% {
        margin-top: -240px;
    }
    60% {
        margin-top: -200px;
    }
    64% {
        margin-top: -200px;
    }
    68%
        margin-top: -160px;
    }
    72% {
        margin-top: -160px;
    }
    76% {
        margin-top: -120px;
    }
    80% {
        margin-top: -120px;
    }
    84% {
        margin-top: -80px;
    }
    88% {
        margin-top: -80px;
    }
    92% {
        margin-top: -40px;
    }
    96% {
        margin-top: -40px;
    }
    100% {
        margin-top: 0;
    }
}

(The gif recording may be a little short, it is recommended to try it yourself)

This type of carousel is a common one, and it is also a relatively practical, complete and simple one. Just to mention, it is relatively simple and quick to implement it with the swiper component on the WeChat applet (don’t ask me how I know -.-).

  • The viewport container height needs to be fixed, and the content will be hidden if it exceeds the viewport container.
  • Achieve scrolling effect by moving the inner margin-top (the same is true with translateY, just replace them all);
  • Note that, from the HTML above, we know that I have seven notifications, so the margin-top in @keyframes only moves seven times and then goes back. If an eighth notification is added, we need to adjust the value accordingly.

The third

HTML Part

<div class="notice">
    <div class="notice__inner">
        <span class="notice__item notice__item-first">Vue is a progressive JavaScript framework</span>
        <span class="notice__item notice__item-second">Vue is a progressive JavaScript framework</span>
    </div>
</div>

CSS Part

.notice{
    width: 600px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin: 100px auto;
    overflow: hidden;
}
.notice__inner{
    height: 100%;
    font-size: 14px;
    color: #333;
    line-height: 40px;
    white-space: nowrap;
    position: relative;
}
.notice__item{
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
}
.notice__item-first{
    padding-right: 70%;
    animation: rollFirst 25s linear infinite;
}
.notice__item-second{
    padding-right: 53%;
    animation: rollSecond 25s linear 12s infinite;
}
@keyframes rollFirst {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
    }
}
@keyframes rollSecond {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
    }
}

This type of scrolling notification bar is also a common one. One of its more troublesome points is that the blank interval is difficult to control, especially when there are multiple notification contents. Of course, it is easier to implement with JS, and now there are also many plug-ins that can be used directly out of the box.

  • The height of this viewport container does not need to be fixed, it does not depend on, and the content is hidden beyond the viewport container;
  • Use padding-right to create blank space in percentage;
  • Two copies of the content need to be prepared, and animation-delay is used to delay the appearance of the second copy of the content. Another idea here is to directly move the translateX of the inner container, which is the same as the first one;

summary

After reading this, are you eager to try it? No? Okay.

Pure HTML+CSS is definitely not as flexible as JS, but the above examples are still very suitable for some scenarios with fixed copywriting, and are also suitable for quickly making interactive effects during the development stage.

This concludes this article about three notification bar scrolling effects implemented with pure CSS. For more relevant CSS notification bar content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<:  Common operations of web front-end (including JS/HTML/CSS and other aspects of knowledge)

>>:  MySQL service and database management

Recommend

Native js imitates mobile phone pull-down refresh

This article shares the specific code of js imita...

VMware vSphere6.0 server virtualization deployment and installation diagram (detailed steps)

1. Key points for early planning of VMware vSpher...

WeChat applet scroll-view realizes left-right linkage effect

WeChat applet uses scroll-view to achieve left-ri...

Solution to the problem "Table mysql.plugin doesn't exist" when deploying MySQL

Today I deployed the free-installation version of...

JavaScript design pattern learning proxy pattern

Table of contents Overview Implementation Protect...

How to solve the problem "Unknown column 'password" when resetting MySQL root password

When I turned on my MAC at night, I found that th...

jQuery implements clicking left and right buttons to switch pictures

This article example shares the specific code of ...

Design and implementation of supermarket commodity management system based on Mysql+JavaSwing

Table of contents 1. Function Introduction 2. Key...

js to achieve the pop-up effect

This article example shares the specific code of ...

Two query methods when the MySQL query field type is json

The table structure is as follows: id varchar(32)...

Detailed explanation of the use and underlying principles of MySQL table partitions

Table of contents What is a partition table Parti...

Json string + Cookie + localstorage in JS

Table of contents 1.Json string 1.1Json Syntax 1....

Tutorial diagram of using Jenkins for automated deployment under Windows

Today we will talk about how to use Jenkins+power...

A practical tutorial on building a fully distributed Hadoop environment under Ubuntu 16.4

Preface This article mainly introduces the releva...

Example of Vue implementing fixed bottom component

Table of contents 【Effect】 【Implementation method...