body { height: 500px; background: linear-gradient(black, red); color:black; } footer { position: fixed; bottom:0; color:white; margin-left:50%; padding-bottom:1%; } p#start { position: relative; width:20em; font-size: 200%; font-weight: 400; margin: 20% auto; color: white; opacity: 0; z-index: 1; animation: intro 2s ease-out; } @keyframes intro { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } h1 { position: absolute; width: 2.6em; left: 50%; top: 5%; font-size: 11em; text-align: center; margin-left: -1.3em; line-height: 0.8em; letter-spacing: -0.05em; color: black; text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6; opacity: 0; z-index: 1; animation: logo 7s ease-out 2.5s; } h1 sub { display: block; font-size: 0.3em; letter-spacing: 0; line-height: 0.8em; } @keyframes logo { 0% { transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { transform: scale(0.1); opacity: 0; } } /* the interesting 3D scrolling stuff */ #titles { position: absolute; width: 16em; height: 50em; bottom: 0; left: 50%; margin-left: -9em; font-size: 350%; text-align: justify; overflow: hidden; transform-origin: 50% 100%; transform: perspective(300px) rotateX(25deg); } #titles:after { position: absolute; content: ' '; left: 0; right: 0; top: 0; bottom: 60%; background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%); pointer-events: none; } #titles p { text-align: justify; margin: 0.8em 0; } #titles p.center { text-align: center; } #titles a { color: #ff6; text-decoration: underline; } #titlecontent { position: absolute; top: 100%; width:80%; margin:0 10% 0 10%; animation: scroll 100s linear 4s; } @keyframes scroll { 0% { top: 100%; } 100% { top: -170%; } }