jQuery淡入/淡出动画

Question

Well I have a problem that I don't really know how to solve. I'm new to jQuery and JavaScript. I use jQuery to animate a text.

My problem is that I want to make an object fade out/in when scrolled out of view. Opacity of the element changes but I'm not sure how to "zoom" it in at the same time...

I would want to do this in the way which will allow me to use a standard css transform.

 $(window).scroll(function() { $(".top").css("opacity", 1 - $(window).scrollTop() / 150); }); 

 * { padding: 0; margin: 0; } .header1 { width: 100%; background-image: url(https://simply-design.ml/img/start1.jpg); background-size: cover; display: flex; justify-content: center; align-items: center; padding-top: 60px; } .header-sec { width: 75%; margin: 25px 0px; padding: 30px 0px; } .header-sec h1 { font-size: 75px; font-family: arial; } .header-sec .p1 { font-size: 27px; font-family: arial; } .space { background-color: #fff; height: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <header class="header1"> <section class="header-sec"> <center class="top"> <h1>TITLE</h1> <div style="height: 3px; width: 100px; background-color: #000; margin: 30px;"></div> <p class="p1">subtitle here</p> </center> </section> </header> <section class="space"></section> 

Answer 1

Use scale property of transform like this

    var abc = 1 - $(window).scrollTop() / 150;
    $(".top").css("opacity", abc);
    $(".top").css("transform", "scale(" + abc + ")");

 * { padding: 0; margin: 0; } .header1 { width: 100%; background-image: url(https://simply-design.ml/img/start1.jpg); background-size: cover; display: flex; justify-content: center; align-items: center; padding-top: 60px; } .header-sec { width: 75%; margin: 25px 0px; padding: 30px 0px; } .header-sec h1 { font-size: 75px; font-family: arial; } .header-sec .p1 { font-size: 27px; font-family: arial; } .space { background-color: #fff; height: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <header class="header1"> <section class="header-sec"> <center class="top"> <h1>TITLE</h1> <div style="height: 3px; width: 100px; background-color: #000; margin: 30px;"></div> <p class="p1">subtitle here</p> </center> </section> </header> <section class="space"></section> <script> $(window).scroll(function() { var abc = 1 - $(window).scrollTop() / 150; $(".top").css("opacity", abc); $(".top").css("transform", "scale(" + abc + ")"); }); </script>