urlscan.io logo urlscan.io
SecurityTrails logo

www.winterwind.com Open in urlscan Pro
18.154.227.45  Public Scan

Back to summary
Submitted URL: http://www.winterwind.com/tutorials/css/52
Effective URL: https://www.winterwind.com/tutorials/css/52
Submission: On November 17 via manual from US — Scanned from CA

Form analysis 0 forms found in the DOM

Text Content

 * 
 * 
 * 

 * 
 * 
 * 

 * Book a free 30 min consultation

 * About
   Anthony's Resume
 * About
   Anthony's Resume
 * Services
   Blockchain Development
   EOS Development Bitcoin Development Stellar Development Ethereum Development
   Software Consulting
   Blockchain Consulting
   Web Development
   Massage Business Manager CSS Development Laravel Development NationBuilder
   Development Shopify Development Elixir Development
   Mobile App Development
   React Native Development Flutter Development Swift Development Kotlin
   Development
   Payments Integration
   Stripe Development
   PayPal Integration
   Payoneer API Integration
   Mollie Integration
   Moneris Integration
   Java Development
   FIX Protocol Integration
   Other Development
   Golang Development
   Medical Software
   BP Premier Integration
   AWS
   AWS Rekognition Integration
 * Services
   Blockchain Development
   EOS Development Bitcoin Development Stellar Development Ethereum Development
   Software Consulting
   Blockchain Consulting
   Web Development
   Massage Business Manager CSS Development Laravel Development NationBuilder
   Development Shopify Development Elixir Development
   Mobile App Development
   React Native Development Flutter Development Swift Development Kotlin
   Development
   Payments Integration
   Stripe Development PayPal Integration Payoneer API Integration Mollie
   Integration Moneris Integration
   Java Development
   FIX Protocol Integration
   Other Development
   Golang Development
   Medical Software
   BP Premier Integration
   AWS
   AWS Rekognition Integration
 * Rates
 * Tutorials
 * Team
 * Contact
 * Contact

Security And Privacy Audits For Websites
 * 








 1. Tutorials
 2. CSS
 3. Auto Scrolling Image Slider


AUTO SCROLLING IMAGE SLIDER

In this tutorial, you will learn how to create an auto scrolling image slider
using pure CSS. Watch the video below for a detailed tutorial.

--------------------------------------------------------------------------------



HTML

<body>
    <div class="wrapper">
        <div class="track">
            <div class="logo">
                <img src="logos/1.png"/>
            </div>
            <div class="logo">
                <img src="logos/2.png"/>
            </div>
            <div class="logo">
                <img src="logos/3.png"/>
            </div>
            <div class="logo">
                <img src="logos/4.png"/>
            </div>
            <div class="logo">
                <img src="logos/5.png"/>
            </div>
            <div class="logo">
                <img src="logos/1.png"/>
            </div>
            <div class="logo">
                <img src="logos/2.png"/>
            </div>
            <div class="logo">
                <img src="logos/3.png"/>
            </div>
            <div class="logo">
                <img src="logos/4.png"/>
            </div>
            <div class="logo">
                <img src="logos/5.png"/>
            </div>
        </div>
    </div>
</body>

Copy

CSS

body {
	background-color: #2E3537;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wrapper {
	background-color: #E1E2E2;
	height: 130px;
	overflow: hidden;
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0 20px;
}

.wrapper:before, .wrapper:after {
	content: "";
	position: absolute;
	height: 130px;
	width: 150px;
	z-index: 2;
}

.wrapper:after {
	right: 0;
	top: 0;
	transform: rotateZ(180deg);
}

.wrapper:before {
	left: 0;
	top: 0;
}

.wrapper .track {
	display: flex;
	width: calc(150px * 10);
	animation: scroll 15s 0.5s linear infinite;
}

.wrapper .logo {
	width: 150px;
}

.wrapper .logo img {
	height: 90px;
}

@keyframes  scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-150px * 5));
	}
}

Copy


BOOK A FREE
CONSULTATION CALL

 * 46150 BOLE AVE, CHILLIWACK, BC, CANADA
   
   
 * 604-212-2400

This site is owned and operated by Anthony Vipond.



 * 
 * 
 * 

Copyright © 2024. Winterwind Inc. All Rights Reserved. Privacy Policy. Terms of
Service. Winterwind is trademarked in the USA, UK and Canada.