Commit 68581e5

committed

add scroll based animation example, from the shop

2 parents 9b0592d + 62a26d5 commit 68581e5Copy full SHA for 68581e5

File tree

+62

-0

lines changed

+62

-0

lines changed

Lines changed: 3 additions & 0 deletions

Lines changed: 59 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,59 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+ <head>`
	`4`	`+ <meta charset="UTF-8" />`
	`5`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />`
	`6`	`+ <title>Document</title>`
	`7`	`+ <style>`
	`8`	`+ * {`
	`9`	`+ box-sizing: border-box;`
	`10`	`+ margin: 0;`
	`11`	`+ padding: 0;`
	`12`	`+ background-color: transparent;`
	`13`	`+ }`
	`14`	`+`
	`15`	`+ main {`
	`16`	`+ background-color: hsl(209, 100%, 50%);`
	`17`	`+ width: 100vw;`
	`18`	`+ height: calc(100vh * 3);`
	`19`	`+ display: grid;`
	`20`	`+ grid-template-columns: 1fr 1fr;`
	`21`	`+ justify-items: center;`
	`22`	`+`
	`23`	`+ perspective: 1000px;`
	`24`	`+ }`
	`25`	`+`
	`26`	`+ .box {`
	`27`	`+ margin-top: 50vh;`
	`28`	`+ background-color: hsl(40, 100%, 50%);`
	`29`	`+ width: 300px;`
	`30`	`+ height: 300px;`
	`31`	`+ animation: scaleAndFlip linear;`
	`32`	`+ animation-timeline: scroll(root block);`
	`33`	`+ transform-style: preserve-3d;`
	`34`	`+ }`
	`35`	`+`
	`36`	`+ .box2 {`
	`37`	`+ background-color: hsl(60, 100%, 50%);`
	`38`	`+ }`
	`39`	`+`
	`40`	`+ @keyframes scaleAndFlip {`
	`41`	`+ 0% {`
	`42`	`+ scale: 1;`
	`43`	`+ rotate: x 0deg;`
	`44`	`+ }`
	`45`	`+ 100% {`
	`46`	`+ scale: 4;`
	`47`	`+ rotate: x 360deg;`
	`48`	`+ opacity: 0.1;`
	`49`	`+ }`
	`50`	`+ }`
	`51`	`+ </style>`
	`52`	`+ </head>`
	`53`	`+ <body>`
	`54`	`+ <main>`
	`55`	`+ <div class="box box1"></div>`
	`56`	`+ <div class="box box2"></div>`
	`57`	`+ </main>`
	`58`	`+ </body>`
	`59`	`+</html>`

Comments

(0)