Hack Forums
Little Help Needed - Rotating Text with CSS - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Little Help Needed - Rotating Text with CSS (/showthread.php?tid=6005775)

Little Help Needed - Rotating Text with CSS - Rishabh - Sep 7, 2019

Hey guys!

So I referred to this guide - https://labrumfield.com/rotating-text-with-css-animations/ for adding rotating text in a heading on my webpage.

I had to obviously modify the final output used by the blogger there in order for it suite my web page's design. Essentially, my heading is aligned centrally, while she has aligned it to the left. Like her, I am using the code to rotate three sets of words as well. So you can refer to the final set of code she used on her website.

The problem I am facing is that each set is coming down below the other, rather than showing up in the same place as the last set, i.e. this - https://gph.is/g/apVDXd6

Here's the code -

HTML:
Code
        <div id="cspio-content" class="wrapper">
                                            <img id="cspio-logo" src="images/logo.png">
                                            <h1 id="cspio-headline" class="sentence">TECHNOLOGY THAT <br />
                                            <div class="slidingVertical">
          <span>REDEFINES LEARNING</span>
          <span>SPARKS KNOWLEDGE</span>
          <span>GUIDES RESEARCH</span>
     </div>
                                            </h1>

CSS:
Code
/*Wrapper*/
.wrapper{
    margin: 100px auto;
    position: relative;
    width: 100%;
}
    
/*Sentence*/
.sentence{
    text-align:center;
}    
    
/*Vertical Sliding*/
.slidingVertical {
    display: inline;
    text-indent: 8px;
}
.slidingVertical span{
    animation: topToBottom 7.5s linear infinite 0s;
    -ms-animation: topToBottom 7.5s linear infinite 0s;
    -webkit-animation: topToBottom 7.5s linear infinite 0s;
    color: #1e66b5;
    opacity: 0;
    overflow: hidden;
    position: relative;
}
.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;
}


/*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; }
}

I am just not sure how to go about fixing this issue at the moment. Any help would be appreciated.

RE: Little Help Needed - Rotating Text with CSS - Nachfolger - Sep 7, 2019

Looks like they should be placed in a absolute position, rather than relative to eachother. In fact, her code even shows this, and I'm not sure why you changed it to position: relative;

Code
.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;
}


RE: Little Help Needed - Rotating Text with CSS - Rishabh - Sep 7, 2019

(Sep 7, 2019 12:32 PM)Nachfolger Wrote:  Looks like they should be placed in a absolute position, rather than relative to eachother. In fact, her code even shows this, and I'm not sure why you changed it to position: relative;

Code
.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;
}

That's because putting it in absolute made the animated text drift to the right side, as in not below the 'TECHNOLOGY THAT' line centrally aligned. I'll PM you the link to the web page if you could have a look?

RE: Little Help Needed - Rotating Text with CSS - Nachfolger - Sep 7, 2019

(Sep 7, 2019 12:52 PM)Rishabh Wrote:  That's because putting it in absolute made the animated text drift to the right side, as in not below the 'TECHNOLOGY THAT' line centrally aligned. I'll PM you the link to the web page if you could have a look?
I don't usually work out of thread, but that is fine. It will be easier anyway.

RE: Little Help Needed - Rotating Text with CSS - Rishabh - Sep 7, 2019

(Sep 7, 2019 12:59 PM)Nachfolger Wrote:  I don't usually work out of thread, but that is fine. It will be easier anyway.

Thanks! I was just not comfortable posting the link here on the thread.

Appreciate your help in advance 🙂

RE: Little Help Needed - Rotating Text with CSS - Nachfolger - Sep 7, 2019

(Sep 7, 2019 01:16 PM)Rishabh Wrote:  Thanks! I was just not comfortable posting the link here on the thread.

Appreciate your help in advance  🙂
The following code should solve your issues. Do not copy and paste it, only make the appropriate changes to the existing classes.
Code
.slidingVertical {
    height: 94px;
    display: block;
}

.slidingVertical span {
    position: absolute;
    left: 0;
    right: 0;
}
PS, the shade of blue does not look very nice. Maybe consider changing that.

Let me know if you have any other issues.

RE: Little Help Needed - Rotating Text with CSS - Rishabh - Sep 7, 2019

(Sep 7, 2019 01:44 PM)Nachfolger Wrote:  The following code should solve your issues. Do not copy and paste it, only make the appropriate changes to the existing classes.
Code
.slidingVertical {
height: 94px;
display: block;
}

.slidingVertical span {
position: absolute;
left: 0;
right: 0;
}
PS, the shade of blue does not look very nice. Maybe consider changing that.

Let me know if you have any other issues.

Thank you so much! It works fine now. I also added the css media query for smaller devices and altered the height for slidingVertical. Works perfectly!

I have been trying to figure out an alternate color, that would go well with all the three colored elements - the animated text, the subtitle below that and the social media icons below that. It's just that the background photo has some contrasting colors under each element, hence a little harder to pick a color with slightly varying shades.