Question

我想在html div块上执行与网站http://rpglobal.ae/中相同的动画效果 - ＆gt;关于我们部分。请让我知道我需要使用哪个jquery和css来实现这一目标。感谢

Answer 1

您可以使用此https://daneden.github.io/animate.css/ - 更具体地说slideInRight和slideInLeft。我一直在工作中使用它，它很容易实现，看起来非常好（也在手机上）。

您可以在此处找到文档和源代码https://github.com/daneden/animate.css

Answer 2

您只需要在".effect"等css中设置一个类，并将其设为"transform: translateX"。

.about_us {
transform: translateX(20%);
transition: transform .3s ease;
}
.effect {
transform: translate(0);
}

然后使用JavaScript，您可以在加载面板时告诉它，将类名"effect"添加到类名"about_us"，它将适用于转换。

对于它的JavaScript：

var elem = document.getElementsByClassName('about_us').item(0);
elem.addEventListener('load', eff, false);

function eff() {
elem.classList.add('effect');
}

Answer 3

您可以使用所有“转换”属性，例如旋转，平移，倾斜或....为此，请将此样式用于元素的第一个样式（例如）：

transform: rotate(90deg) skew(10deg) translate(20px);

然后，当'load'事件上的js代码有效时，您可以将所有这些属性设置为0。

transform: rotate(0) skew(0) translate(0);

就是这样。要更改效果，您需要更改元素的第一个css样式的属性。

网站“http://rpglobal.ae/”的图片使用“scale”属性，右侧面板使用“translate”属性。所以你可以在CSS文件中添加2个类样式，然后将每个样式添加到div（图像和文本面板）。

html页面加载动画

3 个答案: