如何以平滑的方式分别向下滚动和向上滚动来扩展和压缩图像？

Question

我有一个如下元素：-

use Illuminate\Database\Seeder;
Use App\Role;
class roleSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $admin = Role::create([
        'name'        => 'Admin',
        'slug'        => 'admin',
        'permissions' => json_encode([
            'create-Employer' => true,
            'delete-Employer' => true,
            'view-Employer' => true,
            'update-Employer' =>true,
        ]),
    ]);
    $branch = Role::create([
        'name'        => 'Branch',
        'slug'        => 'branch',
        'permissions' => json_encode([
            'create-Employer' => true,
            'view-Employer' => true,
            'update-Employer' =>true,
        ]),
    ]);

    $employer = Role::create([
        'name'        => 'Employer',
        'slug'        => 'employer',
        'permissions' => json_encode([
            'create-Employer' => true,
            'view-Employer' => true,
            'update-Employer' =>true,
        ]),
    ]);

    $trainers = Role::create([
        'name'        => 'Trainers',
        'slug'        => 'trainers',
        'permissions' => json_encode([         
            'view-Employer' => true,
        ]),
    ]);

    $youth = Role::create([
        'name'        => 'Youth',
        'slug'        => 'youth',
        'permissions' => json_encode([         
            'view-Employer' => true,
        ]),
    ]);

    $guest = Role::create([
        'name'        => 'Guest',
        'slug'        => 'guest',
        'permissions' => json_encode([         
            'view-Employer' => true,
        ]),
    ]);
    }
}

我试图在向下滚动时轻轻展开，在向上滚动时轻轻压缩。元素放置在最右侧。 CSS是：-

<div class='bulb rellax' data-rellax-speed="-2">
   <img  src="bulb.png" height="200" width="200"></img>
</div>

我尝试使用以下Jquery，但这无济于事。如何在向上滚动时减少它并使它变得更平滑。

.bulb{
    position:absolute;
    right:0px;
    top:350px;
}