Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Lightbox/slideshow/slider

CSS Motion Path modal

Motion Path est un module qui fait partie de la spécification CSS. Il s'agit pour l'heure du premier niveau. Le support est donc très limité et la documentation n'est pas très riche. En attendant, ce module paraît très prometteur.

CSS motion Path définit les propriétés suivantes :

NB : la propriété offset est une propriété raccourcie regroupant les propriétés ci-dessus.

Ci-dessous une petite démonstration d'une boîte de dialogue avec CSS Path motion :

Code :

HTML


<input name="modal" type="checkbox" id="modal1">
<label for="modal1"> 
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
<span class="trait"></span>
</label>
<div class="modal-1">
<label class=ferm for="modal1">❎</label>
<h2>CSS Motion Paths modal</h2>
<div class="contenu_modal">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>
</div>

CSS


	

.modal-1{ 

transform: scale(0);
opacity: 0;
height: 0;
visibility: hidden;
offset-distance: 100%;      
offset-rotate: 0;
filter: blur(8px)

}


#modal1:checked ~ .modal-1{

max-width: 500px;  
height: auto;
offset-distance: 0;  
offset-rotate:0deg; 
background-color: white;
border: 1px solid #ccc;
transition: 1s ease-out;
box-shadow: 0 0 2rem hsla(0,0%,0%,.2);
filter: blur(0);
opacity: 1;
visibility: visible;
transform: scale(1)

}
    
.modal-1{ 

offset-path:path("M 250,0 S 300,-500 -700,-200");

}

    
@media (prefers-reduced-motion) {
@supports (offset-rotate: 0deg) {
.modal {
offset-path: none;
    }
  }
}
    
    
.modal-1 h2{

border-bottom:1px solid #ccc;


}
    
.modal-1 h2,
.contenu_modal {padding: 1rem}

.modal-1 label{display:flex;justify-content:flex-end}
    

input[name="modal"]:checked+label~.overlay{
background-color:#fff;
transition:1s;
height:100%;
width:100%;
position:absolute}
     
input[name="modal"]+label {
position:relative;
display:inline-flex;
padding:1.5rem 4.5rem;
background-color:#7b61ff;
box-shadow:1px 1px 8px rgba(0, 0, 0, 0.2)
}




.trait{
position:absolute;
display:block;
height:10px;
transform-origin:5px 5px;
pointer-events:none}
    
.trait:nth-child(1){
top:50%;
left:100%;
transform:translate3d(-10px,-5px,0)}
    
.trait:nth-child(2){
bottom:0;
left:100%;
transform:translate3d(-10px,0,0) rotate(45deg)}
    
.trait:nth-child(3){
bottom:0;
left:50%;
transform:translate3d(-10px,0,0) rotate(90deg)}
    
.trait:nth-child(4){
bottom:0;
left:0;
transform:rotate(135deg)}
    
.trait:nth-child(5){
top: 50%;
left: 0;
transform: translate3d(0, -5px, 0) rotate(180deg)}
    
.trait:nth-child(6){
top:0;
left:0;
transform:rotate(225deg)}
    
.trait:nth-child(7){
top:0;
left:50%;
transform:translate3d(0,0,0) rotate(270deg)}
    
.trait:nth-child(8){
top:0;
left:100%;
transform:translate3d(-10px, 0, 0) rotate(315deg)}
    
.trait:before{
content:'';
position:absolute;
display: block;
width:16px;
height:2px;
background-color:#7A5FFF;
offset-path:path("M0 1c7.1 0 10.7 2 14.3 4s7.1 4 14.3 4 10.7-2 14.3-4 7.2-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4");
offset-distance:0;
pointer-events:none}

input[name="modal"]:checked+label .trait:before {
animation: trait 1s cubic-bezier(0.215, 0.61, 0.355, 1)

}



@keyframes trait {
from{
offset-distance: 0%;
opacity:1;
filter:blur(0)
}
to {
offset-distance: 100%;
opacity:0;
filter:blur(2px)
  }
}   

Support navigateurs :

CSS motion-paths

Source, inspiration, ressources :

Source exemple modal.

Source effet sur bouton.

Article sur le Motion Path (EN).

Article en allemand sur le sujet.

Vous rencontrez un problème avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.