Q&A
3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7
前提・実現したいこと
下記URlのような縦方向無限ループスライダーの実装を画面いっぱいに設定しています。
リンク
この縦方向スライダーにスクロール機能を追加するために
mousewheeleventを通してスクロールした点のtranslateのY座標を取得し、値をいくらか変更をすることでスクロールを実装しようとしています。
Y座標を取得まではできたのですが、値を変更することができません。
(ライブラリ)
tweenmaxを使用しています。
■知りたいこと
下記の1~3について何か1つでもご教授して頂けると幸いです。
0. 実装方法
0. そもそもこの方向性で実装できるのか
0. もっといい方法があるのか
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
html
1 2 3<!DOCTYPE html> 4<html lang="jp"> 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title></title> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 10 <style> 11 body, 12 html { 13 margin: 0; 14 padding: 0; 15 height: 100%; 16 } 17 .test { 18 position: fixed; 19} 20 </style> 21</head> 22<body> 23 24 25 26<div id="wrapper"> 27 <div class="test"> 28 <div class="loop_js" id="loop_js" style="transform: translate(0%, 0%);"> 29 <ul> 30 <li><a href="#"><img src="" alt="" height="200px" width="200px"></a></li> 31 <li><a href="#"><img src="" alt="" height="200px" width="200px"></a></li> 32 <li><a href="#"><img src="" alt="" height="200px" width="200px"></a></li> 33 <li><a href="#"><img src="" alt="" height="200px" width="200px"></a></li> 34 </ul> 35 36 </div> 37 38 </div> 39</div> 40 41 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script> 42<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script> --> 43 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 44 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 45 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> 46 47 <script> 48 $(function () { 49 const loop = document.getElementById('loop_js'); 50 51 //タイムラインを作成 52 const loopAnim = new TimelineMax({ 53 repeat: -1 //繰り返し無制限 54 }); 55 56 // 画像を複製してdiv内に挿入 57 let loopItem = (window.innerWidth, loop.children[0]); 58 loop.appendChild(loopItem.cloneNode(true)); 59 loop.appendChild(loopItem.cloneNode(true)); 60 61 //アニメーションの設定 62 loopAnim 63 .to(loop, 50, { ease: Power0.easeNone, yPercent: -66.66666 }) 64 .to(loop, 0, { ease: Power0.easeNone, y: 0 }); 65 66 67 68 //マウスホイール実装 69 var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; 70 $(document).on(mousewheelevent,function(e){ 71 //**y座標取得** 72 var props = $('.loop_js')[0].style.transform; 73 console.log(props); 74 e.preventDefault(); 75 var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail); 76 if (delta < 0){ 77//**y座標変更** 78 var dNum = props - 10; 79 $('.loop_js').css('transform', 'translateY(' + dNum + '%)'); 80 } else { 81 var uNum = props + 25; 82 $('.loop_js').css('transform', 'translateY(' + uNum + '%)'); 83 } 84 }); 85 }); 86 </script> 87 88</body> 89</html>
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
③でお願いします。
js
1if (delta < 0){ 2loopAnim.time(loopAnim.time()+1); 3} else { 4loopAnim.time(loopAnim.time()-1); 5}
もしかしたら、totalTime()を使うべきなのかもしれませんが、あまり詳しくありません。
[GreenSock | Docs | TimelineMax | time()](https://greensock.com/docs/v2/TimelineMax/time(%29)
[GreenSock | Docs | TimelineMax | totalTime()](https://greensock.com/docs/v2/TimelineMax/totalTime(%29)
投稿2020/06/02 04:02
総合スコア36087
あなたの回答
tips
プレビュー
