文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >用jquery动画创建深度错觉

问用jquery动画创建深度错觉
EN

Stack Overflow用户
提问于 2020-05-22 21:24:11
回答 2查看 110关注 0票数 0

我想缩小海报的宽度大小，因为我想在上面显示新元素之前创建深度错觉。

​

代码语言：javascript
复制
<!DOCTYPE html>
<html>
 <head>
<style type="text/css">

body{
    margin: 0 0 10% 0;
    padding: 0;
    background-color: #191919;
}

.movie{
  position: relative;
  margin: 10% auto 0 auto;
  width: 80%;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.66);
  transition: .5s linear;
}

.poster{
  display: block;
  width: 100%;
  border-radius: 10px;
}

</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){

  $(".movie").click(function(){
    $(".movie").animate({width: "70%"});
  });

})

</script>
 </head>
 <body>
  <div class="main_page">
   <div class="movie" id="602147">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/l13mt3oHErSkkqJbN1bjzgtK0Vq.jpg"/>
   </div>
   <div class="movie" id="576156">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/5jdLnvALCpK1NkeQU1z4YvOe2dZ.jpg"/>
   </div>
   <div class="movie" id="385103">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/zG2l9Svw4PTldWJAzC171Y3d6G8.jpg"/>
   </div>
   <div class="movie" id="686245">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/niyXFhGIk4W2WTcX2Eod8vx2Mfe.jpg"/>
   </div>
   <div class="movie" id="582596">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/A2YlIrzypvhS3vTFMcDkG3xLvac.jpg"/>
   </div>
   <div class="movie" id="618344">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/c01Y4suApJ1Wic2xLmaq1QYcfoZ.jpg"/>
   </div>
   <div class="movie" id="536517">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/6btICrn3RsbtxZCthtb0MsR9lcq.jpg"/>
   </div>
  </div>
 </body>
</html>

​

这是我在小提琴上的演示

当我点击第一张海报，我得到了不错的图像收缩。问题是当我点击远离页面顶部的海报时，所有的海报都被移动到顶部点击，缩小动画并不像第一张海报一样。如何在所有海报上实现第一张海报的收缩动画？

javascript
jquery
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-05-22 22:00:25

我建议你换点东西。jQuery动画可以做动画，但是CSS可以在性能方面做得更好。因此，通过添加和删除类来创建基于CSS转换的动画。

如果您动画化了.main_page容器，那么所有的.movie元素也会动画化，从而创建一个同时的动画。

在下面的示例中，我使用CSS perspective()函数在.main_page容器中创建人工深度。这使您能够在Z轴上移动元素(向和从您移动)，并在元素移动到背景时给您实际的深度。

但有一个轻微的怪癖，因为动画将从一个固定的点在页面上。为了对付这种情况，我在窗口中添加了一个事件侦听器，该侦听器侦听scroll事件，并根据滚动位置更新transform-origin。现在，动画将始终从您当前的位置在屏幕上移动。

要进一步改进不断变化的transform-origin的呈现，请使用will-change属性。此属性告诉浏览器监视将来将发生变化的属性值，并且在该属性发生更改时应优化该属性的性能。

requestAnimationFrame函数将防止滚动事件每秒触发60次以上，这样滚动性能将尽可能保持最佳。

​

代码语言：javascript
复制
$(document).ready(function() {

  var $mainPage = $('.main_page');

  $('.movie').click(function() {
    $mainPage.toggleClass('animated');
  });
  
  function setTransformOrigin() {
    requestAnimationFrame(function() {
      var scrollHeight = document.scrollingElement.scrollHeight;
      var scrollOffset = document.scrollingElement.scrollTop + (window.innerHeight / 2);
      var origin = (scrollOffset / scrollHeight) * 100;
      $mainPage.css('transform-origin', 'center ' + origin + '%');
    });
  }
  
  $(window).on('scroll', setTransformOrigin);
  
  // Call it immediately to set the first value correctly.
  setTransformOrigin(); 

})
代码语言：javascript
复制
body {
  margin: 0 0 10% 0;
  padding: 0;
  background-color: #191919;
}

.main_page {
  transform: perspective(150px);
  transform-origin: center 5%;
  transition: transform .5s ease-in-out;
  will-change: transform-origin;
}

.main_page.animated {
  transform: perspective(150px) translate3d(0, 0, -150px);
}

.movie {
  position: relative;
  margin: 10vh auto 0 auto;
  height: 90vh;
  width: fit-content;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.66);
  cursor: pointer;
}

.poster {
  display: block;
  height: 100%;
  border-radius: 10px;
}
代码语言：javascript
复制
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>


<div class="main_page">
  <div class="movie" id="602147">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/l13mt3oHErSkkqJbN1bjzgtK0Vq.jpg" />
  </div>
  <div class="movie" id="576156">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/5jdLnvALCpK1NkeQU1z4YvOe2dZ.jpg" />
  </div>
  <div class="movie" id="385103">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/zG2l9Svw4PTldWJAzC171Y3d6G8.jpg" />
  </div>
  <div class="movie" id="686245">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/niyXFhGIk4W2WTcX2Eod8vx2Mfe.jpg" />
  </div>
  <div class="movie" id="582596">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/A2YlIrzypvhS3vTFMcDkG3xLvac.jpg" />
  </div>
  <div class="movie" id="618344">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/c01Y4suApJ1Wic2xLmaq1QYcfoZ.jpg" />
  </div>
  <div class="movie" id="536517">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/6btICrn3RsbtxZCthtb0MsR9lcq.jpg" />
  </div>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2020-05-22 21:29:17

通过在动画调用中将.movie更改为this，它将只针对点击的海报，而不是所有的海报。

​

代码语言：javascript
复制
<!DOCTYPE html>
<html>
 <head>
<style type="text/css">

body{
    margin: 0 0 10% 0;
    padding: 0;
    background-color: #191919;
}

.movie{
  position: relative;
  margin: 10% auto 0 auto;
  width: 80%;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.66);
  transition: .5s linear;
}

.poster{
  display: block;
  width: 100%;
  border-radius: 10px;
}

</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){

  $(".movie").click(function(){
    $(this).animate({width: "70%"});
  });

})

</script>
 </head>
 <body>
  <div class="main_page">
   <div class="movie" id="602147">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/l13mt3oHErSkkqJbN1bjzgtK0Vq.jpg"/>
   </div>
   <div class="movie" id="576156">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/5jdLnvALCpK1NkeQU1z4YvOe2dZ.jpg"/>
   </div>
   <div class="movie" id="385103">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/zG2l9Svw4PTldWJAzC171Y3d6G8.jpg"/>
   </div>
   <div class="movie" id="686245">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/niyXFhGIk4W2WTcX2Eod8vx2Mfe.jpg"/>
   </div>
   <div class="movie" id="582596">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/A2YlIrzypvhS3vTFMcDkG3xLvac.jpg"/>
   </div>
   <div class="movie" id="618344">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/c01Y4suApJ1Wic2xLmaq1QYcfoZ.jpg"/>
   </div>
   <div class="movie" id="536517">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/6btICrn3RsbtxZCthtb0MsR9lcq.jpg"/>
   </div>
  </div>
 </body>
</html>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/61964119

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档