😇Create CSS Animations on Scroll (ok)

Example 1

C:\Users\Administrator\OneDrive\Desktop\code\index.html

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="style.css">
	</head>

	<body>
		<div class="wrap">
			<div class="one">
				<h3> Laravel Jobs </h3>
				<p> The official Laravel job board connecting the best jobs with top&nbsp;talent. </p>
			</div>
			<div class="two">
				<div class="animate-scroll-slower">
					<div class="animate_inner">
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 1.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 2.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 3.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 4.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 5.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 6.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 7.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 8.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 9.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 10.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 1.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 2.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 3.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 4.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 5.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 6.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 7.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 8.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 9.</a>
						<a href="#" title="Test">Lorem ipsum dolor sit, amet 10.</a>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>

C:\Users\Administrator\OneDrive\Desktop\code\style.css

.wrap {
  width: 800px;
  margin: 0 auto;
  background-color: #000;
  display: flex;
  position: relative;
  margin-top: 150px;
}
h3 {
  color: #d62419;
  font-size: 50px;
}
a {
  text-decoration: none;
  display: block;
  background-color: #b2b2b3;
  color: #fff;
  padding: 10px 5px;
  margin: 5px 0;
}
.one {
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 70%;
  max-width: 70%
}
.two {
  overflow: hidden;
  position: absolute;
  top: 0;
  height: 100%;
  right: 0;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 30%;
  max-width: 30%
}
p {
  color: #fff;
}
.animate-scroll-slower {
  animation: scroll 15s linear infinite;
}
@keyframes scroll {
  0% {
    transform: translateY(0)
  }
  to {
    transform: translateY(-50%)
  }
}

Example 2

C:\xampp82\htdocs\html\test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="test.css">
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Libs CSS -->
  <!-- Theme CSS -->
</head>
<body>
  <div class="row">
    <div class="col-lg-12 col-12">
      <div class="marquee h-auto">
        <div class="track d-flex gap-4">
          <div>
            <img src="https://block.codescandy.com/assets/images/hero/landing-saas-v1.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/hero/landing-saas-v2.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/hero/creative-agency-template.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-5.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/hero/landing-accounting.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/hero//landing-saas-finance.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/hero/modern-conference-landing-template.jpg"
              alt="Image" class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/hero/clean-perosnal-template.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-2.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/hero/creative-agency-template.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/hero/landing-saas-v1.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-4.jpg" alt="Image"
              class="rounded-3 border">
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-12 col-12">
      <div class="marquee h-auto">
        <div class="track-2 d-flex gap-4 py-3">
          <div>
            <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-1.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-9.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-3.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-8.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/hero/clean-perosnal-template.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-1.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-6.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-4.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-2.jpg" alt="Image"
              class="rounded-3 border">
          </div>
          <div>
            <img src="https://block.codescandy.com/assets/images/hero/creative-agency-template.jpg" alt="Image"
              class="rounded-3 border">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

C:\xampp82\htdocs\html\test.scss

.row {
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-top: calc(var(--bs-gutter-y) * -1);
}
.col-12 {
  flex: 0 0 auto;
  width: 100%;
}
.col-lg-12 {
  flex: 0 0 auto;
  width: 100%;
}
.d-flex {
  display: flex !important;
}
.h-auto {
  height: auto !important;
}
.marquee {
  height: 65px;
  line-height: 4.5;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  width: 100vw;
  img {
    max-width: 320px;
  }
}
.marquee .track {
  animation: marquee 100s linear infinite;
}
.marquee .track,
.marquee .track-2 {
  white-space: nowrap;
  will-change: transform;
}
.marquee .track-2 {
  animation: marquee-left 100s linear infinite;
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes marquee-left {
  to {
    transform: translateX(0);
  }
  0% {
    transform: translateX(-50%);
  }
}

Example 3 (Infinite Horizontal Scroll Animation | Infinite Scrolling Animation CSS Only)

GitHub - constgenius/InfiniteScroll: Infinite Horizontal Scroll Animation | Infinite Scrolling Animation CSS OnlyGitHub

https://raw.githubusercontent.com/constgenius/InfiniteScroll/main/styles.css https://github.com/constgenius/InfiniteScroll/blob/main/index.html

498KB

InfiniteScroll-main.zip

archive

Open

Previousfont-face Hướng dẫn conver font và nhúng sử dụng online (ok)NextHiệu ứng hover bằng js hiện phần description (ok)

Last updated 1 year ago

Was this helpful?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="test.css">  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">   </head> <body> <div class="row"> <div class="col-lg-12 col-12"> <div class="marquee h-auto"> <div class="track d-flex gap-4"> <div> <img src="https://block.codescandy.com/assets/images/hero/landing-saas-v1.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/hero/landing-saas-v2.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/hero/creative-agency-template.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-5.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/hero/landing-accounting.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/hero//landing-saas-finance.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/hero/modern-conference-landing-template.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/hero/clean-perosnal-template.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-2.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/hero/creative-agency-template.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/hero/landing-saas-v1.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-4.jpg" alt="Image" class="rounded-3 border"> </div> </div> </div> </div> <div class="col-lg-12 col-12"> <div class="marquee h-auto"> <div class="track-2 d-flex gap-4 py-3"> <div> <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-1.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-9.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-3.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-8.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/hero/clean-perosnal-template.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-1.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-6.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-4.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/landings/overview/overview-img-2.jpg" alt="Image" class="rounded-3 border"> </div> <div> <img src="https://block.codescandy.com/assets/images/hero/creative-agency-template.jpg" alt="Image" class="rounded-3 border"> </div> </div> </div> </div> </div> </body> </html>