rotateX(-180deg)

[stardom]

Buongiorno! Sto cercando di replicare l'effetto (demo 4, effetto Airport) dimostrato in questo vecchio tutorial. Il source code è scaricabile e molto semplice da investigare in locale.
La prima cosa che noterete non funzionare è proprio il lettering, che ruota ma copia la lettera "a specchio".
La seconda cosa che vorrei è implementare delle parole intere invece che lettere singole.
Qualcuno può aiutarmi in tal senso? Mi scuso per il titolo troppo generico. Grazie

[KillerWorm]

Ciao, per il primo punto ho visto che nella pagina demo che sta online è presente un foglio di stile leggermente diverso da quello contenuto nello zip (tra le varie cose è presente qualche regola relativa alla gestione della prospettiva 3d). Impostano infatti questo file css al posto di quello scaricato, il problema sembra risolversi.

Qui il file css che viene utilizzato online:
https://tympanus.net/Tutorials/Typog...css/style4.css

Prova a sostituirlo a quello che sta nella carella css dello zip scaricato.

Per il secondo punto la cosa mi pare un po' complicata da quel che ho visto. Non che non sia possibile ma vedo che vengono usate librerie JavaScript per gestire lo split delle lettere. Suppongo si debba mettere mano a diverse cose nello script per fare ciò che chiedi. Al momento non ho approfondito.

[stardom]

Grazie per la dritta sul css, non ci avevo pensato. Per il secondo problema, anche io la vedo difficile, soprattutto perchè vorrei implementare questo menu in un sito Wordpress

[stardom]

Ho fatto un po' di ricerca e sembra che la libreria lettering.js permetta facilmente di utilizzare parole invece che lettere.
Qualcuno puà aiutarmi ad adattare il codice all'effetto "Airport" da me desiderato?

[KillerWorm]

Ho fatto un po' di ricerca e sembra che la libreria lettering.js permetta facilmente di utilizzare parole invece che lettere.

Perfetto, è già un primo buon punto da cui partire.

Magari imposta intanto lo script per l'uso di parole. Hai visto come si fa? Hai già provato?

Vediamo poi come risolvere le eventuali problematiche del caso.

[stardom]

...ho anche trovato un piccolo post a riguardo.... ma ora chiudo, ci risentiamo domani

[stardom]

La fanno molto facile anche qui su html.it, apparentemente basta specificare il parametro ‘words‘ per il metodo lettering ()

$(document).ready(function() { $("#demo1 h1").lettering('words'); });

ma io non so tradurlo nel codice che è scritto diversamente:

$(function() {
                    var $word        = $("#letter-container h2 a"),
                        lettering     = $word.lettering();
                    // extend the lettering plugin    
                    var extensionPlugin     = {
                        wrapper    : function() {
                            var $w    = this;
                            $w.children('span').each( function(i) {
                                var $el    = $(this),
                                    t     = $el.text();
                                if( t !== ' ' ) {    
                                    var $newStruc    = $('<div class="twrap"><div class="tbg"><span>' + t + '</span></div><div class="tup"><div class="tfront"><span>' + t + '</span></div><div class="tback"><span>' + t + '</span></div></div><div class="tdown"><span>' + t + '</span></div></div>');
                                    $newStruc.insertAfter( $el );
                                    $el.remove();
                                }
                                
                            });
                        }
                    };
                    $.extend( true, lettering, extensionPlugin );
                    lettering.wrapper();
                });

[KillerWorm]

Esattamente qua:

lettering     = $word.lettering();

nella funzione lettering() devi passare quella stringa come parametro.

[stardom]

pensavo fosse quello il punto, ma non acchiappa tutta la parola... solo una porzione.

[KillerWorm]

pensavo fosse quello il punto, ma non acchiappa tutta la parola... solo

No no, è proprio quello il punto, ma quella è la parte più semplice; ora arriva la parte difficile: adeguare tutto il CSS

Non prende tutta la parola perché c'è una larghezza fissa... non ti nego che non è così semplice arrivare ad ottenere ciò che stai chiedendo se non sai dove mettere il mouse. Io so già come risolvere, ma preferirei che ci arrivassi tu; nel caso posso suggerirti i vari passaggi man mano che ti porti avanti.