Fade 2 divs with content in and out

JavaScript
1

I have a div thats being used a page header, but inside it is everything it needs to be itself, but Im thinking about creating another div again with all its own content, and wondering about fading them in and out between each other.

So this is the first div below:

<div class="mainHome">
  <div class="folder">
<img src="http://www.accend4web.co.uk/golf/wp-content/uploads/2019/03/Header_Main.jpg" />
    <span class="headFirstTitle title head">HEAD:</span>
    <span class="headSecondTitle descText head">Correct alignment with</span>
    <span class="headThirdTitle descText head">the head directly over</span>
    <span class="headFourthTitle descText head">the ball will allow one to</span>
    <span class="headFifthTitle descText head">line putts up properly...</span>

<span class="kneesFirstTitle title knees">KNEES:</span>
    <span class="kneesSecondTitle descText knees">Putting is a very</span>
    <span class="kneesThirdTitle descText knees">personal thing and</span>
    <span class="kneesFourthTitle descText knees">what suits one,</span>
    <span class="kneesFifthTitle descText knees">doesn't suit others...</span>

<span class="middleFirstTitle title middle">MIDDLE:</span>
    <span class="middleSecondTitle descText">Poor grip means poor</span>
    <span class="middleThirdTitle descText">putting stroke, no</span>
    <span class="middleFourthTitle descText">overlap, hands high and</span>
    <span class="middleFifthTitle descText">poor position create</span>
    <span class="middleSixthTitle descText">problems at release...</span>
  </div>
</div>

And then the next one will be pretty much the same appart from what distiguishes it from the first one, so maybe the class mainHome, could be mainHome2 as below:

<div class="mainHome2">
  <div class="folder">
<img src="http://www.accend4web.co.uk/golf/wp-content/uploads/2019/03/Header_Main2.jpg" />
    <span class="headFirstTitle title head">HEAD:</span>
    <span class="headSecondTitle descText head">Correct alignment with</span>
    <span class="headThirdTitle descText head">the head directly over</span>
    <span class="headFourthTitle descText head">the ball will allow one to</span>
    <span class="headFifthTitle descText head">line putts up properly...</span>

<span class="kneesFirstTitle title knees">KNEES:</span>
    <span class="kneesSecondTitle descText knees">Putting is a very</span>
    <span class="kneesThirdTitle descText knees">personal thing and</span>
    <span class="kneesFourthTitle descText knees">what suits one,</span>
    <span class="kneesFifthTitle descText knees">doesn't suit others...</span>

<span class="middleFirstTitle title middle">MIDDLE:</span>
    <span class="middleSecondTitle descText">Poor grip means poor</span>
    <span class="middleThirdTitle descText">putting stroke, no</span>
    <span class="middleFourthTitle descText">overlap, hands high and</span>
    <span class="middleFifthTitle descText">poor position create</span>
    <span class="middleSixthTitle descText">problems at release...</span>
  </div>
</div>
2

If it’s a simple continuous fade then you can do that with css and keyframes alone.

e.g.

If its anything more complex then you would need JS to enhance.

(Note your html is not very semantic but I guess that was just for the demo ;))

1 Like
3

plz explain clearly, when (at what event) you want to fade?
Your question is not clear, if you want fade in/out on hover or on scroll or after a specific interval?

It will be better if you mention it clearly

regards

4

Thank you PaulOB, that worked perfectly, had to change my code around a little, but all good and works well.

This is what I wanted to achieve.

The backgrouns are almost identical appart from the man, and the lines, so got the words positioned on both and works really well.

Example

1 Like
5

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