In this Motion.page tutorial I will show you how to do this cool image reveal effect when scrolling down the page.
I recently came across this website (https://kokokombucha.pl/) and thought I would try to recreate the bottle image reveal effect using Motion.page.
Purchase Motion.Page:
https://motion.page/go/wickydesign/
Motion.Page Overview Video:
https://www.youtube.com/watch?v=RW9Vwg5sZRo
Timestamps:
- 0:00 Introduction
- 0:34 Gather Image Assets
- 1:14 Add HTML and CSS
- 4:51 Motion.page Tutorial
HTML & CSS Code:
<style>
.drink-outline {
max-width: 450px;
}
.drink-color {
position: absolute;
overflow: hidden;
max-width:450px;
height: 102%;
}
.drink-line {
position: absolute;
bottom: 0;
width: 450px;
left: 50%;
transform: translateX(-50%);
}
</style>
<div class="drink-color">
<img decoding="async" src="line-overlay.jpg" alt="Drink line" class="drink-line" />
<img decoding="async" src="drink-color.jpg" alt="Drink color" />
</div>
<div class="drink-outline">
<img decoding="async" src="drink-outline.jpg" alt="Drink outline" />
</div>
