Erstellen Sie Scrolling CSS

Scrollen kann viel Platz sparen und kann sehr zart in CSS3 behandelt werden, gepaart mit der Kraft von CSS Sprites Bild und etwas Mathe, werden wir dieses Bild unten in die rotierende Banner.

Dies ist der Sprite, den wir als Hintergrund für die Links verwenden werden.

Um so ein rotierendes Banner zu erstellen. Alle Links zeigen auf Claytabase Social Media Kanäle.

CSS

/*Sprite Backgrounds*/
.smFbk64{background-position: 0px -0px}
.smTwi64{background-position:-66px -0px}
.smGoo64{background-position:-132px -0px}
.smLin64{background-position:-198px -0px}
.sm64{width:64px;height:64px;display:inline-block;overflow:hidden;background-image: url('https://www.gsclayton.net/System/Artwork/Articles/SocialMedia_64.png');background-repeat:no-repeat;}
.rnd50{border-radius:50%}
/*Moving Parts*/
.parentDiv{width:64px;height:64px;overflow:hidden;margin:auto}
.followDiv{width:320px;height:64px;position:relative;
animation:followDivSlide ease infinite 10s;-webkit-animation:followDivSlide ease infinite 10s;-moz-animation:followDivSlide ease infinite 10s;
-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;}
@keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}
@-webkit-keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}
@-moz-keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}

</style>
/*HTML*/
<div class="parentDiv">
<div class="followDiv"><a class="sm64 rnd50 smFbk64" href="https://www.facebook.com/Claytabase"></a><a class="sm64 rnd50 smTwi64" href="https://twitter.com/claytabase"></a><a class="sm64 rnd50 smGoo64" href="https://plus.google.com/+ClaytabaseCoUk"></a><a class="sm64 rnd50 smLin64" href="https://www.linkedin.com/company/claytabase-ltd"></a><a class="sm64 rnd50 smFbk64" href="https://www.facebook.com/Claytabase"></a></div>
</div>

Der Sprite

Das Bild ist 8x64 breit und 8x64 hohe Bilder kombiniert als Bild 658px breit und 196px hoch, wir interessieren uns nur nur die ersten 4 Bilder im Moment.

Wir erstellen 4 CSS-Klassen für jeden von ihnen, um mit der Shorthand-Hintergrundeigenschaft zu erstellen.

Wie Sie sehen können, hat das Bild einen Platz von 2px zwischen jedem Bild, also fügen wir das der Position hinzu, -68px etc.
Wir können auch 2 gemeinsame Klassen wählen, um alle Gegenstände zu verwenden, sie setzen den Grenzradius und die Größe jedes Artikels.

Der Kontainer

Dies ist ein einfaches div, das genau die gleiche Breite und Höhe (64x64) wie die oben definierten Bilder, wir setzen Überlauf zu versteckt, um den Rest des Kindes zu verstecken.

Parent Div Beispiel

Das Kind / Kinder

Dies ist das zweite div, das im CSS bewegt wird. Wir setzen die Höhe auf 64px, aber dieses Mal ist die Breite muss 64px * 4 geben uns insgesamt 256px.

In diesem Beispiel wollen wir den ersten Sprite am Ende wiederholen, um einen plötzlichen Ruck zwischen Facebook und Linked In zu verhindern, also die Breite auf 320px anzupassen.

Die Animation

Unsere Animation verschiebt dann das div auf Positionen von 0px, -64px, -128px, -192px und -256px, so dass nur das eine Element an jedem Punkt während der Bewegung sichtbar ist. Siehe unten für ein Beispiel, ohne Überlauf, und auf der rechten Seite für eine Abbildung, wie die Positionierung bewegt jedes Element.