This example demonstrate a scrolling chat window in blogger post. The chat window is transparent, it can be put above the images and div.
Here is the example:
Example
<div class="stage">
<div class="slider-wrap">
<div id="card-slider" class="slider">
<div class="slider-item">
<div class="animation-card_image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTb4Q6iqZoAaMd1F7lzNG-CHOtzBfQHeCtmec8C272EYRiSaR86LhWAlplI4z-CxveXddtq7XkFs__hPbjteAaqy1i3i8-3dFlWaEzw2Wnln40hicOg7hmhyphenhyphen8LZCnzsogUw-4fC6lQ6nFn/s1600/Screen+Shot+2019-08-07+at+9.49.15+PM.png" alt="">
</div>
<div class="animation-card_content">
<h4 class="animation-card_content_title title-2">Linked List</h4>
<p class="animation-card_content_description p-2">We create a linked list, then sequentially searches items. Linked list is simple, it is best for tiny symbol tables, but slow for large symbol tables.</p>
<p class="animation-card_content_city">sequential search</p>
</div>
</div>
<div class="slider-item">
<div class="animation-card_image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSlQYC7SPaqqPLwUSDGIUTC0ypjMVF_H_Bk6Nri91kZEe_uZRyQXYxtVge-FxQBTlPkplooNX-0CONISiu3zBTT683__w_j0bbCLYqHp0FPs3wxtOA2H7Wceyxo-_aZA3XptBcjcWzldeR/s1600/Screen+Shot+2019-08-07+at+9.51.28+PM.png" alt="">
</div>
<div class="animation-card_content">
<h4 class="animation-card_content_title title-2">Ordered Array</h4>
<p class="animation-card_content_description p-2">We keep an ordered array all the time, then use binary search to find an item. Ordered array has optimal search and space, it also supports order-based operations. However, inserting a new item is slow.</p>
<p class="animation-card_content_city">Binary Search</p>
</div>
</div>
<div class="slider-item">
<div class="animation-card_image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBbYrCkMNgwhoBIX2jrF-4pG9nJDZaxMP47RnolBlB216fRqIKLBGRFz2xa4rG6ReSJpFiQiwwXApwM4UIIyHk7vIQnXgUJFwG_o1GVe8YwRBQoyhwgPz1X1E-9Df5xwa8Z2dNPlo4e2EU/s1600/Screen+Shot+2019-08-07+at+9.51.55+PM.png" alt="">
</div>
<div class="animation-card_content">
<h4 class="animation-card_content_title title-2">Binary Search Tree</h4>
<p class="animation-card_content_description p-2">Ordered Array is too expensive to maintain. We maintain linked list based structure instead, but still use binary search to find an item. We build a binary search tree. Binary search tree is fast but still easy to build, it also supports order-based operations.</p>
<p class="animation-card_content_city">Binary Search</p>
</div>
</div>
<div class="slider-item">
<div class="animation-card_image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhYNUrAvjBz0_shc_amC0zxQq9z8wsmA083tL_Qlf90kMcj1WfLNSWmbvAIAsGhWiPnwQ6gNOpkGW80bSTwgbaVXKswVL12L8-Y3I0Eg8hcVZqHQy3sgTPLFjLqE0aEwSgxwunlNK6Src5/s1600/Screen+Shot+2019-08-07+at+9.54.03+PM.png" alt="">
</div>
<div class="animation-card_content">
<h4 class="animation-card_content_title title-2">Balanced Binary Search Tree</h4>
<p class="animation-card_content_description p-2">Binary Search Tree is fast, but it can be slow if unlucky. We balance the binary search tree with colored links and rotation operations. Balanced BST has all the benefits of BST, while it is robust, always fast no matter what.</p>
<p class="animation-card_content_city">binary search</p>
</div>
</div>
<div class="slider-item">
<div class="animation-card_image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAItQLET8gIv4T1RDrjPLPXFm83QifOksAJAm-JJjDfwgXdUyLIzJycbF-o-ohxKU6SE43PBrNCpHFJQh2couuDe1GV2CDHmrdgHGrtS4kHg2PYC-91OOKSvaLgKlVxiWb0N4R-PaWrSld/s1600/Screen+Shot+2019-08-07+at+9.54.38+PM.png" alt="">
</div>
<div class="animation-card_content">
<h4 class="animation-card_content_title title-2">hash table</h4>
<p class="animation-card_content_description p-2">We keep our items in an un-ordered array, so maintaining the collection is not expensive. However, the search don't have to be expensive. We use a hash function to quickly find the array index for any item. The hash table is the fastest for search and insertion, but it doesn't support order based operations.</p>
<p class="animation-card_content_city">Hash</p>
</div>
</div>
</div>
</div>
</div>
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
html {
width: 100%;
height: 100%;
}
.stage {
width: 800px;
height: 500px;
}
.slider-wrap {
height: 100%;
width: 100%;
}
.slider-wrap .slider {
position: absolute;
width: 100%;
left: 50px;
top: 50px;
}
.slider-item {
width: 530px;
padding: 20px 0 25px 30px;
border-radius: 10px;
background-color: #ffffff;
display: flex;
justify-content: flex-start;
position: absolute;
opacity: 0;
z-index: 0;
box-shadow: 0 4px 9px #f1f1f4;
position: absolute;
left: 0;
top: 0;
}
.slider-item .animation-card_image {
max-width: 60px;
max-height: 60px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
box-shadow: 0 4px 9px rgba(241, 241, 244, 0.72);
background-color: #ffffff;
}
.slider-item .animation-card_image img {
width: 53px;
height: 53px;
border-radius: 50%;
object-fit: cover;
}
.slider-item .animation-card_content {
width: 100%;
max-width: 374px;
margin-left: 26px;
font-family: "Open Sans", sans-serif;
}
.slider-item .animation-card_content .animation-card_content_title {
color: #4a4545;
font-size: 16px;
font-weight: 400;
letter-spacing: -0.18px;
line-height: 24px;
margin: 0;
}
.slider-item .animation-card_content .animation-card_content_description {
color: #696d74;
font-size: 15px;
font-weight: 300;
letter-spacing: normal;
line-height: 24px;
margin: 10px 0 0 0;
}
.slider-item .animation-card_content .animation-card_content_city {
font-size: 11px;
margin: 10px 0 0 0;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
color: #696d74;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gsap/1.19.1/TweenMax.min.js"></script>
<script>
var cards = $('#card-slider .slider-item').toArray();
startAnim(cards);
function startAnim(array){
if(array.length >= 4 ) {
TweenMax.fromTo(array[0], 0.5, {x:0, y: 0, opacity:0.75}, {x:0, y: -120, opacity:0, zIndex: 0, delay:0.03, ease: Cubic.easeInOut, onComplete: sortArray(array)});
TweenMax.fromTo(array[1], 0.5, {x:79, y: 125, opacity:1, zIndex: 1}, {x:0, y: 0, opacity:0.75, zIndex: 0, boxShadow: '-5px 8px 8px 0 rgba(82,89,129,0.05)', ease: Cubic.easeInOut});
TweenMax.to(array[2], 0.5, {bezier:[{x:0, y:250}, {x:65, y:200}, {x:79, y:125}], boxShadow: '-5px 8px 8px 0 rgba(82,89,129,0.05)', zIndex: 1, opacity: 1, ease: Cubic.easeInOut});
TweenMax.fromTo(array[3], 0.5, {x:0, y:400, opacity: 0, zIndex: 0}, {x:0, y:250, opacity: 0.75, zIndex: 0, ease: Cubic.easeInOut}, );
} else {
$('#card-slider').append('<p>Sorry, carousel should contain more than 3 slides</p>')
}
}
function sortArray(array) {
clearTimeout(delay);
var delay = setTimeout(function(){
var firstElem = array.shift();
array.push(firstElem);
return startAnim(array);
},6000)
}
</script>
