Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 23

Discussione: rotateX(-180deg)

  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    643

    rotateX(-180deg)

    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

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,725
    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.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm sp

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    643
    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

  4. #4
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    643

    lettering.js

    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?

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,725
    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.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm sp

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  6. #6
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    643
    ...ho anche trovato un piccolo post a riguardo.... ma ora chiudo, ci risentiamo domani

  7. #7
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    643
    La fanno molto facile anche qui su html.it, apparentemente basta specificare il parametro ‘words‘ per il metodo lettering ()
    codice:
    $(document).ready(function() { $("#demo1 h1").lettering('words'); });


    ma io non so tradurlo nel codice che scritto diversamente:

    codice:
    $(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();
                    });

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,725
    Esattamente qua:
    codice:
    lettering     = $word.lettering();
    nella funzione lettering() devi passare quella stringa come parametro.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm sp

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  9. #9
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    643
    pensavo fosse quello il punto, ma non acchiappa tutta la parola... solo una porzione.

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,725
    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.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm sp

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.