CSSとjQueryを使用してタイトルの動作を実装しようとしています。
指定した要素がスクロール(横スクロール)して、表示領域外にでたら
flyOutクラスを付与してアニメーションさせます。
またスクロールで表示領域外にでたら上記の動作をさせたいですが、
どうやって実装するかで止まっています。
$('.flyOut').css({ 'transform': 'translateX(' + posX + 'px)', '-webkit-transform': 'translateX(' + posX + 'px)' });
この箇所が正常に動作せず、cssに移動したい値が追加されません。
どのように記述すればうまくいくかご教授いただけますでしょうか?
よろしくお願いいたします。
html
1<div id="main_chara"> 2<img src="kp_img01.png"> 3</div>
css
1/* キャラクター */ 2#main_chara { 3 position: absolute; 4 bottom: 30px; 5 left: 70px; 6} 7 8#main_chara img { 9 width: 50px; 10} 11 12/* アニメーション */ 13.flyOut { 14 transition: 3s; 15 -webkit-transition: 3s; 16 transform: translateX(1000px); 17 -webkit-transform: translateX(1000px); 18}
jQuery
1 2// キャラクター要素のアニメーション制御 3$(function() { 4 $('#main_chara').on('inview', function(event, isInView) { 5 if (isInView) { 6 //表示領域に入った時 7// $(this).removeClass('flyOut'); 8 } else { 9 // 表示領域から出た時 10 // 要素の現在位置取得 11 var charaX = $('#main_chara').offset().left; 12 $(this).removeClass('flyOut'); // 初期化 13 14 // ブラウザの画面中央のX座標点を設定 15 var winSize = $(window).width() / 2; 16 var posX = winSize + charaX ; 17 18 $('.flyOut').css({ 19 'transform': 'translateX(' + posX + 'px)', 20 '-webkit-transform': 'translateX(' + posX + 'px)' 21 }); 22 23 $(this).addClass('flyOut'); 24// $(this).css('opacity',0); //非表示にしておく 25 } 26 }); 27}); 28
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。