Un utente ha chiesto informazioni su GeneratePress di Wordpress

Testo curvo animato infinito Da destra a sinistra

Un utente ha chiesto 👇

Ciao, Buone Feste e ciao a tutti, il supporto qui è incredibile!

Ho trovato utile questo collegamento (https://codepen.io/taboo09/pen/YXKzaP) per il testo animato che si piega all’infinito e va da destra a sinistra. Sono nuovo a tutto questo, quindi non ho ancora usato javascript. Invece, sono andato con la combinazione HTML e CSS.

Innanzitutto, ho modificato l’HTML in base alle mie esigenze e l’ho incollato in un widget HTML personalizzato nella barra in alto tramite personalizzazione.
Quindi ho modificato il CSS in base alle mie esigenze (per quanto la mia capacità è piccola) e l’ho incollato in style.css.

Ecco il mio problema, il testo stesso è corretto, si muove, MA poi si ferma per il primo quarto del percorso e NESSUN ciclo infinito quando dovrebbe fare un ciclo infinito.
Probabilmente c’è qualcosa che devo specificare nella SEC per adattarlo alla mia pagina / sito, ma non lo so esattamente.

Ecco la mia attuale SEC:

div.main {
  overflow:hidden;
  font-size: 1.5em;
  font-family: "BemboStd";
  color: #ffffff;
}
div.slide-right p {
  -moz-animation: 10s slide-right;
  -webkit-animation: 10s slide-right;
  -o-animation: 10s slide-right;
  animation: 10s slide-right;
  margin:0;
}
div.slide-left p {
  -moz-animation: 10s slide-left;
  -webkit-animation: 10s slide-left;
  -o-animation: 10s slide-left;
  animation: 10s slide-left;
  margin:0;
}
@-webkit-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
@-moz-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
 @-o-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
@keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }

@-webkit-keyframes slide-left { from {margin-left: 0%;width: 100%;}
 to {margin-left: -100%;width: 300%;} }
@-moz-keyframes slide-left { from {margin-left: 0%;width: 100%;}
 to {margin-left: -100%;width: 300%;} }
@-o-keyframes slide-left { from {margin-left: 0%;width: 100%;}
 to {margin-left: -100%;width: 300%;} }
@keyframes slide-left { from {margin-left: 0%;width: 100%;}
 to {margin-left: -100%;width: 300%;} }

ED ecco l’HTML che sto usando (per ogni evenienza, sembra che non ci sia niente di sbagliato in esso):

<div class="main slide-right">
	<p>FREE SHIPPING ON DOMESTIC ORDERS OVER $50</p>
</div>

Spero che qualcun altro possa modificare i codici nel collegamento da solo e usarli bene!

Abbiamo davvero apprezzato tutto il piccolo aiuto. Ha proposto gioco di parole.

Grande amore

(@diggeddy)

1 anno, 4 mesi fa

Ciao,

la SEC di animazione deve includere la proprietà del conteggio ricostruito:
Questo può essere impostato a tempo indeterminato.

Questo sito aiuterà:

https://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp

Lanciatore di thread

(@ nar329)

1 anno, 4 mesi fa

Grazie, David!

Ho provato ad aggiungere la proprietà conteggio mangia, ma avevo ancora domande. Ho finito un tendone, che è stato più semplice per me.

Per gli altri che leggono questo, ecco un collegamento alla funzione di selezione: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

Mi è stato utile creare una combinazione di selezione, solo mobile per visualizzare il testo che va da destra a sinistra per gli utenti mobili che visitano il mio sito Web. Ecco il codice php per desktoponly / mobileonly per i nuovi utenti:

add_shortcode('desktoponly', 'desktop_only_shortcode');
function desktop_only_shortcode($atts, $content = null){ 
    if( !wp_is_mobile() ){ 
        return wpautop( do_shortcode( $content ) ); 
    } else {
        return null; 
    } 
}
add_shortcode('mobileonly', 'mobile_only_shortcode');
function mobile_only_shortcode($atts, $content = null){ 
    if( wp_is_mobile() ){ 
        return  wpautop( do_shortcode( $content ) ); 
    } else {
        return null; 
    } 
}

Fondamentalmente, [desktoponly]Il tuo testo / contenuto qui.[/desktoponly] o [mobileonly]Il tuo testo / contenuto qui.[/mobilyonly] è come funziona.

Lanciatore di thread

(@ nar329)

1 anno, 4 mesi fa

Aggiornamento: mentre l’elemento di selezione è semplice e infinitamente curvo, è visivamente instabile nella vista mobile di un telefono reale. Ciò può essere in parte dovuto al carattere del mio marchio, ma la domanda per me non risolve alcun problema con il carattere, la velocità e la leggibilità.

Quindi ho trovato un CSS Marquee che non ho idea di come implementare effettivamente nella mia barra in alto. Ecco il link: https://www.html.am/html-codes/marquees/css-marquee.cfm

La parola è che è molto più mite dell’elemento di selezione.

La mia comprensione è che questo dovrebbe andare in style.css, ma non so come riempire tutti i dettagli e farlo funzionare nella mia barra in alto. Ecco cosa ho fatto finora utilizzando il codice sorgente dal link:

<style style="text/css">
.marquee {	
 overflow: hidden;
 position: relative;
 background-color: #cfb53b;
 color: #ffffff;
}
.marquee p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 1.5;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 5s linear infinite;
 -webkit-animation: scroll-left 5s linear infinite;
 animation: scroll-left 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
</style>

<div class="marquee">
<p>FREE SHIPPING ON DOMESTIC ORDERS OVER 40$ AND INTERNATIONAL ORDERS OVER $60</p>
</div>

Mi aiuti per favore. Se esiste un modo più semplice e migliore per farlo, mi aspetto solo una frase in loop infinito da destra a sinistra nella barra in alto. Ciao a tutti per essere stati così bravi con questo lavoro tecnico !!!

Grande amore

(@diggeddy)

1 anno, 4 mesi fa

Affinché funzioni nella barra in alto è necessario utilizzare un widget HTML. Quindi il tuo segno sarebbe qualcosa del genere:

<div class="marquee">
    <p>Your marquee text</p>
</div>

Lanciatore di thread

(@ nar329)

1 anno, 4 mesi fa

Grazie! L’ho già fatto, ma è stato banale quando ho guardato il mio sito su un telefono reale. Ecco perché ho pubblicato un CSS Marquee nella mia risposta precedente, perché altri hanno il CSS Marquee più fluido, ma non so come usarlo correttamente, ad esempio se va in style.css o che non lo è e di quali dettagli avrei bisogno modificare / specificare affinché funzioni correttamente.

Autore del tema

(@ edge22)

1 anno, 4 mesi fa

Ciao,

C’è qualche possibilità che tu possa configurarlo in modo che possiamo vedere il problema? È difficile sapere cosa c’è che non va senza vederlo di persona.

Fammi sapere 🙂

Lanciatore di thread

(@ nar329)

1 anno, 3 mesi fa

Ciao di nuovo Tom!

Era solo sul mio telefono quando l’ho guardato che era mosso. Sul telefono di qualcun altro era normale vederlo. Ora proverò altre cose e poi ci tornerò.

La vacanza più felice!

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *