js Variable zu css [clip-path img galerie]

Question

Ich versuche einen zufälligen Clip-Pfad in jedes Bild zu machen, wenn jemand auf eine Schaltfläche klickt.

Aus irgendeinem Grund wird nur das erste Bild geschnitten. die anderen bleiben gleich.

Ich sende den Code in Codepen und schnippte.

Jede Hilfe ist dankbar.

https://codepen.io/fredericopimpao/pen/ZvBOwN?editors=1111

var test = document.querySelector('.test') 
 
window.setInterval(function(){ 
 

 
    var rand = Math.random()* (200 - 10) + 30; 
 

 
    test.style.setProperty('--ola', rand+'%'); 
 
}, 1000);

.test{ 
 
    clip-path: polygon(var(--ola) 30%, 100% 0%, 100% 100%,0% 100%); 
 
} 
 
img{width:200px;}

<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg"> 
 

 
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg"> 
 
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg"> 
 
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">

Answer 1

document.querySelector kehrt nur das erste Element, das die Wähler übereinstimmen, Sie sollten stattdessen document.querySelectorAll verwenden und eine Schleife über alle Elemente ausgeführt werden.

var test = document.querySelectorAll('.test') 
 
window.setInterval(function() { 
 

 
    var rand = Math.random() * (200 - 10) + 30; 
 
    for (var i = 0; i < test.length; i++) 
 
    test[i].style.setProperty('--ola', rand + '%'); 
 
}, 1000);

.test { 
 
    clip-path: polygon(var(--ola) 30%, 100% 0%, 100% 100%, 0% 100%); 
 
} 
 

 
img { 
 
    width: 200px; 
 
}

<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg"> 
 

 
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg"> 
 
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg"> 
 
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">

Und wenn Sie ein für jedes Element verschiedeneclip-path wollen, schließen Sie einfach die zufällig in der Schleife:

var test = document.querySelectorAll('.test') 
 
window.setInterval(function() { 
 

 
    for (var i = 0; i < test.length; i++) { 
 
    var rand = Math.random() * (200 - 10) + 30; 
 
    test[i].style.setProperty('--ola', rand + '%'); 
 
    } 
 
}, 1000);

.test { 
 
    clip-path: polygon(var(--ola) 30%, 100% 0%, 100% 100%, 0% 100%); 
 
} 
 

 
img { 
 
    width: 200px; 
 
}

<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg"> 
 

 
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg"> 
 
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg"> 
 
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">

Another w ay ist direkt auf die CSS-Eigenschaft zu ändern, und in diesem Fall müssen Sie es nur für die ganze Element einmal ändern:

var clip = document.styleSheets[0].rules[0].style; 
 
window.setInterval(function() { 
 

 
    var rand = Math.random() * (200 - 10) + 30; 
 
    clip.setProperty('--ola', rand + '%'); 
 

 
}, 1000);

.test { 
 
    clip-path: polygon(var(--ola) 30%, 100% 0%, 100% 100%, 0% 100%); 
 
} 
 

 
img { 
 
    width: 200px; 
 
}

<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg"> 
 

 
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg"> 
 
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg"> 
 
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">