Η δημιουργία ενός infinite horizontal scrolling λογότυπο με pure CSS είναι ένας απλός αλλά ισχυρός τρόπος για να προσθέσετε δυναμική κίνηση σε μια ιστοσελίδα. Αυτό το σεμινάριο θα σας καθοδηγήσει στη δημιουργία ενός εφέ απεριόριστης κύλισης με πρόσθετα εφέ hover που επιτρέπουν στον χρήστη να παγώσει την κύλιση και να μεγεθύνει ελαφρώς κάθε λογότυπο όταν τοποθετεί τον δείκτη του ποντικιού πάνω του.
Βήμα 1: Δομή HTML
Για να ξεκινήσουμε, θα δημιουργήσουμε μια δομή HTML με ένα κοντέινερ που θα περιέχει όλα τα λογότυπα. Για να εξασφαλίσουμε ένα ομαλό εφέ ατελείωτης κύλισης, κάθε λογότυπο θα διπλασιαστεί.
<!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8" />5 <meta6 name="viewport"7 content="width=device-width, initial-scale=1.0" />8 <title>Build an Infinite Horizontal Scrolling Logo Display</title>9 <link10 rel="stylesheet"11 href="style.css" />12 </head>13 <body>14 <div class="logo-container">15 <div class="logo-scroll">16 <div class="logo-scroll__wrapper">17 <div class="logo-item"></div>18 <div class="logo-item"></div>19 <div class="logo-item"></div>20 <div class="logo-item"></div>21 <div class="logo-item"></div>22 <div class="logo-item"></div>23 <div class="logo-item"></div>24 <div class="logo-item"></div>25 </div>26 <div class="logo-scroll__wrapper">27 <div class="logo-item"></div>28 <div class="logo-item"></div>29 <div class="logo-item"></div>30 <div class="logo-item"></div>31 <div class="logo-item"></div>32 <div class="logo-item"></div>33 <div class="logo-item"></div>34 <div class="logo-item"></div>35 </div>36 </div>37 </div>38 </body>39 </html>
Αυτή η δομή HTML ρυθμίζει τα απαραίτητα στοιχεία για να δημιουργήσει μια άπειρη οριζόντια κύλιση λογότυπων. Τα λογότυπα θα τοποθετηθούν μέσα σε divs τύπου logo-item, τα οποία ομαδοποιούνται σε divs τύπου logo-scroll__wrapper. Αυτά τα wrappers κινούνται μέσω CSS για να κυλούν απεριόριστα.
Αυτό το HTML είναι δομημένο ώστε να λειτουργεί απρόσκοπτα με το παρεχόμενο CSS για ομαλή, άπειρη κύλιση και κλιμακώσιμα στοιχεία λογότυπου.
Βήμα 2: Στυλ και Κίνηση με CSS
Τώρα θα προσθέσουμε τα στυλ CSS για να ελέγξουμε το εφέ κύλισης, να προσθέσουμε μια παύση κατά το hover και να κλιμακώσουμε ελαφρώς τα λογότυπα κατά το hover.
/* Container to limit the scroll width */2 .logo-container {3 /* Setting custom properties for logo dimensions, spacing, and animation duration */4 --logo-width: 200px; /* Width of each logo */5 --logo-height: 100px; /* Height of each logo */6 --gap: calc(var(--logo-width) / 14); /* Space between logos, calculated based on logo width */7 --duration: 60s; /* Duration of the scroll animation */8 --scroll-start: 0; /* Start position of scroll animation */9 --scroll-end: calc(-100% - var(--gap)); /* End position of scroll animation */10
11 display: flex; /* Aligns children in a row */12 flex-direction: column; /* Stacks content vertically */13 gap: var(--gap); /* Adds space between child elements */14 margin: auto; /* Centers container horizontally */15 max-width: 100vw; /* Limits width to the viewport */16 }17
18 /* Scrolling area */19 .logo-scroll {20 display: flex; /* Aligns logos in a horizontal row */21 overflow: hidden; /* Hides overflow to create infinite scroll effect */22 user-select: none; /* Disables text selection */23 gap: var(--gap); /* Space between logos */24 mask-image: linear-gradient(25 to right,26 hsl(0 0% 0% / 0),27 hsl(0 0% 0% / 1) 30%,28 hsl(0 0% 0% / 1) 70%,29 hsl(0 0% 0% / 0)30 ); /* Adds a gradient mask to fade edges */31 }32
33 .logo-scroll__wrapper {34 flex-shrink: 0; /* Prevents wrapper from shrinking */35 display: flex; /* Aligns logos horizontally */36 align-items: center; /* Centers logos vertically */37 justify-content: space-around; /* Distributes logos evenly */38 gap: var(--gap); /* Adds spacing between logos */39 min-width: 100%; /* Wrapper width covers full viewport */40 animation: scroll var(--duration) linear infinite; /* Infinite scrolling animation */41 }42
43 .logo-scroll__wrapper:nth-child(even) {44 margin-left: calc(var(--logo-width) / -2); /* Offsets even wrappers for smooth scroll overlap */45 }46
47 .logo-scroll__wrapper:hover {48 animation-play-state: paused; /* Pauses animation when wrapper is hovered */49 }50
51 /* Logo styling */52 .logo-item {53 width: var(--logo-width); /* Sets width of each logo */54 height: var(--logo-height); /* Sets height of each logo */55 /* transition: transform 0.5s; Smooth scaling effect */56 background-color: blue; /* Background color for logos */57 border-radius: 4px; /* Rounds the logo corners */58 }59
60 .logo-scroll .logo-item:hover {61 transform: scale(1.05); /* Slightly enlarges logo when hovered */62 }63
64 /* Infinite scroll animation */65 @keyframes scroll {66 from {67 transform: translateX(var(--scroll-start)); /* Animation start position */68 }69 to {70 transform: translateX(var(--scroll-end)); /* Animation end position */71 }72 }Περίληψη Λειτουργικότητας:
- Ιδιότητες Κοντέινερ και Κύλισης: Το .logo-container ρυθμίζει τη διάταξη, το .logo-scroll διαχειρίζεται την περιοχή κύλισης, και το .logo-scroll__wrapper κινεί την κύλιση.
- Εφέ Κατά την Πλοήγηση: Το ποντίκι πάνω από το .logo-scroll__wrapper σταματά την κινούμενη εικόνα κύλισης, και το ποντίκι πάνω από το .logo-item κλιμακώνει ελαφρώς τα λογότυπα για αλληλεπίδραση.
- Ατελείωτη Κίνηση Κύλισης: Τα @keyframes scroll μετακινούν ολόκληρο το .logo-scroll__wrapper οριζόντια από την αρχική στη τελική θέση, δημιουργώντας έναν αδιάκοπο κύκλο.
Αυτή η ρύθμιση είναι πλήρως ευέλικτη και προσαρμόσιμη· προσαρμόστε τα μεγέθη, τους χρόνους και τα διαστήματα όπως χρειάζεται για τη διάταξή σας.
Αυτά τα συνδυασμένα στοιχεία δημιουργούν μια ομαλή, διαδραστική, ατελείωτη κύλιση λογότυπου με μόνο CSS animations.
Συμβουλές για Βελτιστοποίηση
- Ταχύτητα κύλισης: Ρυθμίστε τη διάρκεια των 60 δευτερολέπτων για ταχύτερη ή πιο αργή κύλιση.
- Εφέ Πέρασμα: Δοκιμάστε διαφορετικά ποσοστά κλιμάκωσης ή εφέ επιβράδυνσης για να προσαρμόσετε την εμφάνιση του περάσματος.
- Προσαρμογές Αντίκτυπου: Μπορείτε να ρυθμίσετε τα μεγέθη των λογότυπων με σχετικές μονάδες όπως vw ή em για προσαρμοστική συμπεριφορά.
