WebSite X5Help Center

 
Giampiero P.
Giampiero P.
User

Effetto parallasse con bordi inclinati  it

Autor: Giampiero P.
Visitado 2097, Followers 2, Compartido 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?

Publicado en
16 RESPUESTAS - 2 úTIL
Mirko Boschetti
Mirko Boschetti
Moderator

cosa intendi per:  "leggermente inclinati"

hai un link di un esempio?

Leer más
Publicado en de Mirko Boschetti
A. Kris
A. Kris
User

intendi... di inserire un immagine inclinato? 

Leer más
Publicado en de 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ì :-)

Leer más
Publicado en de 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

Leer más
Publicado en de 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 :-)

Leer más
Publicado en de 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

Leer más
Publicado en de Maurizio Giglio
A. Kris
A. Kris
User

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

Leer más
Publicado en de A. Kris
Giampiero P.
Giampiero P.
User
Autor

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...?

Leer más
Publicado en de 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); }

Leer más
Publicado en de 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

Leer más
Publicado en de 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>

Leer más
Publicado en de Maurizio Giglio
Maurizio Giglio
Maurizio Giglio
User

codice estratto dal template a cui fai riferimento

Leer más
Publicado en de Maurizio Giglio
Claudio D.
Claudio D.
Moderator
Usuario del mes IT
Maurizio Giglio
codice estratto dal template a cui fai riferimento

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

Leer más
Publicado en de Claudio D.
Mirko Boschetti
Mirko Boschetti
Moderator

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

Leer más
Publicado en de Mirko Boschetti
Maurizio Giglio
Maurizio Giglio
User

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

Leer más
Publicado en de Maurizio Giglio