Jquery 动画滑动

Posted 2023-05-08

【中文标题】Jquery 动画滑动

【英文标题】：Jquery animation swipe

【发布时间】：2016-11-26 08:35:18

【问题描述】：

我需要制作可能的品牌形象动画，因此当网站打开时，它应该从左侧滑动或线性移动到右侧，然后回到他的位置。我用谷歌搜索了它，但我不知道如何制作这个功能。

【问题讨论】：

This answer 应该为您提供所需的所有信息。

也显示你的代码

你能告诉我们你已经尝试过什么

对不起，伙计们，我这样做了，这就是为什么我没有回复底部回答我的人告诉我如何

【参考方案1】：

我知道您特别要求使用 JQuery，但由于添加了 CSS 动画，此类事情不再需要它。如果您使用 CSS 动画，对用户也有好处 - 如果您使用 CSS 动画，即使关闭 javascript 或禁用公司的人也可以看到动画。

这是我从一个 JQuery 示例修改的 JSFiddle，其中徽标 div 从左到右：http://jsfiddle.net/ny7pxe7y/

更新：我读过动画使用左/右/上/下在移动设备性能方面很粗糙。你最好使用 CSS 转换。我已经用 transform: translateX(values); 更新了左边的值。可以在这里看到：http://jsfiddle.net/ny7pxe7y/5/（我在这个更新的示例中使用了 vw 的 [视口宽度单位]）

html：

<div id="logo" class="demoStyle">LOGO</div>

CSS：

#logo 
  position: absolute;
  top: 0;
  left: 100%;
  -webkit-animation: slide 1.5s forwards;
  -webkit-animation-delay: 0.5s;
  animation: slide 1.5s forwards;
  animation-delay: 0.5s;


.demoStyle 
  line-height: 50px;
  display: block;
  background: yellow;
  width: 3em;
  height: 50px;


@-webkit-keyframes slide 
  100% 
    left: 0%;
  
  75% 
    left: 100%;
  
  50% 
    left: 0
  
  25% 
    left: 100%;
  
  0% 
    left: 0%