Question

我想在游戏A Dark Room中创建效果。在游戏中，文本执行我试图复制的两个函数：

新文本添加到旧文本及其下方。随着游戏的进行，这会将旧文本推向页面。
当文本被按下页面时，它会慢慢淡出视图。

我完全坚持＃1。我猜的是像insertAfter vs InsertBefore这样的东西，但我认为不是这样。

现在，我目前的代码是：

$("<p>You picked up a sword.</p>").hide().insertBefore("#placeholder").fadeIn(1000);

并将新文本插入任何旧文本下方。

对于＃2，我把它缩小到将文本放在div中并设置overflow: hidden。我很确定有一些JS或CSS有助于慢慢消失，因为它在页面上变得越来越低。那就是我被困住的地方。

我认为这样的事情是关键：

$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    var height = $(window).height();
    $('.logo_container, .slogan').css({
        'opacity': ((height - scrollTop) / height)
    });
});

我在这里发现了一个小提琴http://jsfiddle.net/0ma4na3t/1/或多或少与div有关。我会说，在那个小提琴上，我不明白.slogan来自哪里。在小提琴代码中我看不到它。我不认为这是一个jquery或JS命令，是吗？

Answer 1

如果你想在纯Javascript中实现它，那很容易。在这里，我允许显示最多10个句子，删除除此之外的任何句子。如果您愿意，可以轻松地将此相关内容设置为窗口大小。

function prependAndFade(item, text){
    // Find the item we want to prepend to
    var p = document.getElementById(item);
    // Create a fresh paragraph and enter the content
    var e = document.createElement('p');
        e.textContent = text;

    // Insert the paragraph (either before anything else or as single child)
    if(p.childNodes.length) p.insertBefore(e, p.childNodes[0])
    else p.appendChild(e);
  
    // Use a timeout to allow CSS to fade in the text
    setTimeout(function(){
        // Loop through any element, reducing the opacity as we reach 10
        for(var o = 1, i = 0; i < p.childNodes.length; i++){
            // Check if the childNode is a P tag
            // Since empty spaces etc.. Are also children, but not elements
            if(p.childNodes[i].tagName === 'P'){
                o-=.1
                p.childNodes[i].style.opacity = o;
            }
            // If the opacity is 0, remove the remaining elements (save resources)
            if(o === 0) p.removeChild(p.childNodes[i]);
        }
    }, 100);
}

p {
  opacity: 0;
  -webkit-transition: opacity 500ms;
  transition: opacity 500ms;
}

<input type="text" onchange="prependAndFade('fader', this.value); this.value = '';" />

<dfiv id="fader"></div>

Answer 2

如果您的容器div的高度固定，其中包含最多固定行数，您可以轻松执行以下操作：设置行的opacity并使用jQuery的prepend()函数：

实施例

<强> HTML

<input type="text" id="text"></input>
<button id="submit">submit</button>
<div id="container"></div>

<强> CSS

#container {
    width: 500px;
    height: 100px;
    overflow: hidden;
}
.line {
    display: block;
}
.line:nth-of-type(3) {
    opacity: 0.7;
}
.line:nth-of-type(4) {
    opacity: 0.3;
}
.line:nth-of-type(5) {
    opacity: 0.1;
}

<强>的Javascript

$("#submit").on("click", function () {
    $("#container").prepend($("<span class='line'>" + $("#text").val() + "</span>"));
});

FIDDLE

只需在文本框中添加一些行，然后点击submit即可查看会发生什么。

Answer 3

我认为您尝试创建的内容可以通过以下方式使用css样式完成：

li:nth-child(1) {
    opacity:1;
}

li:nth-child(2) {
    opacity:0.8;
}

li:nth-child(3) {
    opacity:0.6;
}

etc...

然后你要做的是动态地向ul添加元素，如下所示：

var i = 0;

$('#add').click(function () {
    $('#container').prepend('<li>line ' + i + '</li>');
    $('#container li:gt(4)').remove();
    i += 1;
});

我已经创建了一个jsfiddle来在这里用jQuery展示它：https://jsfiddle.net/51uh50my/

Answer 4

您应该使用渐变叠加层，不透明度可以在项目添加到列表时“淡出”文本。这将照顾＃2

您可以使用此编辑器获得正确的渐变组合：http://www.colorzilla.com/gradient-editor/

对于＃1，只需使用jQuery prepend并将div添加到特定容器中 - 这将为每个条目添加一个新行

$(document).on('click', '.addResponse', function(){
  $('.response_container').prepend('<div>' + $('.myInput').val() + '</div>');
});

.gradient_overlay {
  background: -moz-linear-gradient(top,  rgba(255,137,137,0) 0%, rgba(255,48,48,0.5) 50%, rgba(255,50,50,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,137,137,0)), color-stop(50%,rgba(255,48,48,0.5)), color-stop(100%,rgba(255,50,50,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(255,137,137,0) 0%,rgba(255,48,48,0.5) 50%,rgba(255,50,50,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(255,137,137,0) 0%,rgba(255,48,48,0.5) 50%,rgba(255,50,50,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(255,137,137,0) 0%,rgba(255,48,48,0.5) 50%,rgba(255,50,50,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(255,137,137,0) 0%,rgba(255,48,48,0.5) 50%,rgba(255,50,50,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff8989', endColorstr='#ff3232',GradientType=0 ); /* IE6-9 */
  
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.response_container {
  height: 1000px;
}

.input_container {
  z-index: 10;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_container">
  <input class="myInput" type="text"/><button class="addResponse">Add Item</button>
</div>
<div class="response_container">
  <div class="gradient_overlay"></div>
</div>

当它滚动时减慢褪色的文本

4 个答案: