How to add ticker scroll to the bottom, not top

How would this be done?

I would want to fade it out, or remove it after the play button is clicked.

.slide would be used for that.

https://jsfiddle.net/zeyoLd3f/1/

      <div class="video-one">
        <div class="alert bg-yellow">

          <div class="message animate">
            <ul>
              <li class="text msg-0">First message is displayed here lorem ipsum, dolor sit amet adispicing&nbsp;&nbsp;—&nbsp;&nbsp;</li>
              <li class="text msg-1">Second Message Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed purus mi. Etiam et elit vulputate, venenatis nibh in, lobortis elit. Phasellus ullamcorper purus ut diam tincidunt venenatis. Sed tincidunt vestibulum malesuada.&nbsp;&nbsp;—&nbsp;&nbsp;</li>
              <li class="text msg-2">Third message is shown scrolling here.&nbsp;&nbsp;—&nbsp;&nbsp;</li>
            </ul>
          </div>

How do I fix this? https://jsfiddle.net/wjq5fd70/

Now the play button is not staying in the middle.

Maybe I keep putting it in the wrong spot in the html.

.alert {
  padding: 4px;
  position: absolute;
  top: 360px;
  left: 0;
  bottom: 0;
  right: 0;
  z-index:1;
}
  <div class="curtain">


    <div class="alert bg-yellow">

      <div class="message animate">
        <ul>
          <li class="text msg-0">First message is displayed here lorem ipsum, dolor sit amet adispicing&nbsp;&nbsp;—&nbsp;&nbsp;</li>
          <li class="text msg-1">Second Message Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed purus mi. Etiam et elit vulputate, venenatis nibh in, lobortis elit. Phasellus ullamcorper purus ut diam tincidunt venenatis. Sed tincidunt vestibulum malesuada.&nbsp;&nbsp;—&nbsp;&nbsp;</li>
          <li class="text msg-2">Third message is shown scrolling here.&nbsp;&nbsp;—&nbsp;&nbsp;</li>
        </ul>
      </div>
    </div>

Another attempt: https://jsfiddle.net/wjq5fd70/2/

<div class="wrap hide">
        <div class="video video-frame" data-id=""></div>
      </div>

      <div class="video-one"></div>
    </div>


    <div class="alert bg-yellow">

      <div class="message animate">
        <ul>
          <li class="text msg-0">First message is displayed here lorem ipsum, dolor sit amet adispicing&nbsp;&nbsp;—&nbsp;&nbsp;</li>
          <li class="text msg-1">Second Message Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed purus mi. Etiam et elit vulputate, venenatis nibh in, lobortis elit. Phasellus ullamcorper purus ut diam tincidunt venenatis. Sed tincidunt vestibulum malesuada.&nbsp;&nbsp;—&nbsp;&nbsp;</li>
          <li class="text msg-2">Third message is shown scrolling here.&nbsp;&nbsp;—&nbsp;&nbsp;</li>
        </ul>
      </div>
    </div>
    
    <a href="https://www.google.com/">
      <div class="exit"></div>
    </a>

  </div>
  <button class="play" type="button" aria-label="Open"></button>
</div>

To get the ticker to the bottom just add this:

.video-one{
  display:flex;
  align-items:flex-end;
}

Like this:

.video-one{
  display:flex;
  align-items:flex-end;
}
.alert{transition:opacity 4s ease;}
.slide .video-one .alert{opacity:0}

The message needs to be inside the ratio-keeper as in your other demo otherwise it stretches the container and forces a horizontal scroll.

1 Like

This hides it.

 .video-one .alert {
   opacity:0;
}

If I wanted it to fade it in when the curtain gets down to the bottom, I would do?

And you’d need to change the css to this.

.alert {
  display: flex;
  position: relative;
  text-decoration: none;
  position:absolute;
  left:0;
  bottom:0;
}

Play around with this (from this demo):

.alert{transition:opacity 8s ease 8s;opacity:0;}
.video-one.slide .alert{opacity:1;}
.slide .video-one .alert{opacity:0;transition-delay:1s;}

I tried that here and it still forces the horizontal scroll: https://jsfiddle.net/m3rzn04u/

You put it in the wrong place again. I mentioned a few times that the ratio-keeper is the container not trhe viewport in this example.

It should be here.

<div class="container">
  <div class="curtain">
    <div class="ratio-keeper">
      <div class="fence">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="fan">
        <svg width="70%" height="70%" viewBox="76 130 381 381">
          <g id="fan">
            <path fill="#000" stroke="#000" d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
          </g>
        </svg>
      </div>
      <div class="cross"></div>

      <div class="wrap hide">
        <div class="video video-frame" data-id=""></div>
      </div>

      <div class="video-one"> </div>
      <div class="alert bg-yellow">

        <div class="message animate">
          <ul>
            <li class="text msg-0">First message is displayed here lorem ipsum, dolor sit amet adispicing&nbsp;&nbsp;—&nbsp;&nbsp;</li>
            <li class="text msg-1">Second Message Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed purus mi. Etiam et elit vulputate, venenatis nibh in, lobortis elit. Phasellus ullamcorper purus ut diam tincidunt venenatis. Sed tincidunt vestibulum malesuada.&nbsp;&nbsp;—&nbsp;&nbsp;</li>
            <li class="text msg-2">Third message is shown scrolling here.&nbsp;&nbsp;—&nbsp;&nbsp;</li>
          </ul>
        </div>
      </div>




    </div>
    <a href="https://www.google.com/">
      <div class="exit"></div>
    </a>

  </div>
  <button class="play" type="button" aria-label="Open"></button>
</div>

You didn’t add the correct css either.

.alert {
  display: flex;
  position: relative;
  text-decoration: none;
  position:absolute;
  bottom:0;
  left:0;
  top:auto;
}

Screen Shot 2022-11-13 at 14.36.03

1 Like

It is still not good: https://jsfiddle.net/mL1u6gj4/

Why is this one wrong?

I put in what you gave me.

If I wanted it to disappear right away I would use:

visibility: hidden; or display: none

Opacity alone does not do it.

.slide .video-one .alert {
  opacity: 0;
  /*transition-delay: 0ms;*/
}

Because you have alert twice in your code and over-ride the rules I gave you here after the alert .message block.

.alert .message {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-left: 0px;
  color: #000;
  font-size: 16px;
  letter-spacing: -.2px;
  line-height: 22px;
  text-transform: uppercase;
}

/* this one is a duplicate with wrong values */
.alert {
  display: flex;
  position: relative;
  text-decoration: none;
}
1 Like

You need transition:none.

.slide .video-one .alert{opacity:0;transition:none;}

Assuming we are talking about the code I gave you for this demo.

1 Like