Scribd
Upload
9 views5 pages

Animation Text Scrolling Code

The document describes a scrolling marquee feature that highlights various health-related topics such as Men's and Women's Vitality, Mental Health, Brain Fog, Energy Levels, Health and Fitness, Nutrition, Weight Loss, and Stress Management. It includes CSS styles for the marquee's appearance and animation, ensuring a visually appealing presentation. The marquee is designed to loop infinitely, displaying the topics in a continuous scroll.

Uploaded by

Nouman Qadir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views5 pages

Animation Text Scrolling Code

The document describes a scrolling marquee feature that highlights various health-related topics such as Men's and Women's Vitality, Mental Health, Brain Fog, Energy Levels, Health and Fitness, Nutrition, Weight Loss, and Stress Management. It includes CSS styles for the marquee's appearance and animation, ensuring a visually appealing presentation. The marquee is designed to loop infinitely, displaying the topics in a continuous scroll.

Uploaded by

Nouman Qadir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<div class="marquee__three marquee--hover-pause">

<div class="marquee__group__three" style="animation-duration: 47s;">

<h5>Mens Vitality</h5>

<h5>Women's Vitality</h5>

<h5>Mental Health</h5>

<h5>Brain Fog</h5>

<h5>Energy Levels</h5>

<h5>Health and Fitness</h5>

<h5>Nutrition</h5>

<h5>Weight Loss</h5>

<h5>Stress Management</h5>

<h5>Mens Vitality</h5>

<h5>Women's Vitality</h5>

<h5>Mental Health</h5>

<h5>Brain Fog</h5>

<h5>Energy Levels</h5>

<h5>Health and Fitness</h5>

<h5>Nutrition</h5>

<h5>Weight Loss</h5>

<h5>Stress Management</h5>

<h5>Mens Vitality</h5>

<h5>Women's Vitality</h5>

<h5>Mental Health</h5>

<h5>Brain Fog</h5>

<h5>Energy Levels</h5>

<h5>Health and Fitness</h5>


<h5>Nutrition</h5>

<h5>Weight Loss</h5>

<h5>Stress Management</h5>

</div>

</div>

<style>

.marquee__three {

display: flex;

overflow: hidden;

height: auto;

user-select: none;

gap: 0rem;

padding-top: 0rem;

padding-bottom: 0rem;

.marquee__group__three {

flex-shrink: 0;

display: flex;
align-items: center;

gap: 1.2rem;

border-radius:5px;

transform: translate3d(0%, 0, 0);

animation-name: scroll;

animation-timing-function: linear;

animation-iteration-count: infinite;

animation-play-state: running;

.marquee__group__three1 {

flex-shrink: 0;

display: flex;

align-items: center;

gap: 3rem;

border-radius:5px;

transform: translate3d(0%, 0, 0);

animation-name: scroll;

animation-timing-function: linear;

animation-iteration-count: infinite;

animation-play-state: running;

animation-direction:reverse;

@keyframes scroll {

100% {

transform: translateX(-2500px);
}

h5{

background:white;

width:100%;

padding-top: 0.4%;

padding-bottom: 0.4%;

padding-left:0.5%;

padding-right:0.5%;

color:white;

border-radius:25px!important;

font-family: 'Poppins'!important;

font-weight:500;

letter-spacing:1.1px;

font-size:16px;

border: 3px solid #22C7F1;

white-space:nowrap!important;

@media screen and (min-width:280px) and (max-width:480px){

h5{

width:100%;

padding-top: 0.3%!important;

padding-bottom: 0.3%!important;
padding-left:0.5%!important;

padding-right:0.5%!important;

color:white;

border-radius:25px!important;

font-family: 'Poppins'!important;

font-weight:500;

letter-spacing:1.5px;

font-size:14px!important;

border: 3px solid #22C7F1;

white-space:nowrap!important;

</style>

You might also like