現在あるwebサイトのトップページを作っているのですが、呼び出したjQueryで操作しているcssが動いてくれず、困っています。
カーソルの座標を取得しながらカーソルと同じように動く円(clip-pathで作成)がロゴを透過して背景が見えるようにしています。
この状態でマウスをクリックしたときに、その座標から円が大きく広がって背景全体が見えるようなアニメーションをjQueryとCSSで書こうと思ったのですが、**クリックイベントでjQueryの関数は呼び出されるものの、呼び出し先のcssが動いてくれません。**どうしたら良いでしょうか?
サイトのレイヤーとしては
- 背景画像(GIFアニメーション)
- ロゴ
- clip-pathで作った円**(←この円の中のみ、ロゴが透過して背景が見えている)**下の画像のような感じ。
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <link rel="stylesheet" href="style.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 8 <title>Online Resume</title> 9 10</head> 11 12<body> 13 14 <div class="circle"></div> 15 <img src="./images/page1.png" alt="" class="logo"> 16 17 <script type="text/javascript"> 18 $(function() { 19 let style; 20 $(window).mousemove(function(e) { 21 <!--.cercleのCSSにリアルタイムでマウス座標を入れる--> 22 style = "ellipse(150px 150px at " + e.clientX + "px " + e.clientY + "px)"; 23 $(".circle").css("clip-path", style); 24 }); 25 }); 26 27 $(function() { 28 $('.circle').click(function() { 29 $(this).toggleClass("clicked"); 30 console.log("clicked!"); <!--このクリックイベントはコンソールに表示されてるのに、clip-path変更のcssが効かない!!--> 31 }); 32 }); 33 </script> 34</body> 35 36</html>
css
1body { 2 background-image: url(./images/stand1.gif); 3 background-size: cover; 4 background-position: center; 5 background-repeat: no-repeat; 6 padding: 0; 7 margin: 0; 8} 9 10.logo { 11 top: 0; 12 left: 0; 13 width: 100vw; 14 height: 100vh; 15} 16 17.circle { 18 width: 100vw; 19 height: 100vh; 20 position: absolute; 21 background-image: url(./images/stand1.gif); 22 background-size: cover; 23 background-position: center; 24 background-repeat: no-repeat; 25 clip-path: ellipse(150px 150px at 10% 10%); 26 transition: all 1s; 27} 28 29.circle.clicked { 30 width: 100vw; 31 height: 100vh; 32 position: absolute; 33 background-image: url(./images/stand1.gif); 34 background-size: cover; 35 background-position: center; 36 background-repeat: no-repeat; 37 clip-path: ellipse(2000px 2000px at 10% 10%); /*jQueryでこのCSSを呼んでclip-pathの円の大きさを変更できるはず....?あれ...?*/ 38}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/11 12:23