Question

我想在水平和垂直居中的文字上制作一个“进来”动画。在动画运行之前，文本将比视口宽。在动画期间，文本的字体大小和字母间距将减小，以便文本在动画后适合视图端口。

问题是，只要文本比视口宽，文本只会溢出左边并且不居中。 See my code here

HTML：

<div id="welcome">
    <div id="welcome_text_wrap">
         <div id="welcome_text">sometext</div>
    </div>
</div>

<div id="page_container">
     <h2>Page Content</h2>
</div>

CSS：

#welcome {
     width: auto;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    background: black;
    z-index: 1000;
    display: none;
}

#welcome_text_wrap {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
}

#welcome_text {
    font-size: 40vw;
    letter-spacing: 1em;
    font-family: serif;
    color: white;
    text-transform: lowercase;
    opacity: 0;
    border: 1px solid red;
    display: inline;
}

.after_animation {
    font-size: 12vw !important;
    letter-spacing: 0em !important;
    opacity: 1 !important;
}

JS：

function show_welcome() {
$("#welcome").css("display", "table");

$("#welcome_text").addClass("after_animation", {
    duration: 5000,
    children: true,
    easing: 'easeInOutQuint',
    complete: function() {
        setTimeout(4000, $("#welcome").fadeOut(800));
    }
 });
}

$(document).ready(function(e) {
     show_welcome();
});

如果文本不适合视口，我怎样才能使文本居中？还有，有更好的方法来做这种动画吗？也许使用CSS 3过渡？

感谢分配，

尼克

Answer 1

我用#welcome_container用css：

包裹#welcome

#welcome_container {
    overflow:hidden;
}

对于#welcome我改变了：

#welcome {
    ...
    min-width: 4000px;
    max-width: 4000px;
    ...
    position:absolute;
    left:50%;
    margin-left:-2000px;
    top:0;
}

在此处查看http://jsfiddle.net/mattydsw/P3sJe/13/

Answer 2

你必须减少欢迎文本div！的字体大小，并使用一些填充来使用90％的宽度。

http://jsfiddle.net/P3sJe/12/

<强> CSS

#welcome {
    width: 90%;
    padding: 0 5%;
}
#welcome_text {
    font-size: 60px;
}

让中心文本溢出

2 个答案: