因爲它滾動而變淡的淡出文本

Question

我想創建一個類似於遊戲A Dark Room的效果。在遊戲中，文本執行2個功能，我試圖複製：

1. 新文本被添加上述舊的文本VS下方。隨着遊戲的進行，這會將較舊的文本推向頁面。
2. 隨着文本被推下頁面，它慢慢淡出視圖。

我完全停留在＃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

如果你有你的容器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 2

如果你想在純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 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>

在你的例子`.slogan`指的是不存在的，它甚至會工作，而它選擇