<div class="page">
<div class="target text1">scroll</div>
</div>
<div class="page">
<div class="target text2">hello</div>
</div>
<div class="page">
<div class="target text3">left</div>
</div>
<div class="page">
<div class="target text4">right</div>
</div>
<div class="page">
<div class="target text5">top</div>
</div>
<div class="page">
<div class="target text6">animation</div>
</div>
<div class="page">
<img class="target image1" src="https://liginc.co.jp/wp-content/uploads/2017/10/150691334095133300_52.png">
</div>
@mixin positionCenter() {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
body {
background-color: #757575;
font-family: Arial;
color: #79BD9A;
}
.page {
position: relative;
height: 100vh;
}
.target {
@include positionCenter();
font-size: 50px;
font-weight: bold;
}
img {
width: 300px;
}ScrollReveal().reveal('.text2', {
duration: 1600,
scale: 4,
reset: true
});
ScrollReveal().reveal('.text3', {
duration: 1600,
origin: 'left',
distance: '50px',
reset: true
});
ScrollReveal().reveal('.text4', {
duration: 1600,
origin: 'right',
distance: '50px',
reset: true
});
ScrollReveal().reveal('.text5', {
duration: 1600,
origin: 'top',
distance: '50px',
reset: true
});
ScrollReveal().reveal('.text6', {
duration: 1600,
scale: 0.1,
reset: true
});
ScrollReveal().reveal('.image1', {
duration: 1600,
reset: true
});
External CSS
This Pen doesn't use any external CSS resources.