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