Effet sur un div

Phinolex
Javascript

Bonjour à tous,

J'ai récemment réalisé un slider.

Je souhaiterais réaliser un parchemin qui se déplie lorsque celui-ci est au centre de la page puis qui se replie lorsque celui-ci n'est plus au centre de la page.

Pour cela, j'aimerais savoir comme faire pour exécuter un code css sur ma div "parchemin" lorsqu'il est au centre de la page, puis dans un deuxième temps, exécuter un autre code css sur ma div "parchemin" lorsqu'il n'est plus au centre.

J'ai longtemps recherché sur internet pour pouvoir réaliser ce que je souhaite, mais je suis à bout de force. :(

Merci d'avance pour vos futurs aides.

13 réponses

Benjamin Derepas

Un petit bout de code pour expliquer au mieux ton problème ? Ou un schemas peut être ?

Phinolex
Auteur

Bonjour,

Voici un schéma de ce que je souhaite faire.

L'effet css3 d'ouverture du parchemin ( l'effet n'est pas répété ): 

.parchment-page-content {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    perspective: 1400px;
    -webkit-perspective: 1400px;
    -moz-perspective: 1400px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    position: absolute;
    background-color: transparent;
}
.parchment-page-wrapper {
    position: absolute;
    transform: translateZ(0px);
    -webkit-transform: translateZ(0px);
    -moz-transform: translateZ(0px);
}
.parchment-page-size {
    width: 274px;
    height: 172px;
        margin-top: -40px;
            margin-left: -80px;
}
.parchment-img-btfe {
    position: absolute;
    width: 56px;
    height: 170px;
    left: 217px;
    top: 1px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform: translate3d(-80px, 1px, 0px);
    -webkit-transform: translate3d(-80px, 1px, 0px);
    -moz-transform: translate3d(-80px, 1px, 0px);
}
.parchment-img-9zpq {
    position: absolute;
    width: 55px;
    height: 170px;
    left: 82px;
    top: 2px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
}
#parchmentsite.parchment-play-animation .parchment-gen-1ptrparchmentanimation {
    animation: parchment-gen-1ptrparchmentanimation_parchment-keyframes 0.3s linear 0s 1 normal forwards;
    -webkit-animation: parchment-gen-1ptrparchmentanimation_parchment-keyframes 0.3s linear 0s 1 normal forwards;
    -moz-animation: parchment-gen-1ptrparchmentanimation_parchment-keyframes 0.3s linear 0s 1 normal forwards;
}
#parchmentsite.parchment-play-animation .parchment-gen-upgdparchmentanimation {
    animation: parchment-gen-upgdparchmentanimation_parchment-keyframes 0.3s linear 0s 1 normal forwards;
    -webkit-animation: parchment-gen-upgdparchmentanimation_parchment-keyframes 0.3s linear 0s 1 normal forwards;
    -moz-animation: parchment-gen-upgdparchmentanimation_parchment-keyframes 0.3s linear 0s 1 normal forwards;
}
.parchment-img-rw3j {
    position: absolute;
    height: 172px;
    left: 104px;
    top: 2px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    width: 54px;
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
}
#parchmentsite.parchment-play-animation .parchment-gen-10deparchmentanimation {
    animation: parchment-gen-10deparchmentanimation_parchment-keyframes 0.3s linear 0s 1 normal forwards;
    -webkit-animation: parchment-gen-10deparchmentanimation_parchment-keyframes 0.3s linear 0s 1 normal forwards;
    -moz-animation: parchment-gen-10deparchmentanimation_parchment-keyframes 0.3s linear 0s 1 normal forwards;
}
.parchment-p-1gtg {
    position: absolute;
    font-family: 'Times New Roman';
    color: rgb(0, 0, 0);
    border: 3px none rgb(88, 66, 54);
    height: 56px;
    top: 76px;
    width: 144px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    opacity: 0;
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    left: 115px;
}
#parchmentsite.parchment-play-animation .parchment-gen-1l8vparchmentanimation {
    animation: parchment-gen-1l8vparchmentanimation_parchment-keyframes 0.3s linear 0s 1 normal forwards;
    -webkit-animation: parchment-gen-1l8vparchmentanimation_parchment-keyframes 0.3s linear 0s 1 normal forwards;
    -moz-animation: parchment-gen-1l8vparchmentanimation_parchment-keyframes 0.3s linear 0s 1 normal forwards;
}
@keyframes parchment-gen-10deparchmentanimation_parchment-keyframes {
    0% {
        width: 54px;
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: linear;
    }
    100% {
        width: 254px;
        transform: translate3d(-94px, -3px, 0px);
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchment-gen-10deparchmentanimation_parchment-keyframes {
    0% {
        width: 54px;
        -webkit-transform: translate3d(0px, 0px, 0px);
        -webkit-animation-timing-function: linear;
    }
    100% {
        width: 254px;
        -webkit-transform: translate3d(-94px, -3px, 0px);
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchment-gen-10deparchmentanimation_parchment-keyframes {
    0% {
        width: 54px;
        -moz-transform: translate3d(0px, 0px, 0px);
        -moz-animation-timing-function: linear;
    }
    100% {
        width: 254px;
        -moz-transform: translate3d(-94px, -3px, 0px);
        -moz-animation-timing-function: linear;
    }
}
@keyframes parchment-gen-1ptrparchmentanimation_parchment-keyframes {
    0% {
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: linear;
    }
    100% {
        transform: translate3d(-57px, -1px, 0px);
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchment-gen-1ptrparchmentanimation_parchment-keyframes {
    0% {
        -webkit-transform: translate3d(0px, 0px, 0px);
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translate3d(-57px, -1px, 0px);
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchment-gen-1ptrparchmentanimation_parchment-keyframes {
    0% {
        -moz-transform: translate3d(0px, 0px, 0px);
        -moz-animation-timing-function: linear;
    }
    100% {
        -moz-transform: translate3d(-57px, -1px, 0px);
        -moz-animation-timing-function: linear;
    }
}
@keyframes parchment-gen-1l8vparchmentanimation_parchment-keyframes {
    0% {
        opacity: 0;
        transform: translate3d(0px, 0px, 0px);
        left: 115px;
        animation-timing-function: linear;
    }
    100% {
        opacity: 1;
        transform: translate3d(-20px, -3px, 0px);
        left: 128px;
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchment-gen-1l8vparchmentanimation_parchment-keyframes {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0px, 0px, 0px);
        left: 115px;
        -webkit-animation-timing-function: linear;
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, -3px, 0px);
        left: 128px;
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchment-gen-1l8vparchmentanimation_parchment-keyframes {
    0% {
        opacity: 0;
        -moz-transform: translate3d(0px, 0px, 0px);
        left: 115px;
        -moz-animation-timing-function: linear;
    }
    100% {
        opacity: 1;
        -moz-transform: translate3d(-20px, -3px, 0px);
        left: 128px;
        -moz-animation-timing-function: linear;
    }
}
@keyframes parchment-gen-1l8vparchmentanimation_parchment-keyframes_label-1 {
    0% {
        opacity: 0;
        transform: translate3d(0px, 0px, 0px);
        left: 115px;
        animation-timing-function: linear;
    }
    100% {
        opacity: 1;
        transform: translate3d(-20px, -3px, 0px);
        left: 128px;
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchment-gen-1l8vparchmentanimation_parchment-keyframes_label-1 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0px, 0px, 0px);
        left: 115px;
        -webkit-animation-timing-function: linear;
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, -3px, 0px);
        left: 128px;
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchment-gen-1l8vparchmentanimation_parchment-keyframes_label-1 {
    0% {
        opacity: 0;
        -moz-transform: translate3d(0px, 0px, 0px);
        left: 115px;
        -moz-animation-timing-function: linear;
    }
    100% {
        opacity: 1;
        -moz-transform: translate3d(-20px, -3px, 0px);
        left: 128px;
        -moz-animation-timing-function: linear;
    }
}
#parchmentsite.label-1 .parchment-gen-1l8vparchmentanimation {
    animation: parchment-gen-1l8vparchmentanimation_parchment-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
    -webkit-animation: parchment-gen-1l8vparchmentanimation_parchment-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
    -moz-animation: parchment-gen-1l8vparchmentanimation_parchment-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
}
@keyframes parchment-gen-1ptrparchmentanimation_parchment-keyframes_label-1 {
    0% {
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: linear;
    }
    100% {
        transform: translate3d(-57px, -1px, 0px);
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchment-gen-1ptrparchmentanimation_parchment-keyframes_label-1 {
    0% {
        -webkit-transform: translate3d(0px, 0px, 0px);
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translate3d(-57px, -1px, 0px);
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchment-gen-1ptrparchmentanimation_parchment-keyframes_label-1 {
    0% {
        -moz-transform: translate3d(0px, 0px, 0px);
        -moz-animation-timing-function: linear;
    }
    100% {
        -moz-transform: translate3d(-57px, -1px, 0px);
        -moz-animation-timing-function: linear;
    }
}
#parchmentsite.label-1 .parchment-gen-1ptrparchmentanimation {
    animation: parchment-gen-1ptrparchmentanimation_parchment-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
    -webkit-animation: parchment-gen-1ptrparchmentanimation_parchment-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
    -moz-animation: parchment-gen-1ptrparchmentanimation_parchment-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
}
#parchmentsite.label-1 .parchment-gen-upgdparchmentanimation {
    animation: parchment-gen-upgdparchmentanimation_parchment-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
    -webkit-animation: parchment-gen-upgdparchmentanimation_parchment-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
    -moz-animation: parchment-gen-upgdparchmentanimation_parchment-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
}
@keyframes parchment-gen-10deparchmentanimation_parchment-keyframes_label-1 {
    0% {
        width: 54px;
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: linear;
    }
    100% {
        width: 254px;
        transform: translate3d(-94px, -3px, 0px);
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchment-gen-10deparchmentanimation_parchment-keyframes_label-1 {
    0% {
        width: 54px;
        -webkit-transform: translate3d(0px, 0px, 0px);
        -webkit-animation-timing-function: linear;
    }
    100% {
        width: 254px;
        -webkit-transform: translate3d(-94px, -3px, 0px);
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchment-gen-10deparchmentanimation_parchment-keyframes_label-1 {
    0% {
        width: 54px;
        -moz-transform: translate3d(0px, 0px, 0px);
        -moz-animation-timing-function: linear;
    }
    100% {
        width: 254px;
        -moz-transform: translate3d(-94px, -3px, 0px);
        -moz-animation-timing-function: linear;
    }
}
#parchmentsite.label-1 .parchment-gen-10deparchmentanimation {
    animation: parchment-gen-10deparchmentanimation_parchment-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
    -webkit-animation: parchment-gen-10deparchmentanimation_parchment-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
    -moz-animation: parchment-gen-10deparchmentanimation_parchment-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
}
@keyframes parchment-gen-upgdparchmentanimation_parchment-keyframes {
    0% {
        transform: translate3d(-80px, 1px, 0px);
        animation-timing-function: linear;
    }
    100% {
        transform: translate3d(-10px, 0px, 0px);
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchment-gen-upgdparchmentanimation_parchment-keyframes {
    0% {
        -webkit-transform: translate3d(-80px, 1px, 0px);
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translate3d(-10px, 0px, 0px);
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchment-gen-upgdparchmentanimation_parchment-keyframes {
    0% {
        -moz-transform: translate3d(-80px, 1px, 0px);
        -moz-animation-timing-function: linear;
    }
    100% {
        -moz-transform: translate3d(-10px, 0px, 0px);
        -moz-animation-timing-function: linear;
    }
}
@keyframes parchment-gen-upgdparchmentanimation_parchment-keyframes_label-1 {
    0% {
        transform: translate3d(-80px, 1px, 0px);
        animation-timing-function: linear;
    }
    100% {
        transform: translate3d(-10px, 0px, 0px);
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchment-gen-upgdparchmentanimation_parchment-keyframes_label-1 {
    0% {
        -webkit-transform: translate3d(-80px, 1px, 0px);
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translate3d(-10px, 0px, 0px);
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchment-gen-upgdparchmentanimation_parchment-keyframes_label-1 {
    0% {
        -moz-transform: translate3d(-80px, 1px, 0px);
        -moz-animation-timing-function: linear;
    }
    100% {
        -moz-transform: translate3d(-10px, 0px, 0px);
        -moz-animation-timing-function: linear;
    }
}

Puis l'effet css3 de fermeture ( l'effet n'est pas répété ) : 

.parchmentsiteclose-page-content {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    perspective: 1400px;
    -webkit-perspective: 1400px;
    -moz-perspective: 1400px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    position: absolute;
    background-color: transparent;
}
.parchmentsiteclose-page-wrapper {
    position: absolute;
    transform: translateZ(0px);
    -webkit-transform: translateZ(0px);
    -moz-transform: translateZ(0px);
}
.parchmentsiteclose-page-size {
    width: 274px;
    height: 172px;
}
.parchmentsiteclose-img-btfe {
    position: absolute;
    width: 56px;
    height: 170px;
    left: 217px;
    top: 1px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform: translate3d(-10px, 0px, 0px);
    -webkit-transform: translate3d(-10px, 0px, 0px);
    -moz-transform: translate3d(-10px, 0px, 0px);
}
.parchmentsiteclose-img-9zpq {
    position: absolute;
    width: 55px;
    height: 170px;
    left: 82px;
    top: 2px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform: translate3d(-57px, -1px, 0px);
    -webkit-transform: translate3d(-57px, -1px, 0px);
    -moz-transform: translate3d(-57px, -1px, 0px);
}
#closeparchment.parchmentsiteclose-play-animation .parchmentsiteclose-gen-upgdparchmentsitecloseanimation {
    animation: parchmentsiteclose-gen-upgdparchmentsitecloseanimation_parchmentsiteclose-keyframes 0.3s linear 0s 1 normal forwards;
    -webkit-animation: parchmentsiteclose-gen-upgdparchmentsitecloseanimation_parchmentsiteclose-keyframes 0.3s linear 0s 1 normal forwards;
    -moz-animation: parchmentsiteclose-gen-upgdparchmentsitecloseanimation_parchmentsiteclose-keyframes 0.3s linear 0s 1 normal forwards;
}
.parchmentsiteclose-img-rw3j {
    position: absolute;
    height: 172px;
    left: 104px;
    top: 2px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    width: 254px;
    transform: translate3d(-94px, -3px, 0px);
    -webkit-transform: translate3d(-94px, -3px, 0px);
    -moz-transform: translate3d(-94px, -3px, 0px);
}
#closeparchment.parchmentsiteclose-play-animation .parchmentsiteclose-gen-10deparchmentsitecloseanimation {
    animation: parchmentsiteclose-gen-10deparchmentsitecloseanimation_parchmentsiteclose-keyframes 0.3s linear 0s 1 normal forwards;
    -webkit-animation: parchmentsiteclose-gen-10deparchmentsitecloseanimation_parchmentsiteclose-keyframes 0.3s linear 0s 1 normal forwards;
    -moz-animation: parchmentsiteclose-gen-10deparchmentsitecloseanimation_parchmentsiteclose-keyframes 0.3s linear 0s 1 normal forwards;
}
#closeparchment.label-1 .parchmentsiteclose-gen-upgdparchmentsitecloseanimation {
    animation: parchmentsiteclose-gen-upgdparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
    -webkit-animation: parchmentsiteclose-gen-upgdparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
    -moz-animation: parchmentsiteclose-gen-upgdparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
}
.parchmentsiteclose-p-1gtg {
    position: absolute;
    font-family: 'Times New Roman';
    color: rgb(0, 0, 0);
    border: 3px none rgb(88, 66, 54);
    height: 56px;
    top: 76px;
    width: 144px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    left: 115px;
}
#closeparchment.label-1 .parchmentsiteclose-gen-10deparchmentsitecloseanimation {
    animation: parchmentsiteclose-gen-10deparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
    -webkit-animation: parchmentsiteclose-gen-10deparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
    -moz-animation: parchmentsiteclose-gen-10deparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
}
@keyframes parchmentsiteclose-gen-10deparchmentsitecloseanimation_parchmentsiteclose-keyframes {
    0% {
        width: 254px;
        transform: translate3d(-94px, -3px, 0px);
        animation-timing-function: linear;
    }
    100% {
        width: 54px;
        transform: translate3d(9px, -3px, 0px);
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchmentsiteclose-gen-10deparchmentsitecloseanimation_parchmentsiteclose-keyframes {
    0% {
        width: 254px;
        -webkit-transform: translate3d(-94px, -3px, 0px);
        -webkit-animation-timing-function: linear;
    }
    100% {
        width: 54px;
        -webkit-transform: translate3d(9px, -3px, 0px);
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchmentsiteclose-gen-10deparchmentsitecloseanimation_parchmentsiteclose-keyframes {
    0% {
        width: 254px;
        -moz-transform: translate3d(-94px, -3px, 0px);
        -moz-animation-timing-function: linear;
    }
    100% {
        width: 54px;
        -moz-transform: translate3d(9px, -3px, 0px);
        -moz-animation-timing-function: linear;
    }
}
@keyframes parchmentsiteclose-gen-10deparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 {
    0% {
        width: 254px;
        transform: translate3d(-94px, -3px, 0px);
        animation-timing-function: linear;
    }
    100% {
        width: 54px;
        transform: translate3d(9px, -3px, 0px);
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchmentsiteclose-gen-10deparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 {
    0% {
        width: 254px;
        -webkit-transform: translate3d(-94px, -3px, 0px);
        -webkit-animation-timing-function: linear;
    }
    100% {
        width: 54px;
        -webkit-transform: translate3d(9px, -3px, 0px);
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchmentsiteclose-gen-10deparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 {
    0% {
        width: 254px;
        -moz-transform: translate3d(-94px, -3px, 0px);
        -moz-animation-timing-function: linear;
    }
    100% {
        width: 54px;
        -moz-transform: translate3d(9px, -3px, 0px);
        -moz-animation-timing-function: linear;
    }
}
@keyframes parchmentsiteclose-gen-upgdparchmentsitecloseanimation_parchmentsiteclose-keyframes {
    0% {
        transform: translate3d(-10px, 0px, 0px);
        animation-timing-function: linear;
    }
    100% {
        transform: translate3d(-72px, 0px, 0px);
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchmentsiteclose-gen-upgdparchmentsitecloseanimation_parchmentsiteclose-keyframes {
    0% {
        -webkit-transform: translate3d(-10px, 0px, 0px);
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translate3d(-72px, 0px, 0px);
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchmentsiteclose-gen-upgdparchmentsitecloseanimation_parchmentsiteclose-keyframes {
    0% {
        -moz-transform: translate3d(-10px, 0px, 0px);
        -moz-animation-timing-function: linear;
    }
    100% {
        -moz-transform: translate3d(-72px, 0px, 0px);
        -moz-animation-timing-function: linear;
    }
}
@keyframes parchmentsiteclose-gen-upgdparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 {
    0% {
        transform: translate3d(-10px, 0px, 0px);
        animation-timing-function: linear;
    }
    100% {
        transform: translate3d(-72px, 0px, 0px);
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchmentsiteclose-gen-upgdparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 {
    0% {
        -webkit-transform: translate3d(-10px, 0px, 0px);
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translate3d(-72px, 0px, 0px);
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchmentsiteclose-gen-upgdparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 {
    0% {
        -moz-transform: translate3d(-10px, 0px, 0px);
        -moz-animation-timing-function: linear;
    }
    100% {
        -moz-transform: translate3d(-72px, 0px, 0px);
        -moz-animation-timing-function: linear;
    }
}
@keyframes parchmentsiteclose-gen-1ptrparchmentsitecloseanimation_parchmentsiteclose-keyframes {
    0% {
        transform: translate3d(-57px, -1px, 0px);
        animation-timing-function: linear;
    }
    100% {
        transform: translate3d(0px, -1px, 0px);
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchmentsiteclose-gen-1ptrparchmentsitecloseanimation_parchmentsiteclose-keyframes {
    0% {
        -webkit-transform: translate3d(-57px, -1px, 0px);
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translate3d(0px, -1px, 0px);
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchmentsiteclose-gen-1ptrparchmentsitecloseanimation_parchmentsiteclose-keyframes {
    0% {
        -moz-transform: translate3d(-57px, -1px, 0px);
        -moz-animation-timing-function: linear;
    }
    100% {
        -moz-transform: translate3d(0px, -1px, 0px);
        -moz-animation-timing-function: linear;
    }
}
#closeparchment.parchmentsiteclose-play-animation .parchmentsiteclose-gen-1ptrparchmentsitecloseanimation {
    animation: parchmentsiteclose-gen-1ptrparchmentsitecloseanimation_parchmentsiteclose-keyframes 0.3s linear 0s 1 normal forwards;
    -webkit-animation: parchmentsiteclose-gen-1ptrparchmentsitecloseanimation_parchmentsiteclose-keyframes 0.3s linear 0s 1 normal forwards;
    -moz-animation: parchmentsiteclose-gen-1ptrparchmentsitecloseanimation_parchmentsiteclose-keyframes 0.3s linear 0s 1 normal forwards;
}
@keyframes parchmentsiteclose-gen-1ptrparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 {
    0% {
        transform: translate3d(-57px, -1px, 0px);
        animation-timing-function: linear;
    }
    100% {
        transform: translate3d(0px, -1px, 0px);
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchmentsiteclose-gen-1ptrparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 {
    0% {
        -webkit-transform: translate3d(-57px, -1px, 0px);
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translate3d(0px, -1px, 0px);
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchmentsiteclose-gen-1ptrparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 {
    0% {
        -moz-transform: translate3d(-57px, -1px, 0px);
        -moz-animation-timing-function: linear;
    }
    100% {
        -moz-transform: translate3d(0px, -1px, 0px);
        -moz-animation-timing-function: linear;
    }
}
#closeparchment.label-1 .parchmentsiteclose-gen-1ptrparchmentsitecloseanimation {
    animation: parchmentsiteclose-gen-1ptrparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
    -webkit-animation: parchmentsiteclose-gen-1ptrparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
    -moz-animation: parchmentsiteclose-gen-1ptrparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 0.3s linear -0.3s 1 normal forwards;
}
@keyframes parchmentsiteclose-gen-1l8vparchmentsitecloseanimation_parchmentsiteclose-keyframes {
    0% {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px);
        left: 115px;
        animation-timing-function: linear;
    }
    100% {
        opacity: 0;
        transform: translate3d(-20px, -3px, 0px);
        left: 128px;
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchmentsiteclose-gen-1l8vparchmentsitecloseanimation_parchmentsiteclose-keyframes {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0px, 0px, 0px);
        left: 115px;
        -webkit-animation-timing-function: linear;
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-20px, -3px, 0px);
        left: 128px;
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchmentsiteclose-gen-1l8vparchmentsitecloseanimation_parchmentsiteclose-keyframes {
    0% {
        opacity: 1;
        -moz-transform: translate3d(0px, 0px, 0px);
        left: 115px;
        -moz-animation-timing-function: linear;
    }
    100% {
        opacity: 0;
        -moz-transform: translate3d(-20px, -3px, 0px);
        left: 128px;
        -moz-animation-timing-function: linear;
    }
}
#closeparchment.parchmentsiteclose-play-animation .parchmentsiteclose-gen-1l8vparchmentsitecloseanimation {
    animation: parchmentsiteclose-gen-1l8vparchmentsitecloseanimation_parchmentsiteclose-keyframes 0.2s linear 0s 1 normal forwards;
    -webkit-animation: parchmentsiteclose-gen-1l8vparchmentsitecloseanimation_parchmentsiteclose-keyframes 0.2s linear 0s 1 normal forwards;
    -moz-animation: parchmentsiteclose-gen-1l8vparchmentsitecloseanimation_parchmentsiteclose-keyframes 0.2s linear 0s 1 normal forwards;
}
@keyframes parchmentsiteclose-gen-1l8vparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 {
    0% {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px);
        left: 115px;
        animation-timing-function: linear;
    }
    100% {
        opacity: 0;
        transform: translate3d(-20px, -3px, 0px);
        left: 128px;
        animation-timing-function: linear;
    }
}
@-webkit-keyframes parchmentsiteclose-gen-1l8vparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0px, 0px, 0px);
        left: 115px;
        -webkit-animation-timing-function: linear;
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-20px, -3px, 0px);
        left: 128px;
        -webkit-animation-timing-function: linear;
    }
}
@-moz-keyframes parchmentsiteclose-gen-1l8vparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 {
    0% {
        opacity: 1;
        -moz-transform: translate3d(0px, 0px, 0px);
        left: 115px;
        -moz-animation-timing-function: linear;
    }
    100% {
        opacity: 0;
        -moz-transform: translate3d(-20px, -3px, 0px);
        left: 128px;
        -moz-animation-timing-function: linear;
    }
}
#closeparchment.label-1 .parchmentsiteclose-gen-1l8vparchmentsitecloseanimation {
    animation: parchmentsiteclose-gen-1l8vparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 0.2s linear -0.2s 1 normal forwards;
    -webkit-animation: parchmentsiteclose-gen-1l8vparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 0.2s linear -0.2s 1 normal forwards;
    -moz-animation: parchmentsiteclose-gen-1l8vparchmentsitecloseanimation_parchmentsiteclose-keyframes_label-1 0.2s linear -0.2s 1 normal forwards;
}

Ensuite, concernant la partie HTML concerné, voici le code :

Pour l'effet ouverture du parchemin : 

<div is="parchment-pagedeck" class="parchment-page-container parchment-pagedeck" id="pagedeck"><div is="parchment-page" id="parchmentsite" class="parchment-page-wrapper parchment-page-size parchment-lightbox parchment-page parchment-play-animation" data-parchment-width="274px" data-parchment-height="172px">
             <div class="parchment-page-content parchment-page-size">
             <img is="parchment-image" s id="parchmentmiddle" class="parchment-img-rw3j parchment-gen-10deparchmentanimation" src="images/Templates/parchment middle.png">
             <img is="parchment-image"  id="parchmentright" class="parchment-img-btfe parchment-gen-upgdparchmentanimation" src="images/Templates/parchment-right.png">
             <img is="parchment-image"  id="parchmentleft" class="parchment-img-9zpq parchment-gen-1ptrparchmentanimation" src="images/Templates/parchment-left.png">
             <p class="parchment-p-1gtg parchment-gen-1l8vparchmentanimation" id="texte-middle">Texte ici</p>
            </div>

Puis pour l'effet fermeture du parchemin : 

<div is="parchmentsiteclose-pagedeck" class="parchmentsiteclose-page-container parchmentsiteclose-pagedeck" id="pagedeck"><div is="parchmentsiteclose-page" id="closeparchment" class="parchmentsiteclose-page-wrapper parchmentsiteclose-page-size parchmentsiteclose-lightbox parchmentsiteclose-page parchmentsiteclose-play-animation" data-parchmentsiteclose-width="274px" data-parchmentsiteclose-height="172px">
        <div class="parchmentsiteclose-page-content parchmentsiteclose-page-size">
          <img is="parchmentsiteclose-image" source="parchment_middle.png" id="parchmentmiddle" class="parchmentsiteclose-img-rw3j parchmentsiteclose-gen-10deparchmentsitecloseanimation" src="./index_files/parchment_middle.png">
          <img is="parchmentsiteclose-image" source="parchment-right.png" id="parchmentright" class="parchmentsiteclose-img-btfe parchmentsiteclose-gen-upgdparchmentsitecloseanimation" src="./index_files/parchment-right.png">
          <img is="parchmentsiteclose-image" source="parchment-left.png" id="parchmentleft" class="parchmentsiteclose-img-9zpq parchmentsiteclose-gen-1ptrparchmentsitecloseanimation" src="./index_files/parchment-left.png">
          <p class="parchmentsiteclose-p-1gtg parchmentsiteclose-gen-1l8vparchmentsitecloseanimation" id="texte-middle">Texte ici</p>

Concernant le slider, j'ai pris les codes sources de ce projet :
https://github.com/nolimits4web/Swiper/archive/v3.2.7.zip

J'ai pris l'effet numéro 7 dans Démos -> 07.

Comment puis-je réaliser l'effet que je souhaite faire? :c

Benjamin Derepas

Ma question risque de parraitre bête, mais as tu créer le code (les keyframe, mise en place des attr, le poly etc) ou as tu copier/coller le code du dépot github ?
Car on parle ici de notions de DOM et de CSS 3 très avancé, si tes notions sont limites, laisse tout de suite tomber pour passer sur quelque chose de plus simple

Phinolex
Auteur

Bonsoir,
Merci de m'avoir répondu. :)

Pour répondre à votre question, j'ai copié/collé le code du dépot github.

Concernant l'HTML5 et le CSS3 j'ai des connaissances mais sur celles du Javascript, elles sont beaucoup plus limitées et pour autant je ne conçoit pas laisser tomber d'ou mon échange sur ce forum.

Pour revenir sur ma question : Comment puis-je procéder pour faire en sorte que le parchemin lorsque celui-ci est au centre soit ouvert, et le fermer si celui-ci n'est plus au centre ? >.<"

Exellente soirée à vous. ;)

Benjamin Derepas

Via javascript. Tu selectionne ton élement, tu détecte sa position par rapport à la fenetre, s'il est centrer, tu lui ajoute l'animation/ la classe pour qu'il s'ouvre

Benjamin Derepas

Comme tout élément d'un slider, l'item doit surement avoir une class qui s'ajoute/se retire lorsqu'il est actif

Phinolex
Auteur

Bonsoir,

Justement, comment puis-je faire pour detecter la position de mon élément en javascript pour savoir si il est centré ?

J'ai essayé plusieurs techniques comme par exemple : 

if(element.style.margin == '0 auto'){
L'effet voulu
}

else {
l'effet voulu
}

Mais cela ne fonctionne pas puisque les margin ne sont pas en auto dans le slider. ;x J'ai pas d'autres idées niveau code.

J'ai beau chercher dans les codes du slider mais je ne trouve pas le fameux "'item" qui doit surement avoir une class qui s'ajoute et se retire lorsqu'il est actif. :(

Quelqu'un aurait une solution s'il vous plaît ?

Phinolex
Auteur

Bonsoir,

Personne ne peut m'aider ? :c

Phinolex
Auteur

Comment puis-je faire pour pouvoir executer un code css si ma div = "x"px ?

Soit x = cordonné de la div.

Sam Uel

Bonjour,

Comme l'a dit Benjamin Derepas, il y a de grande chance pour que tu es une classe sur ta balise img lorsque ton slider est dans un navigateur (et pas juste en regardant les sources, il y a du javascript aussi non ?)

Y a t'il une version en ligne actuellement ?

Cordialement

Arrowbaz

Je ne sais pas si ça peut aider quelqu'un :

http://codepen.io/anon/pen/dNMLRY

En ajoutant la class open à la div#parchment, ça ouvre le parchemin.

<div id="parchment" class="parchment-h">
  <div class="parchment-left"></div>
  <div class="parchment-body">
    <div class="parchment-txt">
    </div>
  </div>
  <div class="parchment-right"></div>
</div>
.parchment-h {
    position: absolute;
  left: 0;
  right: 0;
  bottom: 200px;
}

.parchment-left,
.parchment-right {
  position: absolute;
  width: 20px;
  height: 100px;
  background-color: red;
  z-index: 2;
}

.parchment-left {
  left: 0;
}

.parchment-right {
  right: 0;
}

.parchment-body {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 10px;
  height: 100px;
  background-color: green;

  z-index: 1;
}

.parchment-h {
  height: 100px;
  width: 45px;
  margin: auto;
  overflow: hidden;
}

.parchment-h.open {
  width: 240px;
}

.parchment-h.open .parchment-body {
  width: 200px;
}

.parchment-h.open,
.parchment-h.open .parchment-body {
  transition: width 2s ease-in-out;
  transition-delay: .5s;
}

.parchment-txt {
  overflow: auto;
  padding: 10px;
  opacity: 0;
  transition: all 9s ease-in-out;
  transition-delay: 5s;

  -webkit-transition: all 2s ease-in-out;
  -webkit-transition-delay: 2s;
}

.parchment-h.open .parchment-txt {
  opacity: 1;
}
var el = document.getElementById('parchment');
if (el) {
  setTimeout(function() {
    el.classList.add('open')
  }, 1500);
}
lGatl

Salut
pour detecter la position d'un element, tu peux par exemple, lui donner un id dans le html, ensuite dans le js, 

madiv=document.getElementById("sonid")

Ensuite tu recupere son css

horizontal = madiv.style.left
lGatl

Tu pourras ensuite comparer cette valeur à la largeur de la fenetre

largeurfenetre = window.innerWidth

et faire un petit

madiv.classList.add("taclass")

pour ajouter la class qui permet d'ouvrir le parchemin