Seamless Scrolling Background

Developer
Joshua P. Larson
Size
2,535 Kb
Views
40,480
  1. Seamless Scrolling Background Previews
  2. Seamless Scrolling Background HTML Codes
  3. Seamless Scrolling Background CSS Codes

How do I make an seamless scrolling background?

Wanted to try a "fishbowl" approach for showing a group of logos. Easy to do by animating a background image's position. Have to use VW units to tell it to move the entire width of the viewport – will NOT work unless in Full Page/Debug mode, though.. What is a seamless scrolling background? How do you make a seamless scrolling background? This script and codes were developed by Joshua P. Larson on 23 July 2022, Saturday.

Seamless Scrolling Background Previews
IQ Test

Seamless Scrolling Background - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Seamless Scrolling Background</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { height: 100%; background: #efefef;
}
.slider { background-image: url(http://placehold.it/800x200); margin: 1rem auto; height: 200px; animation: slide 5s linear 0 infinite; background-size: auto;
}
@keyframes slide { from { background-position-x: 0%; } to { background-position-x: 100vw; }
}
h1, p { padding: 1em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Seamless scrolling background</h1>
<div class="slider"></div>
<p> The background above will loop at the duration defined in the CSS animation property. It uses the <strong>vw</strong> unit to tell the background's positon to move the entire width of the viewport.
</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Seamless Scrolling Background - Script Codes CSS Codes

body { height: 100%; background: #efefef;
}
.slider { background-image: url(http://placehold.it/800x200); margin: 1rem auto; height: 200px; animation: slide 5s linear 0 infinite; background-size: auto;
}
@keyframes slide { from { background-position-x: 0%; } to { background-position-x: 100vw; }
}
h1, p { padding: 1em;
}
Seamless Scrolling Background - Script Codes
Seamless Scrolling Background - Script Codes
Home Page Home
Developer Joshua P. Larson
Username jplhomer
Uploaded July 23, 2022
Rating 3
Size 2,535 Kb
Views 40,480
Do you need developer help for Seamless Scrolling Background?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joshua P. Larson (jplhomer) Script Codes
Name
JS Geolocator
Displaying a Google Street View of your current location
Fixed Nav HoverIntent Example
Webkit Text Masking
Lightweight Quiz Widget
Responsive HTML Timeline
Animated Donut Chart
CSS-Only Art Direction
Hey React
Verge-Style Homepage Tiles
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!