Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!DOCTYPE html> <html lang="en" class="animated fadeIn"> <head> <meta charset="UTF-8"> <title>CodePen - Multi-layered Parallax Illustration </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./style.css"> </head> <body> <div id='hero'> <div class='layer-bg layer' data-depth='0.10' data-type='parallax'></div> <div class='layer-1 layer' data-depth='0.20' data-type='parallax'> <div class="pruh"></div> </div> <div class='layer-2 layer' data-depth='0.20' data-type='parallax'> <div class="logo"></div> </div> </div> </body>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { padding: 0; margin: 0; background-color: white; font-family: 'Playfair Display', serif; color: #fff; } .content { margin-top: 50px; width: 1100px; margin: auto; } .layer { background-position: center top; background-size: auto; background-repeat: no-repeat; width: 100%; height: 800px; position: fixed; z-index: -1; } .layer-2 { background-image: url(""); background-position: center top; } .logo { background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Ikea_logo.svg/800px-Ikea_logo.svg.png") center top no-repeat; height: 200px; margin-top: 160px; margin-left: -170px; animation-name: vc; animation-duration: 3s; animation-iteration-count: 1; animation-direction: normal; animation-timing-function: ease-out; animation-fill-mode: forwards; animation-delay: 0s; } @keyframes vc { 0% { width: 0%; } 100% { width: 100%; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>