Как позиционировать текст наполовину через нижний ответно

В настоящее время я работаю с эффектами параллакса на веб-сайте, где мне нужен абзац, чтобы пройти через половину в нижней части страницы. Но поскольку абзац должен реагировать на размер шрифта, я не совсем уверен, нужно ли мне преобразовывать текст в изображение или использовать чистый текст для решения этой проблемы? Похоже, что решение с изображениями позволяет мне делать некоторые трюки с использованием чистого JavaScript.Как позиционировать текст наполовину через нижний ответно

В целом я чувствую, что очень сложно контролировать текст на странице, особенно для параллакса, где текст может отображаться в разных положениях. Может быть, для этой цели есть хорошие инструменты?

https://jsfiddle.net/pt88w26u/2/

HTML:

<section id="first"> 
    <div> 
    <p>This is a test</p> 
    </div> 
</section> 
<section id="second"> 
</section>

CSS:

html, 
body { 
    height: 100%; 
    color: #fff; 
    font-size: 16px; 
    margin: 0; 
    padding: 0; 
} 

section { 
    min-height: 100%; 
} 

#first { 
    background-color: #000; 
} 

#second { 
    background-color: #ddd; 
} 

section > div { 
    top: 86%; 
    font-size: 5em; 
    position: absolute; 
    transform: translate(-50%, 0%); 
    left: 50%; 
}