WebSite X5Help Center

 
Giampiero P.
Giampiero P.
User

Effetto parallasse con bordi inclinati  it

Auteur : Giampiero P.
Visité 2089, Followers 2, Partagé 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?

Posté le
16 RéPONSES - 2 UTILE
Mirko Boschetti
Mirko Boschetti
Moderator

cosa intendi per:  "leggermente inclinati"

hai un link di un esempio?

Lire plus
Posté le de Mirko Boschetti
A. Kris
A. Kris
User

intendi... di inserire un immagine inclinato? 

Lire plus
Posté le 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ì :-)

Lire plus
Posté le 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

Lire plus
Posté le 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 :-)

Lire plus
Posté le 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

Lire plus
Posté le de Maurizio Giglio
A. Kris
A. Kris
User

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

Lire plus
Posté le de A. Kris
Giampiero P.
Giampiero P.
User
Auteur

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

Lire plus
Posté le 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); }

Lire plus
Posté le 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

Lire plus
Posté le 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>

Lire plus
Posté le de Maurizio Giglio
Maurizio Giglio
Maurizio Giglio
User

codice estratto dal template a cui fai riferimento

Lire plus
Posté le de Maurizio Giglio
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois 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

Lire plus
Posté le de Claudio D.
Mirko Boschetti
Mirko Boschetti
Moderator

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

Lire plus
Posté le de Mirko Boschetti
Maurizio Giglio
Maurizio Giglio
User

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

Lire plus
Posté le de Maurizio Giglio