CODEWITHSUNDEEP
htmlcsscss-animations
wamkam
wamkam

Reputation: 29

How do I center this text animation?

Super new to text animation and coding in general - so apologies in advance! I'm currently trying to center this entire text animation on a header section of a website. I've been playing around with the css, but I'm having a hard time getting it to look centered and stay horizontal and look nice on mobile. Any advice or info would be great :) Thanks so much!

Here it is! https://codepen.io/kamwam/pen/PoYzNqw

.rw-wrapper {
  width: 80%;
  position: absolute;
  text-align: center;
  margin: 110px auto 0 auto;
  font-family: 'Playfair Display';
  font-weight: 600;
  padding: 10px;
}

.after {
  margin-left: 134px;
}

.rw-sentence {
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

.rw-sentence span {
  color: #333;
  font-size: 200%;
  font-weight: 400;
}

.rw-words {
  display: inline;
  text-indent: 10px;
}

.rw-words-1 span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #0076bb;
  -webkit-animation: rotateWord 18s linear infinite 0s;
  -ms-animation: rotateWord 18s linear infinite 0s;
  animation: rotateWord 18s linear infinite 0s;
}

.rw-words-1 span:nth-child(2) {
  -webkit-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(3) {
  -webkit-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(4) {
  -webkit-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(5) {
  -webkit-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(6) {
  -webkit-animation-delay: 15s;
  -ms-animation-delay: 15s;
  animation-delay: 15s;
  color: #0076bb;
}

@-webkit-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -ms-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -ms-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media screen and (max-width: 768px) {
  .rw-sentence {
    font-size: 18px;
  }
}

@media screen and (max-width: 320px) {
  .rw-sentence {
    font-size: 9px;
  }
}
<link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet' type='text/css'>

<section class="rw-wrapper">
  <div class="rw-sentence">
    <span>Ties made for your</span>

    <div class="rw-words rw-words-1">
      <span>outdoor</span>
      <span>modern</span>
      <span>vintage</span>
      <span>garden</span>
      <span>nautical</span>
      <span>modern</span>
    </div>
    <span class="after"> wedding</span>

  </div>
</section>

Upvotes: 2

Views: 188

Answers (7)

Pierre-Yves Legeay
Pierre-Yves Legeay

Reputation: 648

I forked your pen here.

I removed most margin and padding and here is what I have (I commented what I did in the code) :

.rw-sentence {
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);

  /* max-content make the width fit the content "at is largest" (without wrap) */
  /* this allow margin: 0 auto; to center it without white space 
     (It fit the box to the text and center the box) */
  width: max-content;
  margin: 0 auto;
  /* This is also necessary, otherwise you'd have to compensate for the difference
     in height with the container one way or another */
  height: 100%;
}

.rw-sentence span {
  color: #333;
  font-size: 200%;
  /* I fiddled to find the right line height to fit the height of the container */
  /* not sure that's "best practice" but it work :) */
  line-height: 140%;
  font-weight: 400;
 }

Edit

Read afterward about the responsive issue.

html {
  /* define a root font-size */
  /* using unit like vw (a % of the width of the viewport 
     or vmax (a % of the largest between the height and width of the viewport
     can make your design more fluid as it will adjust with the device viewport */

  font-size: 16px;
}

/* I set this container font-size to "1 time the root font-size" 
   The font size in your span (200%) is 200% of this font-size here 
   If you use 'rem' for other length (like width, height ..) it will still
   be representing the root font-size (here x time 16px) */

.rw-sentence {
  font-size: 1rem;

/* This is the values I chose for the media queries but feel free to 
   play around with those values, trying 'vw', 'vmax', using rem ...*/

@media screen and (max-width: 860px) {
  html {
    font-size: 10px;
  }
}

@media screen and (max-width: 400px) {
  html {
    font-size: 8px;
  }
}

Upvotes: 2

Chris
Chris

Reputation: 363

I would recomend using style="margin-left: 10px" just inside your <span> so that it looks like:

<span style="margin-left: 10px">

And then just change the ten pixels until the text is centered. I tried to use align='center' and text-align but they do not work.

Upvotes: 0

Michael Haephrati
Michael Haephrati

Reputation: 4245

Try this. Update this CSS 

rw-sentence #Class
.rw-sentence {
margin: 0;
text-align: center;;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

Upvotes: 0

saraswati
saraswati

Reputation: 139

you have to just edit the following css code

.rw-sentence {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .rw-sentence {
    font-size: 16px;
  }
}

@media screen and (max-width: 320px) {
  .rw-sentence {
    font-size: 12px;
  }
}

and never use font size less then 12px in mobile view.

Upvotes: 1

Razvan Zamfir
Razvan Zamfir

Reputation: 4712

Use left: 50%; with transform: translateX(-50%); to center the absolutely positioned element regardless of its width. And do not mention any width for <section class="rw-wrapper">.

Also, you don't have to reduce font-size so drastically for mobile resolutions. I Have not reduced it at all. See below: 

.rw-wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 110px;
  font-family: 'Playfair Display';
  font-weight: 600;
  padding: 10px;
}

.after {
  margin-left: 134px;
}

.rw-sentence {
  margin: 0;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

.rw-sentence span {
  color: #333;
  font-size: 200%;
  font-weight: 400;
}

.rw-words {
  display: inline;
  text-indent: 10px;
}

.rw-words-1 span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #0076bb;
  -webkit-animation: rotateWord 18s linear infinite 0s;
  -ms-animation: rotateWord 18s linear infinite 0s;
  animation: rotateWord 18s linear infinite 0s;
}

.rw-words-1 span:nth-child(2) {
  -webkit-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(3) {
  -webkit-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(4) {
  -webkit-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(5) {
  -webkit-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(6) {
  -webkit-animation-delay: 15s;
  -ms-animation-delay: 15s;
  animation-delay: 15s;
  color: #0076bb;
}

@-webkit-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -ms-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -ms-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media screen and (min-width: 576px) {
  .rw-wrapper {
    white-space: nowrap;
  }
}
<link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet' type='text/css'>

<section class="rw-wrapper">
  <div class="rw-sentence">
    <span>Ties made for your</span>

    <div class="rw-words rw-words-1">
      <span>outdoor</span>
      <span>modern</span>
      <span>vintage</span>
      <span>garden</span>
      <span>nautical</span>
      <span>modern</span>
    </div>
    <span class="after"> wedding</span>

  </div>
</section>

Upvotes: 0

Nikki Pantony
Nikki Pantony

Reputation: 173

You could use CSS Grid for this, all you need to change in your code is as below and it will work!

.rw-wrapper {
  display: grid;
  width: 100%;
  height: 100vh;
}

.rw-sentence {
  margin: auto;
  max-width: 300px;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

Happy coding. :)

Upvotes: 0

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

Apply Flexbox layout to the .rw-wrapper div. Then the contents can easily be centered using align-items and justify-content.

.rw-wrapper {
  display: flex; /* turn this into a `flexbox` container */
  align-items: center; /* aligns content vertically */
  justify-content: center; /* aligns content horizontally */
}

A great resource on Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.rw-wrapper {
  border: 1px solid blue; /* just so you can see the div in question easier, remove this */
  display: flex; /* turn this into a `flexbox` container */
  align-items: center; /* aligns content vertically */
  justify-content: center; /* aligns content horizontally */
  
  width: 80%;
  position: absolute;
  text-align: center;
  margin: 110px auto 0 auto;
  font-family: 'Playfair Display';
  font-weight: 600;
  padding: 10px;
}

.after {
  margin-left: 134px;
}

.rw-sentence {
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

.rw-sentence span {
  color: #333;
  font-size: 200%;
  font-weight: 400;
}

.rw-words {
  display: inline;
  text-indent: 10px;
}

.rw-words-1 span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #0076bb;
  -webkit-animation: rotateWord 18s linear infinite 0s;
  -ms-animation: rotateWord 18s linear infinite 0s;
  animation: rotateWord 18s linear infinite 0s;
}

.rw-words-1 span:nth-child(2) {
  -webkit-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(3) {
  -webkit-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(4) {
  -webkit-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(5) {
  -webkit-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
  color: #0076bb;
}

.rw-words-1 span:nth-child(6) {
  -webkit-animation-delay: 15s;
  -ms-animation-delay: 15s;
  animation-delay: 15s;
  color: #0076bb;
}

@-webkit-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -ms-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -ms-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media screen and (max-width: 768px) {
  .rw-sentence {
    font-size: 18px;
  }
}

@media screen and (max-width: 320px) {
  .rw-sentence {
    font-size: 9px;
  }
}
<link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet' type='text/css'>

<section class="rw-wrapper">
  <div class="rw-sentence">
    <span>Ties made for your</span>

    <div class="rw-words rw-words-1">
      <span>outdoor</span>
      <span>modern</span>
      <span>vintage</span>
      <span>garden</span>
      <span>nautical</span>
      <span>modern</span>
    </div>
    <span class="after"> wedding</span>

  </div>
</section>

Upvotes: 0

Related Questions