Glatte Infinite Scrolling Banner [CSS]
Suchen, um dies zu optimieren, infinite-scrolling-Effekt, aber ich bin mir nicht ganz sicher, wie Sie Sie erstellen einen reibungslosen übergang bei der Schleife zurück zu dem ursprünglichen Bild. Bei 10s ist das kaum spürbar, aber bei der 30er ist es deutlicher. Ich nehme an, es hat etwas zu tun mit der Endung position Rand, kann aber nicht ganz sagen kann. Was soll der Wert des letzten Frames sein?
HTML:
<div class="container">
<div class="photobanner">
<img class="first" src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="container">
<div class="photobanner">
<img class="second" src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="container">
<div class="photobanner">
<img class="first" src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
</div>
</div>
CSS:
.container {
width: 100%;
overflow: hidden;
margin: 10px auto;
background: white;
}
.photobanner, .photobanner2 {
height: 233px;
width: 3550px;
}
.photobanner img, .photobanner2 img {
padding-right: 10px;
height: 233px;
width: 350px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
@keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
@-moz-keyframes bannermove {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
@-webkit-keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
@-ms-keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
@-o-keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
.second {
-webkit-animation: bannermoves 30s linear infinite;
-moz-animation: bannermoves 30s linear infinite;
-ms-animation: bannermoves 30s linear infinite;
-o-animation: bannermoves 30s linear infinite;
animation: bannermoves 30s linear infinite;
}
@keyframes "bannermoves" {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
@-moz-keyframes bannermoves {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
@-webkit-keyframes "bannermoves" {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
@-ms-keyframes "bannermoves" {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
@-o-keyframes "bannermoves" {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Check this out: https://jsfiddle.net/sergdenisov/wb28eeh2/3/.
Hatten Sie unnötige Leerzeichen zwischen den Bildern (Ursache
display: inline
, Lesen Sie diesen Artikel — https://css-tricks.com/fighting-the-space-between-inline-block-elements/). Ich:Dann Entferne ich
padding-right: 2px
und Satz:Wirklich einen Raum zwischen 2
img
- tags war6px
, jetzt ist es5px
.Nun können wir berechnen, benötigt
margin-left
für animation: 6 x (350 + 5) =2130px
. Das ist es.~5,97
Blöcke Breite (350 + 6). Ich habe gerade gerundet auf 6 Blöcke Breite =2130px
.