animation when scrolling css code example
Example 1: aos js
CSS
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
JS
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
INITIALIZE AOS:
<script>
AOS.init();
</script>
Example 2: animate on scroll
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
Example 3: animation on scroll css
svg {
position: fixed;
animation: rotate 1s linear infinite;
animation-delay: calc(var(--scroll) * -1s);
}
Example 4: aos
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
Example 5: scrolling animation css
.inline-photo {
border: 1em solid #fff;
border-bottom: 4em solid #fff;
border-radius: .25em;
box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
margin: 2em auto;
opacity: 0;
transform: translateY(4em) rotateZ(-5deg);
transition: transform 4s .25s cubic-bezier(0,1,.3,1),
opacity .3s .25s ease-out;
max-width: 600px;
width: 90%;
will-change: transform, opacity;
}