[clip-path img galery]

Question

私は誰かがボタンをクリックするたびに、各画像にランダムなクリップパスを作ろうとしています。

何らかの理由で、最初の画像のみがカットされます。他は同じままです。

私はcodepenでコードを送信して切り取りました。

ご協力いただきありがとうございます。

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代わりにあなたがdocument.querySelectorAllを使用して、すべての要素をループを実行する必要があり、セレクタに一致するのみ最初の要素を返します。

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">

そして、あなたは、各要素ごとに異なるclip-pathをしたい場合は、単にループ内でランダムのものが含まれます。

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">

別のw AYが直接CSSプロパティを変更することであり、このケースでは、すべての要素に対して一度だけ、それを変更する必要があります。

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">