Search code examples
javascripthtmlcssparallax

How to position text halfway through bottom responsively

I am currently working with parallax effects on a website where i need a paragraph to go through halfway on the bottom of the page. But since the paragraph has to be responsive in font-size i am not quite sure if i need to convert the text into image or stick with pure text to solve this issue? It seems like a solution with images can enable me to do some tricks with pure JavaScript.

In general i feel it is very hard to control the text on the page especially for parallax where the text can appear in different positions. Maybe there are some good tools for this purpose?

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%;
}

enter image description here

Solution

  • You can do this only with css.

    To do this, set the position and transform of the div to bottom:0px; transform:translate(-50%,50%);

    and remove the default margin on the p tag.

    https://jsfiddle.net/pt88w26u/5/