Logo ticker en HTML/CSS

-1

Est-ce que quelqu'un sait comment coder ceci en HTML et CSS?Logo ticker en HTML/CSS

http://cmoreira.net/logos-showcase/infinite-loop-ticker-carousel/

Je suis à la recherche d'ajouter le dégradé des deux côtés et je préfère le faire sans JS.

Je suis venu avec quelque chose sur codepen mais j'ai quelques questions:

Le symbole est actualisé lorsque $duration se termine. Je le veux aussi boucle infiniment.
Je ne peux pas penser à un moyen d'ajouter le dégradé des deux côtés.

(je suis un designer, j'ai peu de connaissance du code)

CSS

$duration: 30s; 

@-webkit-keyframes ticker { 
0% { 
-webkit-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0); 
visibility: visible; 
} 

100% { 
-webkit-transform: translate3d(-100%, 0, 0); 
transform: translate3d(-100%, 0, 0); 
} 
} 

@keyframes ticker { 
0% { 
-webkit-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0); 
visibility: visible; 
} 

100% { 
-webkit-transform: translate3d(-100%, 0, 0); 
transform: translate3d(-100%, 0, 0); 
} 
} 

.ticker-wrap { 

position: fixed; 
width: 100%; 
overflow: hidden; 
height: 100px; 
background-color: rgba(#fff, 0.0); 
padding-left: 100%; 

} 
} 

.ticker { 

display: inline-block; 
height: 100px; 
line-height: 5rem; 
white-space: nowrap; 
padding-right: 80%; 

-webkit-animation-iteration-count: infinite; 
animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
animation-timing-function: linear; 
-webkit-animation-name: ticker; 
animation-name: ticker; 
-webkit-animation-duration: $duration; 
animation-duration: $duration; 

&__item { 

display: inline-block; 

padding: 0 2rem; 
font-size: 2rem; 
color: white; 

} 
} 
body { padding-bottom: 5rem; } 
h1,h2,p {padding: 0 5%;}

HTML

<div class="ticker-wrap"> 
<div class="ticker"> 
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"> 
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div> 
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div> 
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div> 
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>

Source

2017-09-14 Daniel Blom

Notez que bien que le lien que vous avez utilisations JS mettre à jour la position 'left' de l'emballage logo au lieu de faire une CSS transformer l'animation, * en principe * il fonctionne exactement comme votre codepen l'exemple fait: il va pendant un moment puis réinitialise. Ils placent chaque logo dans le HTML à plusieurs reprises, dans un motif répétitif, glissent tout le conteneur à gauche, puis le réinitialisent au début juste au bon moment, de sorte qu'il semble ne jamais s'arrêter. Si vous expérimentez avec la longueur de votre animation et la largeur du conteneur, vous pouvez obtenir le même effet. Vous êtes plus proche que vous ne le pensez. – cjl750

@Paulie_D Salut Paulie, merci pour votre réponse. Je n'étais pas pleinement conscient de ces exigences. J'ai édité le post, j'espère que cela répond aux exigences. –

@ cjl750 Merci. Je pensais que ce serait possible. Y a-t-il aussi un moyen de le faire sans dupliquer le logo en HTML? J'essaie d'avoir le moins de HTML possible. –

Vous devriez pouvoir juste éditez les variables en haut et adaptez-la à votre objectif. Vous aurez besoin d'assez d'images pour au moins couvrir l'espace que vous voulez remplir, puis un peu plus (pour que l'effet continu fonctionne).

.scrolling_banner { 
 
    --banner-width: 300px; 
 
    --banner-height: 200px; 
 
    --banner-margin-bottom: 10px; 
 
    --banner-margin-right: 5px; 
 
    --banner-items: 6; 
 
    --banner-duration: 2s; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.scrolling_banner { 
 
    height: var(--banner-height); 
 
    width: calc((var(--banner-width) + var(--banner-margin-right)) * var(--banner-items)); 
 
    margin-bottom: calc(var(--banner-margin-bottom)/ 2); 
 
    font-size: 0 
 
} 
 

 
.scrolling_banner * { 
 
    margin-bottom: var(--banner-margin-bottom); 
 
    margin-right: var(--banner-margin-right); 
 
    height: var(--banner-height); 
 
    width: var(--banner-width); 
 
} 
 

 
.first { 
 
    -webkit-animation: bannermove var(--banner-duration) linear infinite; 
 
    -moz-animation: bannermove var(--banner-duration) linear infinite; 
 
    -ms-animation: bannermove var(--banner-duration) linear infinite; 
 
    -o-animation: bannermove var(--banner-duration) linear infinite; 
 
    animation: bannermove var(--banner-duration) linear infinite 
 
} 
 

 
@keyframes bannermove { 
 
    0% { 
 
    margin-left: 0 
 
    } 
 
    100% { 
 
    margin-left: calc((var(--banner-width) + var(--banner-margin-right)) * -1) 
 
    } 
 
}

<div class="container"> 
 
    <div class="scrolling_banner"> 
 
    <img class="first" src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png"> 
 
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png"> 
 
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png"> 
 
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png"> 
 
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png"> 
 
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png"> 
 
    </div> 
 
</div>

Source

2017-09-15 15:25:33

Merci beaucoup, semble fonctionner très bien! Cependant, si je devais utiliser différentes images, il se rafraîchira à chaque fois que la classe «première» sera hors de l'écran. Un moyen de résoudre ce problème? –

Logo ticker en HTML/CSS

Répondre

Questions connexes