WebSite X5Help Center

 
Giampiero P.
Giampiero P.
User

Effetto parallasse con bordi inclinati  it

Autor: Giampiero P.
Visited 2087, Followers 2, Udostępniony 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?

Posted on the
16 ODPOWIEDZI - 2 USEFUL
Mirko Boschetti
Mirko Boschetti
Moderator

cosa intendi per:  "leggermente inclinati"

hai un link di un esempio?

Czytaj więcej
Posted on the from Mirko Boschetti
A. Kris
A. Kris
User

intendi... di inserire un immagine inclinato? 

Czytaj więcej
Posted on the from 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ì :-)

Czytaj więcej
Posted on the from 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

Czytaj więcej
Posted on the from 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 :-)

Czytaj więcej
Posted on the from 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

Czytaj więcej
Posted on the from Maurizio Giglio
A. Kris
A. Kris
User

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

Czytaj więcej
Posted on the from 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...?

Czytaj więcej
Posted on the from 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); }

Czytaj więcej
Posted on the from 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

Czytaj więcej
Posted on the from 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>

Czytaj więcej
Posted on the from Maurizio Giglio
Maurizio Giglio
Maurizio Giglio
User

codice estratto dal template a cui fai riferimento

Czytaj więcej
Posted on the from Maurizio Giglio
Claudio D.
Claudio D.
Moderator
Najlepszy Użytkownik miesiąca 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

Czytaj więcej
Posted on the from Claudio D.
Mirko Boschetti
Mirko Boschetti
Moderator

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

Czytaj więcej
Posted on the from Mirko Boschetti
Maurizio Giglio
Maurizio Giglio
User

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

Czytaj więcej
Posted on the from Maurizio Giglio