outerHeight()で取得した下半分の高さを指定するには

Question

前提・実現したいこと

outerHeight()で取得した下半分の高さを指定したい。

発生している問題・エラーメッセージ

jQueryのプラグインを使ってbackgroundで指定した画像にエフェクトをかけているのですが
画像の下半分を指定する方法がわかりません。

該当のソースコード

    .keyvisual {
        position: relative;
        width: calc(100vw - 40px);
        height: 80px;
        padding-top: 66.6666666667%;
        background: url(aaa.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-position: center center;
        z-index: 9;
    }

        <script>
            jQuery(function($) {
                $(document).ready(function() {
                    /* ===== Op ===== */
                    try {
                        $('.keyvisual').ripples({
                            resolution: 128,
                            dropRadius: 40, //px
                            perturbance: 0.02,
                            interactive: false
                        });
                    } catch (e) {
                        $('.error').show().text(e);
                    }

                    $('.js-ripples-disable').on('click', function() {
                        $('.keyvisual').ripples('destroy');
                        $(this).hide();
                    });

                    $('.js-ripples-play').on('click', function() {
                        $('.keyvisual').ripples('play');
                    });

                    $('.js-ripples-pause').on('click', function() {
                        $('.keyvisual').ripples('pause');
                    });

                    let count = 0;
                    const countUp = () => {
                        console.log(count++);
                    }

                    setTimeout(function(countUp) {
                        var $el = $('.keyvisual');
                        var x = Math.random() * $el.outerWidth();
                        var y = Math.random() * $el.outerHeight("50 % ");
                        var dropRadius = 80;
                        var strength = 0.02 + Math.random() * 0.84;

                        $el.ripples('drop', x, y, dropRadius, strength);
                    }, 1000);

                    $('body').hide();
                    $('body').fadeIn(1600);
                });
            });
        </script>

試したこと

var y = Math.random() * $el.outerHeight(value);　の
(value)に50%やpxを指定したり、outerHeightではなくheightにしてみたが特に変化がなかったです。

補足情報（FW/ツールのバージョンなど）

参考にしたサイト
https://arutega.jp/jquery-ripples/

Answer 1

下記のように修正することで、下半分に雫が落ちるはずです。

var y = Math.random() * $el.outerHeight("50 % ");
  ↓
var y = $el.outerHeight()/2 + Math.random() * $el.outerHeight()/2;

Comments

[Minakami]

ありがとうございました。