Bernard (The Day of the Tentacle) CSS animation

Developer
Manz
Size
2,791 Kb
Views
16,192
  1. Bernard (The Day of the Tentacle) CSS animation Previews
  2. Bernard (The Day of the Tentacle) CSS animation HTML Codes
  3. Bernard (The Day of the Tentacle) CSS animation CSS Codes
  4. Bernard (The Day of the Tentacle) CSS animation JS Codes

How do I make an bernard (the day of the tentacle) css animation?

Bernard Bernoulli (The Day of the Tentacle) walking with CSS animations over Monkey Island background, using CSS3 steps() and audio HTML5 (add autoplay to audio tag for play sound).. What is a bernard (the day of the tentacle) css animation? How do you make a bernard (the day of the tentacle) css animation? This script and codes were developed by Manz on 18 January 2023, Wednesday.

Bernard (The Day of the Tentacle) CSS animation Previews
IQ Test

Bernard (The Day of the Tentacle) CSS animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bernard (The Day of the Tentacle) CSS animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="sky"> <div id="sea"> <div id="bern"></div> </div>
</div>
<audio id="song"> <source src="https://scummbar.com/mi2/DOTT/03%20-%20Busting%20The%20Candy%20Machine.mp3">
</audio> <script src="js/index.js"></script>
</body>
</html>

Bernard (The Day of the Tentacle) CSS animation - Script Codes CSS Codes

/* Eliminamos márgenes y ponemos fondo de página negro */
html,body { margin:0; background:#000;
}
/* Bernard Bernoulli: Animación del personaje */
#bern { /* Tamaño de la viñeta individual */ width:112px; height:156px; /* Cómo hay establecido un tamaño, centramos con margin:auto */ margin:auto; /* Cargamos el sprite (el repeat-x se puede omitir, por defecto se repite) */ background:url(https://cdn.rawgit.com/ManzDev/cursos-assets/gh-pages/css3/bernard-sprite.png) repeat-x; /* Aplicamos la animación "walk": 0.8seg, 6 viñetas y repetimos infinitamente */ -webkit-animation:walk .8s steps(6) infinite; animation:walk .8s steps(6) infinite; /* Posicionamos el personaje sobre el camino de madera */ position:relative; bottom:34px;
}
/* Animación de personaje caminando: Simplemente mueve el sprite sheet hacia la izquierda, realizando el movimiento. */
@-webkit-keyframes walk { /* Partimos de la primera viñeta del sprite sheet */ 0% { background-position:0 } /* El tamaño total de ancho del sprite. Es negativo para que no "camine" hacia atrás */ 100% { background-position:-672px }
}
@keyframes walk { /* Partimos de la primera viñeta del sprite sheet */ 0% { background-position:0 } /* El tamaño total de ancho del sprite. Es negativo para que no "camine" hacia atrás */ 100% { background-position:-672px }
}
/* Animación del cielo. Efecto "Parallax", va más lento que el mar. */
#sky { background:url(https://cdn.rawgit.com/ManzDev/cursos-assets/gh-pages/css3/monkey-sky.png) repeat-X; -webkit-animation: movebg 9s linear infinite; animation: movebg 9s linear infinite;
}
/* Animación del mar. */
#sea { background:url(https://cdn.rawgit.com/ManzDev/cursos-assets/gh-pages/css3/monkey-sea.png) repeat-x; -webkit-animation: movebg 6s linear infinite; animation: movebg 6s linear infinite; /* Posicionamos el mar, para que no solape al cielo */ position:relative; top:145px; /* Pequeño degradado interior para suavizar el mar. Puede consumir muchos recursos */ box-shadow:10px 10px 45px RGBA(0,0,0, 0.85) inset;
}
/* Animación para mover cielo y mar */
@-webkit-keyframes movebg { 0% { background-position:550px } 100% { background-position:0 }
}
@keyframes movebg { 0% { background-position:550px } 100% { background-position:0 }
}
/* OPCIONAL: Guybrush */
#gb { width:104px; height:150px; background:url(https://cdn.rawgit.com/ManzDev/cursos-assets/gh-pages/css3/monkey-guybrush.png) no-repeat; -webkit-animation:gbwalk 1s steps(6) infinite; animation:gbwalk 1s steps(6) infinite; margin:auto; position:relative; top:34px; /* Ojo, muy costoso en rendimiento */ /* filter:drop-shadow(5px 5px 5px #000); */
}
@-webkit-keyframes gbwalk { 0% { background-position:0 } 100% { background-position:-624px }
}
@keyframes gbwalk { 0% { background-position:0 } 100% { background-position:-624px }
}

Bernard (The Day of the Tentacle) CSS animation - Script Codes JS Codes

/* Play only from CodePen */
if (parent==top) document.getElementById('song').autoplay = true;
Bernard (The Day of the Tentacle) CSS animation - Script Codes
Bernard (The Day of the Tentacle) CSS animation - Script Codes
Home Page Home
Developer Manz
Username manz
Uploaded January 18, 2023
Rating 3
Size 2,791 Kb
Views 16,192
Do you need developer help for Bernard (The Day of the Tentacle) CSS animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Manz (manz) Script Codes
Name
Monkey Island CSS Animation
Javascript Thug Life
CSS Instagram
CSS Responsive Hamburger menu
Battery API JS
Space Invaders SVG icon
Camera Snapshot Emulator
Earth Animation CSS
Chuck Norris Background
Fallout 4 - Logo screen
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!