WebSite X5Help Center

 
Giampiero P.
Giampiero P.
User

Effetto parallasse con bordi inclinati  it

Autore: Giampiero P.
Visite 1831, Followers 2, Condiviso 0  

Ciao, sto cercando di realizzare un effetto parallasse a tutto schermo con i bordi superiori e inferiori leggermente inclinati, ma non sono riuscito a rovare il metodo giusto... potete darmi qualche idea sul come realizzarli?

Postato il
16 RISPOSTE - 2 UTILI
Mirko Boschetti
Mirko Boschetti
Moderator

cosa intendi per:  "leggermente inclinati"

hai un link di un esempio?

Leggi di più
Postato il da Mirko Boschetti
A. Kris
A. Kris
User

intendi... di inserire un immagine inclinato? 

Leggi di più
Postato il da A. Kris
Maurizio Giglio
Maurizio Giglio
User

devi creare un'immagine (in .png - con lo sfondo trasparente) con l'angolazione che desideri e poi caricarla nello "stile righe"

ti allego un esempio

io faccio così :-)

Leggi di più
Postato il da Maurizio Giglio
A. Kris
A. Kris
User

vedi la parte bianca che scrolla ? ecco devi creare un jpg bianco inclinato ed inserire , come sfondo in style righe

Leggi di più
Postato il da A. Kris
A. Kris
A. Kris
User

ops stavamo rispondeno nello stesso momento ... ora basta che inserisci il file png dato da Maurizio in stile righe :-)

Leggi di più
Postato il da A. Kris
Maurizio Giglio
Maurizio Giglio
User

comunque la soluzione proposta è molto artigianale. Ti consiglio di scaricare il template che hai segnalato e studiartelo bene bene... per "inclinare" necessitano un paio di codici html da inserire

Leggi di più
Postato il da Maurizio Giglio
A. Kris
A. Kris
User

@Maurizio, se inserisce in stile righe, non servono i codici wink

Leggi di più
Postato il da A. Kris
Giampiero P.
Giampiero P.
User
Autore

Ho gia provato a scaricare il template, ma purtroppo è per la proff. e io ho solo la evo. e non riesco a vedere come è stato fatto... anche perchè vorrei farlo a tutto schermo (proprio come la versione del template) e con la soluzione dell'immagine PNG non sono riuscito a trovare la soluzione... ho sempre le bande laterali vuote... non è che avete un esempio...?

Leggi di più
Postato il da Giampiero P.
Daniele C.
Daniele C.
User

Buonasera,

questo è il codice che ha inserito per inclinare la riga, naturalmente tramite il browser devi individuare la riga che vuoi inclinare.

Con l'editor decidi i colori 

#imPageRow_6{ top: 50px; width: 100%; -webkit-transform: skewY(2deg); -moz-transform: skewY(2deg); -o-transform: skewY(2deg); -ms-transform: skewY(2deg); -sand-transform: skewY(2deg); }

Leggi di più
Postato il da Daniele C.
Daniele C.
Daniele C.
User

naturalmente il mio esempio ha l'header ma nel sito che hai preso a modello hanno lavorato solo con le righe quindi header a zero

Leggi di più
Postato il da Daniele C.
Maurizio Giglio
Maurizio Giglio
User

nella sezione esperto della pagina aggiungi il seguento codice (prima della chiusura del tag HEAD)

