You can showcase websites, web apps, and blog posts by adding a simple scroll animation to the default posts-01 component. In this guide, I'll show you how to do it.

Here is how it is implemented on unicornplatform.com

Scrollable posts on Unicorn Platform landing page

Step 1/4

Copy this code:

<style>
.posts-01__text{display: none;}
.posts-01__img{height:auto;
transition: 2s cubic-bezier(0.67, 0.17, 0, 0.94) transform}
img.posts-01__img:hover{
    transform: translateY(-213px);
}
 </style>

Step 2/4

Insert a posts-01 component into your page.

Page components

Step 3/4

Now you should insert a Custom HTML component next to the posts-01 component.

Custom HTML component

Step 4/4

Put the code you've copied before into the Custom HTML component.

Сode insertion into Custom HTML component

And that's it!

Lifehack

If you use Google Chrome, you can make a full-size screenshot of any web page in just a few clicks.

Right-click on an empty area of the page you want to take a screenshot of, and choose Inspect.

Options on the page

And in the upper right corner, click on the three dots and select the option Capture full size screenshot.

Options on page inspect

Done! After a few seconds, the screenshot will appear in your downloads.
Was this article helpful?
Cancel
Thank you!