How would I move the rotating text to the left side?

asasass · May 27, 2019, 8:46pm

So it looks like this.

And how would I make it continuous so it doesn’t pause?

  <section class="wrapper">

    <h2 class="sentence">Example.
      <div class="slidingVertical">
        <span>Example</span>
        <span>Example</span>
        <span>Example</span>
      </div>
    </h2>

  </section>

body {
  background-color: #00abe9;
  font-family: 'Raleway', sans-serif;
}

/*Sentence*/

.sentence {
  color: #222;
  font-size: 30px;
  text-align: left;
}

/*Wrapper*/

.wrapper {
  background-color: #f5f5f5;
  font-family: 'Raleway', sans-serif;
  margin: 100px auto;
  padding: 40px 40px;
  position: relative;
  width: 70%;
}

/*Vertical Sliding*/

.slidingVertical {
  display: inline;
  text-indent: 8px;
}

.slidingVertical span {
  animation: topToBottom 12.5s linear infinite 0s;
  -ms-animation: topToBottom 12.5s linear infinite 0s;
  -webkit-animation: topToBottom 12.5s linear infinite 0s;
  color: #00abe9;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}

.slidingVertical span:nth-child(2) {
  animation-delay: 2.5s;
  -ms-animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
}

.slidingVertical span:nth-child(3) {
  animation-delay: 5s;
  -ms-animation-delay: 5s;
  -webkit-animation-delay: 5s;
}

.slidingVertical span:nth-child(4) {
  animation-delay: 7.5s;
  -ms-animation-delay: 7.5s;
  -webkit-animation-delay: 7.5s;
}

.slidingVertical span:nth-child(5) {
  animation-delay: 10s;
  -ms-animation-delay: 10s;
  -webkit-animation-delay: 10s;
}

/*topToBottom Animation*/

@-moz-keyframes topToBottom {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -moz-transform: translateY(-50px);
  }
  10% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }
  25% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }
  30% {
    opacity: 0;
    -moz-transform: translateY(50px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes topToBottom {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -webkit-transform: translateY(-50px);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  25% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  30% {
    opacity: 0;
    -webkit-transform: translateY(50px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes topToBottom {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -ms-transform: translateY(-50px);
  }
  10% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  25% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  30% {
    opacity: 0;
    -ms-transform: translateY(50px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/*Horizontal Sliding*/

.slidingHorizontal {
  display: inline;
  text-indent: 8px;
}

Ray.H · May 27, 2019, 10:35pm

The first thing you need to do is to correct your invalid html.

You can’t nest a block level div in an <h> tag. The content model for an h tag is phrasing content only.

<section class="wrapper">
  <h2 class="sentence">Example</h2>
  <div class="slidingVertical">
    <span>Example</span>
    <span>Example</span>
    <span>Example</span>
  </div>
</section>

Now with that structure you can use flex to style it the way you had it. You can also use the order property to swap sides like you are wanting.

Make sure that you really need a heading there though. Don’t use an h2 tag if it’s not a heading that follows an h1 tag. Your class name “sentence” on that h2 is confusing.

asasass · May 28, 2019, 12:35am

This was my attempt:

coothead · May 28, 2019, 11:18am

Hi there asasass,

you can see a responsive example here…

https://jsfiddle.net/Lbawtrmq/

…and the full code here…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#container {
    text-align: center;
 }

.wrapper {
    position: relative;
    display: inline-block;
    padding: 3em;
    border-radius: 0.5em;
    box-shadow:inset 0 0 1em rgba( 0, 171, 233, 0.5 ),
           0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
    background-color: #fff;
    border: 1px solid #00abe9;
 }

.wrapper h1 {
   margin: 0;
   font-size: 2em;
   line-height: 1em;    
 }

.wrapper h1 > span{
    display: inline-block;
 }

.wrapper h1 > span span{
    position: absolute; 
    top: 0;
    background-color: #fff;
    color: #00abe9;
    opacity: 0;
    animation: topToBottom 5s  infinite;
 }

.wrapper h1 > span span:nth-of-type(2) {
    animation-delay: 1.666s;
 }

.wrapper h1 > span span:nth-of-type(3) {
    animation-delay: 3.333s;
 }

.wrapper h1 > span span:nth-of-type( 4 ) {
    margin-right: 1.25em;
    position: relative;
    animation: none;
 }

@media (max-width: 27em ) {
.wrapper {
    padding: 1.875em;
  }
.wrapper h1 {
   font-size: 1.25em;  
  }
 }

@keyframes topToBottom {
    0% {
        z-index: 1;
        opacity: 0;
        transform: translateY( 0 );
      }

   37.5% {
        opacity: 1;
        transform: translateY( 1.5em );
      }

   62.5% {
        opacity: 0.4;
        transform: translateY( 1.5em );
      }

  100% {
        z-index: 0;
        transform: translateY( 3em );
     }
 }
</style>

</head>
<body>

<div id="container">
 <div class="wrapper">
  <h1>
   <span>
    <span>Example 1</span>
    <span>Example 2</span>
    <span>Example 3</span>
    <span>Example</span>
   </span>Example.
  </h1>
 </div>
</div>

</body>
</html>

coothead

asasass · May 28, 2019, 3:41pm

Thank you.

asasass · May 28, 2019, 3:45pm

How come there is an extra Span?

Is that just used as white space?

<span>Example</span>

   <span>
    <span>Example 1</span>
    <span>Example 2</span>
    <span>Example 3</span>
    <span>Example</span>
   </span>Example.

coothead · May 28, 2019, 4:13pm

Hi there asasass,

as the three spans are set to “position: absolute”,
without the fourth span, set to “position: relative”,
the project would render like this…

force

Putting it in creates the required space for the
animation as this image indicates…

force1

coothead

asasass · May 28, 2019, 4:14pm

How would I be able to bring the text in closer like this?

Currently it looks like this

coothead · May 28, 2019, 4:24pm

Hi there asasass,

like this, perhaps…

https://jsfiddle.net/rm5wdzo1/

…by adjusting “margin-right” value


.wrapper h1 > span span:nth-of-type( 4 ) {
    margin-right: 0.4em;
    position: relative;
    animation: none;
 }

coothead

asasass · May 28, 2019, 4:53pm

This one is good

How would I be able to do the above with this set of text?

If both are not the same length?

coothead · May 28, 2019, 5:10pm

Hi there asasass,

like this, possibly…

https://jsfiddle.net/bwy9rt3f/1/

coothead

asasass · May 28, 2019, 6:48pm

I have a question

Can any of these animations on here be used in place of
animation: topToBottom

I found this that shows other types of text animations.

Can one of these be used instead?

https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

This is an example of one:

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

asasass · May 28, 2019, 7:04pm

I thought it was just switching out a word, that whole section would need to be rewritten.

In that case. Demo 1

How would I be able to add that text transition to this?


.rw-words-1 span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	color: #6b969d;
	-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: #6b889d;
}
.rw-words-1 span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
	color: #6b739d;	
}
.rw-words-1 span:nth-child(4) { 
    -webkit-animation-delay: 9s; 
	-ms-animation-delay: 9s; 
	animation-delay: 9s; 
	color: #7a6b9d;
}
.rw-words-1 span:nth-child(5) { 
    -webkit-animation-delay: 12s; 
	-ms-animation-delay: 12s; 
	animation-delay: 12s; 
	color: #8d6b9d;
}
.rw-words-1 span:nth-child(6) { 
    -webkit-animation-delay: 15s; 
	-ms-animation-delay: 15s; 
	animation-delay: 15s; 
	color: #9b6b9d;
}
@-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; }
}

asasass · May 28, 2019, 7:36pm

I was able to get Demo 1 into a fiddle:

All I’m doing is transferring the text animation above over to this one.

This is the text animation I’m trying to get to work in here:

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

.rw-words-1 span:nth-child(2) {
  animation-delay: 3s;
  color: #6b889d;
}

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

.rw-words-1 span:nth-child(4) {
  animation-delay: 9s;
  color: #7a6b9d;
}

.rw-words-1 span:nth-child(5) {
  animation-delay: 12s;
  color: #8d6b9d;
}

.rw-words-1 span:nth-child(6) {
  animation-delay: 15s;
  color: #9b6b9d;
}

system · August 28, 2019, 2:36am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Adding text to the sliding doors/panels HTML & CSS	24	2566	April 17, 2022
Sliding hover text alignment HTML & CSS	10	13887	December 26, 2017
Please help with a difficult task HTML & CSS	15	2655	November 14, 2015
Possibile to nudge text two px on a:hover? Get Started	22	10567	December 3, 2010
Make :before spread rtl not ltr HTML & CSS	18	4100	March 28, 2015

Related topics