<style>
    #imHeader, #imHeaderBg{
        height: 0px;
    }
    
    #imPageRowGraphics_1, #imPageRowGraphics_5, #imPageRowGraphics_14{
        background-attachment: fixed;
    }
    
    /* LINE CSS */
    
    #imPageRow_2{
        top: -50px;
        width: 100%;
        -webkit-transform: skewY(-3deg);
        -moz-transform: skewYskewY(-3deg);
        -o-transform: skewY(-3deg);
        -ms-transform: skewY(-3deg);
        -sand-transform: skewY(-3deg);
    }
    
    #imPageRow_4{
        bottom: -50px;
        z-index: 2;
        width: 100%;
        -webkit-transform: skewY(3deg);
        -moz-transform: skewY(3deg);
        -o-transform: skewY(3deg);
        -ms-transform: skewY(3deg);
        -sand-transform: skewY(3deg);
    }
    
    #imPageRow_5{
        margin-bottom: -90px;
    }
    
    #imPageRow_6{
        top: 50px;
        width: 100%;
        -webkit-transform: skewY(2deg);
        -moz-transform: skewY(2deg);
        -o-transform: skewY(2deg);
        -ms-transform: skewY(2deg);
        -sand-transform: skewY(2deg);
    }
    
    #imPageRow_8{
        bottom: 50px;
        width: 100%;
        -webkit-transform: skewY(-2deg);
        -moz-transform: skewY(-2deg);
        -o-transform: skewY(-2deg);
        -ms-transform: skewY(-2deg);
        -sand-transform: skewY(-2deg);
    }
    
    #imPageRow_13{
        bottom: -50px;
        width: 100%;
        z-index: 2;
        -webkit-transform: skewY(2deg);
        -moz-transform: skewY(2deg);
        -o-transform: skewY(2deg);
        -ms-transform: skewY(2deg);
        -sand-transform: skewY(2deg);
    }
    
    #imPageRowContent_13, #imCell_48{
        width: 100%;
    }
    
    #imCellStyleGraphics_48{
        background-color: white;
    }
    
    /* #imPageRow_15{
        margin-bottom: -50px;
        margin-top: -50px;
        z-index: 3;
        -webkit-transform: rotate(2deg);
        -moz-transform: rotate(2deg);
        -o-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        -sand-transform: rotate(2deg);
    } */
    
    /* END LINE CSS */
    
    /* GALLERY CSS */
    
    @media (min-width: 960px){
        #imPageRowContent_10, #imGroup_3, #imCell_14, #imCell_33, #imCell_30, #imCell_34, #imCell_31, #imCell_35, #imCell_32, #imCell_36, #imCellStyle_14, #imCellStyle_33, #imCellStyle_30, #imCellStyle_34,
        #imCellStyle_31, #imCellStyle_35, #imCellStyle_32, #imCellStyle_36{
            width: 100%;
        }
        
        #imGroup_4, #imGroup_5, #imGroup_6, #imGroup_7{
            width: 25%;
        }
        
        #imObjectImage_14, #imObjectImage_33, #imObjectImage_30, #imObjectImage_34, #imObjectImage_31, #imObjectImage_35, #imObjectImage_32, #imObjectImage_36{
            max-width: 100%;
        }
    }
    
    #imTextObject_01_tab0 > div{
        text-shadow: 2px 2px #000000;
    }
    
    @media (max-width: 959px) and (min-width: 720px){
        #imPageRowContent_10, #imGroup_3, #imCell_14, #imCell_33, #imCell_30, #imCell_34, #imCell_31, #imCell_35, #imCell_32, #imCell_36, #imCellStyle_14, #imCellStyle_33, #imCellStyle_30, #imCellStyle_34,
        #imCellStyle_31, #imCellStyle_35, #imCellStyle_32, #imCellStyle_36{
            width: 100%;
        }
        
        #imGroup_4, #imGroup_5, #imGroup_6, #imGroup_7{
            width: 50%;
        }
    }
    
    @media (max-width: 719px) and (min-width: 0px){
        #imPageRowContent_10, #imGroup_3, #imCell_14, #imCell_33, #imCell_30, #imCell_34, #imCell_31, #imCell_35, #imCell_32, #imCell_36, #imCellStyle_14, #imCellStyle_33, #imCellStyle_30, #imCellStyle_34,
        #imCellStyle_31, #imCellStyle_35, #imCellStyle_32, #imCellStyle_36{
            width: 100%;
        }
        
        #imGroup_4, #imGroup_5, #imGroup_6, #imGroup_7{
            width: 100%;
        }
    }
    
    /* END GALLERY CSS */
    
    /* CONTACT FORM CSS */
    
    #imObjectForm_43_1, #imObjectForm_43_2, #imObjectForm_43_3, #imObjectForm_43_4{
        padding: 15px !important;
    }
    
    #imObjectForm_43_5{
        padding-right: 50% !important;
    }
    
    #imObjectForm_43_submit{
        padding: 15px 25px !important;
    }
    
    #imObjectForm_43_buttonswrap{
        margin-top: -40px !important;
    }
    
    /* END CONTACT FORM CSS */
</style>

Leggi di più
Postato il da Maurizio Giglio
Maurizio Giglio
Maurizio Giglio
User

codice estratto dal template a cui fai riferimento

Leggi di più
Postato il da Maurizio Giglio
Claudio D.
Claudio D.
Moderator
Maurizio Giglio
codice estratto dal template a cui fai riferimento

..."forse" sarebbe meglio "prendere" solo ciò che serve e non proprio tutto-tutto wink

Leggi di più
Postato il da Claudio D.
Mirko Boschetti
Mirko Boschetti
Moderator

anche perchè prendendo tutto, sballa tutto il resto...wink

Leggi di più
Postato il da Mirko Boschetti
Maurizio Giglio
Maurizio Giglio
User

ovviamente!!! Il codice è quello integrale da personalizzare in relazione alle proprie esigenze ;-) 

Leggi di più
Postato il da Maurizio Giglio