Скрипт “ходячего человека” не работает, в чем просчет?

291

14 сентября 2018, 12:20

function(){ 
 
var curr; 
var swapped = 0; 
var $W = $(window); 
var $man = $('.footer-walk-man'); 
var mw = $man.width(); 
var max = $W.width() - mw; 
var time = $W.width()/(mw*1.2); 
var walk = { 
    init: function (){ 
        walk.right(); 
        walk.counters(); 
        $W.on('resize', function (){ 
            max = walk.getMax(); 
            time = $W.width()/mw; 
        }); 
    }, 
    getMax: function (){ 
        return $W.width() - mw; 
    }, 
    swap: function(){ 
        swapped = swapped ? false : true; 
        curr = curr == '180deg' ? '0deg' : '180deg'; 
        TweenMax.set($man, {transform: 'rotateY('+ curr +')'}); 
    }, 
    left: function (){ 
        curr = swapped ? '0deg' : '180deg'; 
        TweenMax.set($man, {transform: 'rotateY('+ curr +')'}); 
        TweenMax.to( 
            $man, 
            time, 
            { 
                left: 0, 
                ease: Power0.easeNone, 
                onComplete: function(){ 
                    TweenLite.killTweensOf($man); 
                    walk.right(); 
                } 
            } 
        ); 
    }, 
    right: function (){ 
        curr = swapped ? '180deg' : '0deg'; 
        TweenMax.set($man, {transform: 'rotateY('+ curr +')'}); 
        TweenMax.to( 
            $man, 
            time, 
            { 
                left: max, 
                ease: Power0.easeNone, 
                onComplete: function(){ 
                    TweenLite.killTweensOf($man); 
                    walk.left(); 
                } 
            } 
        ); 
    }, 
    counters: function (){ 
        var $metr, $cal, 
            _timer; 
        $metr = $('.footer-walk-metr'); 
        $cal = $('.footer-walk-cal'); 
 
        clearInterval(_timer); 
        _timer = setInterval(function (){ 
            $metr.text(parseInt($metr.text())+1); 
            $cal.text(Number(parseFloat($cal.text())+0.087).toFixed(2)); 
        }, 1000); 
    } 
}; 
walk.init();

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script type="text/javascript" src="common.js"></script> 
 
</head> 
<body> 
<div class="footer-walk"> 
    <div class="footer-wrapper"> 
        <div class="footer-walk-man"><img src=".gif" alt=""></div> 
        <div class="footer-walk-info"> 
            <div class="footer-walk-info-in"> 
                <div class="footer-walk-title">Пока вы находитесь на сайте,</div> 
                <div>человечек уже прошел <b class="footer-walk-metr"></b> м</div> 
                <div>и, между прочим, потратил <b class="footer-walk-cal"></b> ккал</div> 
            </div> 
        </div> 
    </div> 
</div> 
</body> 
</html>

Вот нашел код по Ходящему человеку который сжигает калорий. Только вот он не передает ничего в классы див не движется блок с картинкой и не цифры не изменяются

Answer 1

Чтобы человечек двигался, Вы задаете left от 0 до max, поэтому самому человечку нужно задать css св-во position:relative или position:absolute (на статику left \ right не действует).

Изначально в $metr и $cal пустота. Стоит задать какое-то стартовое значение (например просто 0):

var curr; 
var swapped = 0; 
var $W = $(window); 
var $man = $('.footer-walk-man'); 
var mw = $man.width(); 
var max = $W.width() - mw; 
var time = $W.width()/(mw*1.2); 
 
var walk = { 
    init: function (){ 
        walk.right(); 
        walk.counters(); 
        $W.on('resize', function (){ 
            max = walk.getMax(); 
            time = $W.width()/mw; 
        }); 
    }, 
    getMax: function (){ 
        return $W.width() - mw; 
    }, 
    swap: function(){ 
        swapped = swapped ? false : true; 
        curr = curr == '180deg' ? '0deg' : '180deg'; 
        TweenMax.set($man, {transform: 'rotateY('+ curr +')'}); 
    }, 
    left: function (){ 
        curr = swapped ? '0deg' : '180deg'; 
        TweenMax.set($man, {transform: 'rotateY('+ curr +')'}); 
        TweenMax.to( 
            $man, 
            time, 
            { 
                left: 0, 
                ease: Power0.easeNone, 
                onComplete: function(){ 
                    TweenLite.killTweensOf($man); 
                    walk.right(); 
                } 
            } 
        ); 
    }, 
    right: function (){ 
        curr = swapped ? '180deg' : '0deg'; 
        TweenMax.set($man, {transform: 'rotateY('+ curr +')'}); 
        TweenMax.to( 
            $man, 
            time, 
            { 
                left: max, 
                ease: Power0.easeNone, 
                onComplete: function(){ 
                    TweenLite.killTweensOf($man); 
                    walk.left(); 
                } 
            } 
        ); 
    }, 
    counters: function (){ 
        var $metr, $cal, 
            _timer; 
       
        $metr = $('.footer-walk-metr'); 
        $cal = $('.footer-walk-cal'); 
       
      //console.log($metr.text()); 
 
        clearInterval(_timer); 
        _timer = setInterval(function (){ 
            $metr.text(parseInt($metr.text())+1); 
            $cal.text(Number(parseFloat($cal.text())+0.087).toFixed(2)); 
        }, 1000); 
    } 
}; 
   
walk.init();

.footer-walk-man { 
  width:150px;  
  position:relative; 
} 
 
.footer-walk-man img { 
  max-width: 100%; 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script> 
   
<div class="footer-walk"> 
    <div class="footer-wrapper"> 
        <div class="footer-walk-man"> 
          <img src="https://thumbs.gfycat.com/MelodicHelplessIsopod-max-1mb.gif" alt=""> 
      </div> 
        <div class="footer-walk-info"> 
            <div class="footer-walk-info-in"> 
                <div class="footer-walk-title">Пока вы находитесь на сайте,</div> 
                <div>человечек уже прошел <b class="footer-walk-metr">0</b> м</div> 
                <div>и, между прочим, потратил <b class="footer-walk-cal">0</b> ккал</div> 
            </div> 
        </div> 
    </div> 
</div>