CODEWITHSUNDEEP
htmlcss
Dimi_97
Dimi_97

Reputation: 21

Automated scroll animation in div Container

I have a div container called wrapper2 that contains something like a chat. There are like 5 messages in div container called chatleft which contain pictures, the div wrapper2 is smaller than all the messages together.

That means I would need a time based automated animation that scrolls down the messages from top to bottom. Just like when the page opens, after 5 seconds the animation should start and need 10 seconds to scroll down to the last message at the bottom.

Do I need javascript for it, or is it possible to animate it in CSS, if I need to time the animation? Can you help me to get it animated?

Here's the div wrapper2

#wrapper2 {
  

  margin: 0;
  padding: 40px;
  float: left;
  height: 740px;
  width: 600px;
  background-color: #fff;
  border-top: 7px solid #000CFF;
  border-left: 7px solid #000CFF;
  border-right: 7px solid #000CFF;
  bottom: 0px;
  background-image:

 url(https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg)
}

.chatleft:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 24px solid transparent;
border-right-color: #ccc;
border-left: 0;
margin-top: -24px;
margin-left: -24px;
}

.chatleft:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 24px solid transparent;
border-right-color: #ccc;
border-left: 0;
margin-top: -24px;
margin-left: -24px;
}
<div id="wrapper2">

</div>
<div class="chatleft">
  <p>Hi, <br> here's the text:
  </p>

</div>
<div class="chatleft">
  <img src="../bilder/smartwatch.png">

</div>
<div class="chatleft">
  <img src="../bilder/smartwatch.png">

</div>

<div class="chatleft">
  <img src="../bilder/smartwatch.png">

</div>

<div class="chatleft">
  <img src="../bilder/smartwatch.png">

</div>
</div>

Upvotes: 1

Views: 611

Answers (1)

Uuuuuumm
Uuuuuumm

Reputation: 656

I'm not aware of any way to do what you want with CSS. I always use the scroll function in js

element.scroll(x-coord, y-coord)

More documentation here

You can pair that with ↓ to get what you want

setTimeout(
  function(){
    // do stuff (propably scroll in your case)
  },
  [time in miliseconds]
)

The JQuery library is really handy for animations too

$("html, body").animate({
  scrollTop: "500px"
});

Upvotes: 1

Related Questions