WebSite X5Help Center

 
Giampiero P.
Giampiero P.
User

Effetto parallasse con bordi inclinati  it

Autor: Giampiero P.
Visitado 2140, Seguidores 2, Compartilhado 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 em
16 RESPOSTAS - 2 ÚTEIS
Mirko Boschetti
Mirko Boschetti
Moderator

cosa intendi per:  "leggermente inclinati"

hai un link di un esempio?

Ler mais
Publicado em de Mirko Boschetti
A. Kris
A. Kris
User

intendi... di inserire un immagine inclinato? 

Ler mais
Publicado em 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ì :-)

Ler mais
Publicado em 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

Ler mais
Publicado em 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 :-)

Ler mais
Publicado em 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

Ler mais
Publicado em de Maurizio Giglio
A. Kris
A. Kris
User

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

Ler mais
Publicado em 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...?

Ler mais
Publicado em 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); }

Ler mais
Publicado em 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

Ler mais
Publicado em 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>

Ler mais
Publicado em de Maurizio Giglio
Maurizio Giglio
Maurizio Giglio
User

codice estratto dal template a cui fai riferimento

Ler mais
Publicado em de Maurizio Giglio
Claudio D.
Claudio D.
Moderator
Usuário do mês 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

Ler mais
Publicado em de Claudio D.
Mirko Boschetti
Mirko Boschetti
Moderator

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

Ler mais
Publicado em de Mirko Boschetti
Maurizio Giglio
Maurizio Giglio
User

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

Ler mais
Publicado em de Maurizio Giglio