jQueryとCSSのアニメーションを同時に使いたい

jQuery、もしくはCSSをつかって下記のアニメーションを同時に実現したいと考えています。

背景画像がだんだんズームで迫ってくる
背景画像にパララックス効果を付与する

このアニメーションが現在、同時ではなく1) が完了した後に、 2) という風になってしまっています。これを同じタイミングで、ズームにもなってくるし、パララックス効果もある、といった状態を作るためにはいかがすればよろしいでしょうか？

ポララックスにはこちらのライブラリを使っています。
https://simpleparallax.com/

HTML
1<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@4.0.0/dist/simpleParallax.min.js"></script>
2
3<div class="main">
4  <div class="parallax_image">
5    <img class="image" src="./assets/background.jpeg" />
6  </div>
7</div>

CSS
1/* ズームインするアニメーション */
2.parallax_image img {
3  animation-name: zoomin;
4  animation-duration: 9s;
5  width: 100%;
6}
7@keyframes zoomin {
8  0% {
9    transform: scale(1);
10  }
11  100% {
12    transform: scale(1.1);
13  }
14}

JavaScript
1var image = document.getElementsByClassName("image");
2new simpleParallax(image, {
3  scale: 1.1
4});

回答1件

色々調べてみましたが、cowmoさんが使用されているライブラリでは難しいのでは無いかと思います。
ほかのライブラリの使用もありならScrollMagicはどうでしょうか。
以下サンプルコードです。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8</head>
9<body>
10
11<div class="main">
12  <div class="parallax_image" style="height: 2000px; margin-top:1000px;">
13    <img class="image" src="./assets/background.jpeg" />
14  </div>
15</div>
16<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
17<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
18<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
19<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
20<script scr="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
21    <script>
22    var controller = new ScrollMagic.Controller();
23    var scene8a = new ScrollMagic.Scene({
24        triggerElement: ".parallax_image",
25        triggerHook: "onEnter",
26        duration: "200%"
27	})
28    .setTween(".parallax_image > .image", {y: "80%", ease: Linear.easeNone,scale:2})
29    .addTo(controller);
30</script>
31</body>
32</html>