Slowing fading text as it scrolls

Question

I'd like to create an effect like in the game A Dark Room. In the game, the text performs 2 functions I'm trying to duplicate:

1. New text is added ABOVE the old text vs below it. This pushes the older text down the page as the game progresses.
2. As the text is pushed down the page, it slowly fades out of view.

I'm totally stuck on #1. I'm guessing something like a insertAfter vs InsertBefore, but I don't think that's it.

Right now, my current code is:

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

And that inserts the new text below any old text.

As for #2, I have it narrowed down to placing the text in a div and setting the overflow: hidden. I'm pretty sure there's some JS or CSS that helps is slowly fade out as it gets lower on the page. That's where I'm stuck.

I thought something like this would be the key:

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

I found a fiddle here http://jsfiddle.net/0ma4na3t/1/ that more or less does it with a div. I will say, on that fiddle, I don't understand where .slogan came from. I see it no where in the fiddle code. I don't think that's a jquery or JS command, is it?

Answer 1

You should use a gradient overlay, with opacity to 'fade out' the text as items are added to the list. This will take care of #2

You can use this editor to get the right gradient combination: http://www.colorzilla.com/gradient-editor/

For #1, simply use jQuery prepend and prepend a div to a specific container - this will add a new line for every entry

$(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>

Answer 2

If you want to do it in pure Javascript, it is quite easy. Here I am allowing a maximum of 10 sentences to be shown, removing any sentences beyond that. You could easily make this related top your window size if you want to.

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

I think what you're trying to create can be accomplished using css style in this manner:

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

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

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

etc...

Then what you do is dynamically add elements to the ul like this:

var i = 0;

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

I've created a jsfiddle to showcase it with jQuery here: https://jsfiddle.net/51uh50my/

Answer 4

If you have a fixed height for your container div which contains a maximum fixed number of lines, you could easily do something like this with setting the opacity of your lines and adding them by using the prepend() function of jQuery:

EXAMPLE:

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

Just add some lines in the textbox and click submit to see what happens.