CODEWITHSUNDEEP
javascriptcsscenter
Ryan Jacques
Ryan Jacques

Reputation: 41

Center a CSS object in a box

Trying to get text affected by JS and CSS to centre in the box, but it just will not work whatever I try.

See below (or in this CodePen), for the code.

   var words = document.getElementsByClassName('word');
   var wordArray = [];
   var currentWord = 0;

   words[currentWord].style.opacity = 1;
   for (var i = 0; i < words.length; i++) {
 splitLetters(words[i]);
   }

   function changeWord() {
 var cw = wordArray[currentWord];
 var nw = currentWord == words.length - 1 ? wordArray[0] : wordArray[currentWord + 1];
 for (var i = 0; i < cw.length; i++) {
   animateLetterOut(cw, i);
 }

 for (var i = 0; i < nw.length; i++) {
   nw[i].className = 'letter behind';
   nw[0].parentElement.style.opacity = 1;
   animateLetterIn(nw, i);
 }

 currentWord = (currentWord == wordArray.length - 1) ? 0 : currentWord + 1;
   }

   function animateLetterOut(cw, i) {
 setTimeout(function() {
   cw[i].className = 'letter out';
 }, i * 80);
   }

   function animateLetterIn(nw, i) {
 setTimeout(function() {
   nw[i].className = 'letter in';
 }, 340 + (i * 80));
   }

   function splitLetters(word) {
 var content = word.innerHTML;
 word.innerHTML = '';
 var letters = [];
 for (var i = 0; i < content.length; i++) {
   var letter = document.createElement('span');
   letter.className = 'letter';
   letter.innerHTML = content.charAt(i);
   word.appendChild(letter);
   letters.push(letter);
 }

 wordArray.push(letters);
   }

   changeWord();
   setInterval(changeWord, 4000);
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:600);

 body {
   font-weight: 600;
   font-size: 40px;
 }
 
 .text {
   margin: auto;
   width: 60%;
   border: 3px solid #73AD21;
   padding: 10px;
   text-align: center;
 }
 
 p {
   display: inline-block;
   vertical-align: top;
   margin: 0;
   font-weight: 600;
   font-size: 40px;
 }
 
 .word {
   position: absolute;
   width: 500px;
   opacity: 0;
 }
 
 .letter {
   display: inline-block;
   position: relative;
   float: left;
   transform: translateZ(25px);
   transform-origin: 50% 50% 25px;
 }
 
 .letter.out {
   transform: rotateX(90deg);
   transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
 }
 
 .letter.behind {
   transform: rotateX(-90deg);
 }
 
 .letter.in {
   transform: rotateX(0deg);
   transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .wisteria {
   color: #8e44ad;
 }
 
 .belize {
   color: #2980b9;
 }
 
 .pomegranate {
   color: #c0392b;
 }
 
 .green {
   color: #f49a4d;
 }
 
 .midnight {
   color: #98e322;
 }
<div class="text">
  <p>unleash the power of </p>
  <p>
    <span class="word wisteria">visual media.</span>
    <span class="word belize">visual media.</span>
    <span class="word pomegranate">visual media.</span>
    <span class="word green">visual media.</span>
    <span class="word midnight">visual media.</span>
  </p>
</div>

Upvotes: 4

Views: 137

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106008

flex can make this easy :

var words = document.getElementsByClassName('word');
   var wordArray = [];
   var currentWord = 0;

   words[currentWord].style.opacity = 1;
   for (var i = 0; i < words.length; i++) {
 splitLetters(words[i]);
   }

   function changeWord() {
 var cw = wordArray[currentWord];
 var nw = currentWord == words.length - 1 ? wordArray[0] : wordArray[currentWord + 1];
 for (var i = 0; i < cw.length; i++) {
   animateLetterOut(cw, i);
 }

 for (var i = 0; i < nw.length; i++) {
   nw[i].className = 'letter behind';
   nw[0].parentElement.style.opacity = 1;
   animateLetterIn(nw, i);
 }

 currentWord = (currentWord == wordArray.length - 1) ? 0 : currentWord + 1;
   }

   function animateLetterOut(cw, i) {
 setTimeout(function() {
   cw[i].className = 'letter out';
 }, i * 80);
   }

   function animateLetterIn(nw, i) {
 setTimeout(function() {
   nw[i].className = 'letter in';
 }, 340 + (i * 80));
   }

   function splitLetters(word) {
 var content = word.innerHTML;
 word.innerHTML = '';
 var letters = [];
 for (var i = 0; i < content.length; i++) {
   var letter = document.createElement('span');
   letter.className = 'letter';
   letter.innerHTML = content.charAt(i);
   word.appendChild(letter);
   letters.push(letter);
 }

 wordArray.push(letters);
   }

   changeWord();
   setInterval(changeWord, 4000);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
 body {
   font-weight: 600;
   font-size: 40px;
   margin:auto;
 }
html {
  display:flex;
  height:100%;
}
 .text {
   border: 3px solid #73AD21;
   padding: 10px;
   text-align: center;
 }
 
 p {
   display: inline-block;
   vertical-align: top;
   margin: 0;
   font-weight: 600;
   font-size: 40px;  
 }
 
 .word {
   position: absolute;
   opacity: 0;
 }
 
 .letter {
   display: inline-block;
   position: relative;
   float: left;
   transform: translateZ(25px);
   transform-origin: 50% 50% 25px;
 }
 
 .letter.out {
   transform: rotateX(90deg);
   transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
 }
 
 .letter.behind {
   transform: rotateX(-90deg);
 }
 
 .letter.in {
   transform: rotateX(0deg);
   transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .wisteria {
   color: #8e44ad;
 }
 
 .belize {
   color: #2980b9;
 }
 
 .pomegranate {
   color: #c0392b;
 }
 
 .green {
   color: #f49a4d;
 }
 
 .midnight {
   color: #98e322;
 }
<div class="text">
  <p>unleash the power of </p>
  <p>
    <span class="word wisteria">visual media.</span>
    <span class="word belize">visual media.</span>
    <span class="word pomegranate">visual media.</span>
    <span class="word green">visual media.</span>
    <span class="word midnight">visual media.</span>
  </p>
</div>

you may also want to give some size to second p holding absolute text.

p+p {
  width:5.5em;
}

DEMO

Upvotes: 1

Related Questions