パララックス実装について

プラグインを使わずにパララックスを実装しているサイトがあったので、
コードを参考にして作成しているのですがうまくいきません、、
どなたかご教授いただけると幸いです。

html
1 <div class="is-background">
2    <div class="bg_image">
3		                  		
4    </div
5 </div>

css
1.is-background {
2  position: relative;
3    width: 100%;
4    height: 400px;
5    overflow: hidden;
6}
7
8.bg_image {
9  height: 500px;
10    position: absolute;
11    bottom: 0;
12    left: 0;
13    width: 100%;
14    -webkit-transform: translateY(0);
15    -ms-transform: translateY(0);
16    transform: translateY(0);
17    background-image: url(../img/01.jpg);
18    background-position: center;
19    background-size: cover;
20    background-repeat: no-repeat;
21    will-change: transform;
22}

javascript
1$(function(){
2
3
4
5   var $parallax = $('.is-background');
6
7
8function initParallax() {
9  $parallax.each(function () {
10    setParallax($(this));
11  });
12}
13
14function setParallax($self) {
15  var $parallaxImg = $self.find('.bg_image'),
16      selfH = $self.height(),
17      selfOffsetT = $self.offset().top,
18      winHeight = $(window).height();
19      parallaxStart = selfOffsetT - winHeight,
20      parallaxEnd = selfOffsetT + selfH + winHeight;
21
22  $(window).on('scroll', function () {
23    var ratio = ($(window).scrollTop() - parallaxStart) / (parallaxEnd - parallaxStart) * 100;
24
25    if ($(window).scrollTop() < parallaxStart) {
26      $parallaxImg.css('transform', 'translateY(0)');
27    } else if (parallaxStart <= $(window).scrollTop() && $(window).scrollTop() <= parallaxEnd) {
28      $parallaxImg.css('transform', 'translateY(' + ratio / 2 + '%)');
29    }
30  });
31}
32
33
34
35});

m.ts10806

2019/10/28 03:45

「うまくいきません」とは？

yourai

2019/10/28 03:51

すいません、「パララックスにしたい箇所が全く作動しない」、ということです。ただページ全体のJSが止まる、みたいな不具合は起きません。参考にしてるところは、検証でパララックス適応箇所に対して transform: translateY(12.5088%);　のような挙動がつくのですが、特に何も変化がみられません。。

m.ts10806

2019/10/28 04:12

ブラウザ開発ツールのコンソール確認も含めて本文に追記願います