react-scroll-effects
Version:
React component to animate elements on scroll with animate.css
84 lines (81 loc) • 1.78 kB
HTML
<head>
<link rel="stylesheet" type="text/css" media="screen" href="bower_components/animate.css/animate.min.css">
<title></title>
<style>
* {
box-sizing: border-box;
font-family: "Verdana";
}
.center {
padding: 20px;
text-align: center;
}
body {
margin: 0;
padding: 0;
}
section {
height: 500px;
counter-increment: section;
padding: 100px;
background: navy;
position: relative;
}
section:nth-child(2n+2) {
background: #ccc;
}
section:after {
content: counter(section);
font-size: 40px;
position: absolute;
left: 50%;
top: 50%;
color: white;
}
section:nth-child(2n+2):after {
color: navy;
}
.element {
min-height: 100px;
min-width: 100px;
line-height: 100px;
text-align: center;
font-size: 24px;
background: green;
position: absolute;
bottom: 100px;
left: 100px;
}
section:nth-child(2n+2) .element {
left: auto;
background: red;
left: auto;
right: 100px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
padding: 5px;
display: block;
background: #ccc;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
margin: 0 0 10px 0;
}
</style>
</head>
<body>
<div class="center">
<a target=_blank href="src/index.js">source code</a>
</div>
<div id="app"></div>
</body>
<script type="text/javascript" src="dist/bundle.js"></script>
</html>
</div>