Question

当页面打开时，如何显示从左侧打开的缓动效果？喜欢这个网站：http://focuslabllc.com/

Answer 1

我会使用CSS过渡。看看我创建的示例http://jsfiddle.net/ZL9m7/1/

相对CSS很简单

.container {
    opacity: 0.1;
    transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear; /* Play with timing functions */
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
}

.container-ease-in {
    opacity: 1;
}

微小的javascript触发器（jQuery为了方便）：

$(function() {
    $('.container').addClass('container-ease-in');
});

Answer 2

与dfsq-answer一样，动画将由js触发（这次没有jquery）：

window.onload = function() {
    var oElement = document.getElementById('content');
    oElement.className = oElement.className + ' start_animation';
};

css通过转换（-duration）改变边距和不透明度：

#content {
    ...
    /* starting status */
    margin: 10px 200px 10px 0px;
    opacity: 0;
    /* now set the animation duration */
    transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
}

#content.start_animation {
    margin: 10px 100px;     /* change horizontal margins */
    opacity: 1;             /* change opacity            */
}

另见example。

Answer 3

这是为您引用的网站编写js的家伙。我使用CSS作为选项，但结果只是jQuery 100％。我很快就会有关于我们新网站改版的一些开发方面的博客文章，我会谈谈我们是如何做到这一点的。它将包括一些jsFiddle演示等。

Answer 4

您最初可以隐藏您的内容（使用CSS），然后在加载页面内容后，使用javascript触发/运行缓动操作以使内容可见。

或者，您可以从没有内容开始，使用javascript构建页面内容，并以您想要的缓动方式显示它。

Answer 5

您可以使用JQuery动画或YUI过渡来实现此目的。隐藏div并显示它或将宽度设置为0，然后将其设置为具有特定持续时间的最大值。

站点打开时显示缓动效果

5 个答案: