😇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 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)
https://raw.githubusercontent.com/constgenius/InfiniteScroll/main/styles.css https://github.com/constgenius/InfiniteScroll/blob/main/index.html
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
Was this helpful?