前提・実現したいこと
HTMLの構築で悩んでいます。
ボタンをクリックすると下方向にアコーディオンメニューが開かれて、
メニューの中に縦に5個のsvg形式の画像を配置し、
svg形式の画像が画面の中央付近に来たらアニメーションをする、
というコンテンツを作成しようとしております。
svgの描画には、drawsvg.js様を使用しております。
https://stand-4u.com/web/javascript/drawsvg.html
下記にコードを記載します。
ご助言をいただければ大変幸いでございます。
不足の情報がありましたら、お手数ですがご連絡いただけますと幸いです。
よろしくお願いいたします。
発生している問題・エラーメッセージ
アコーディオンメニューの作成、svgの配置、アニメーションまではうまく行ったのですが、
現在、アコーディオンメニューをクリックした場合にすぐにアニメーションが始まってしまい、画面中央に来たらそれぞれがアニメーションを行う、という仕組みをうまく作る事ができておりません。
・アコーディオンメニューで閉じてしまっていて、トップから該当の画像までの座標が上手く取れないことと、
・クリックした後に中央でアニメーションを行う、というコードが組めていない事
この辺りが問題点ではないかと考えております。
該当のソースコード
・使用しているjquery.drawsvg.jsはデフォルトのままです。
《html(一部)》 <div class="accordion1"> <p class="ac1">ボタン</p> <div class="inner"> <div class="button__box clearfix"> <div class="button1 clearfix" href="#" data-delighter> <div class="delighter__box"> <svg version="1.1" class="svg1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 433.588 406.077" xml:space="preserve"><path transform="matrix(0.7071 -0.7071 0.7071 0.7071 -79.1859 188.9117)" class="stc_10 swyblsSr_0" d="M2.595999999999975,190.042A185.848,185.847 0,1,1 374.29200000000003,190.042A185.848,185.847 0,1,1 2.595999999999975,190.042"></path></svg> </div> </div> <div class="button2 clearfix" href="#" data-delighter> <div class="delighter__box"> <svg version="1.1" class="svg1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 433.588 406.077" xml:space="preserve"><path transform="matrix(0.7071 -0.7071 0.7071 0.7071 -79.1859 188.9117)" class="stc_10 swyblsSr_0" d="M2.595999999999975,190.042A185.848,185.847 0,1,1 374.29200000000003,190.042A185.848,185.847 0,1,1 2.595999999999975,190.042"></path></svg> </div> </div> <div class="button3〜5 clearfix" href="#" data-delighter>上記と同じコンテンツが残り3つ続きます</div> </div> </div> </div> 《アコーディオンメニュー用JS》 <script> $(function(){ $('.accordion1 .ac1').click(function(){ $(this).next('div').slideToggle(); }); }); </script> 《drawsvg.js》 <script> $(function(){ var scrolltop = 10; var startPoint = 1800; var startPoint2 = 1800; var windowHeight = $(window).height(); var target = $(".svg1").offset().top ; var target2 = $(".svg2").offset().top; var flg = false; var flg2 = false; var mySVG = $('.svg1').drawsvg({ duration:1500, stagger:1500, easing:'swing', reverse:false }); var mySVG2 = $('.svg2').drawsvg({ duration:1500, stagger:1500, easing:'swing', reverse:false }); $('.ac1').on('click', function(){ scrolltop = $(window).scrollTop(); windowHeight = $(window).height(); startPoint = scrolltop + windowHeight - 300; if(startPoint > target){ if(flg==false){ flg = true; mySVG.drawsvg('animate'); } } startPoint2 = scrolltop + windowHeight - 420; if(startPoint2 > target2){ if(flg2==false){ flg2 = true; mySVG2.drawsvg('animate'); } } }); }); </script>
試したこと
・draiwsvg.jsのscrollをクリックに変更。上手く行かず
あなたの回答
tips
プレビュー