Buenas, no parece una animación difícil. Da la impresión de que para una persona con conocimientos se puede hacer con JavaScript sin demasiado problema. Pero obviamente no puedes manejar JavaScript si no conoces CSS, y no puedes manejar CSS si no conoces HTML. El orden recomendado para el aprendizaje sería HTML primero, luego CSS y luego JavaScript. Y luego un lenguaje del lado del servidor como PHP. Pero aprender todo esto puede llevar mucho tiempo, si simplemente quieres una animación hay muchos códigos disponibles en internet sin necesidad de seguir toda la línea de aprendizaje.
Tienes tutoriales de HTML, CSS, JavaScript y otros lenguajes en
https://aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86En este caso, para esta animación posiblemente puedas lograr el efecto simplemente tomando el código y cambiándolo para poner los textos o imágenes que a tí te interese. Aquí lo he hecho en cinco minutos poniéndole otros textos:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Ejemplo aprenderaprogramar.com</title>
<link rel="stylesheet" media="screen" href="https://cpwebassets.codepen.io/assets/fullpage/fullpage-4de243a40619a967c0bf13b95e1ac6f8de89d943b7fc8710de33f681fe287604.css" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700,700italic,900,900italic&display=swap" rel="stylesheet" />
<style>
html { font-size: 15px; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body { height:100%; display: flex; flex-direction: column; }
.referer-warning {
background: black;
box-shadow: 0 2px 5px rgba(0,0,0, 0.5);
padding: 0.75em;
color: white;
text-align: center;
font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
line-height: 1.2;
font-size: 1rem;
position: relative;
z-index: 2;
}
.referer-warning h1 { font-size: 1.2rem; margin: 0; }
.referer-warning a { color: #56bcf9; } /* $linkColorOnBlack */
</style>
</head>
<body onLoad="talk()" >
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
body {
background-color: #fff
}
.home {
width: 100%;
height: 100vh;
position: relative;
background-image: url(https://aprenderaprogramar.com/images/stories/Humor/cabecerahumorreducida.jpg);
background-position: center center;
}
/* ====================================
Navigation
==================================== */
.overlay-navigation {
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: hsla(0, 0%, 100%, 0.2);
display: none;
opacity: 0;
}
nav,
nav ul {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
flex-basis: 20%;
justify-content: center;
align-items: center;
height: 100%;
overflow: hidden;
opacity: 0;
display: none;
}
nav li a {
position: relative;
top: 46%;
color: #fff;
text-transform: uppercase;
font-family: 'Work sans', sans-serif;
font-weight: 300;
letter-spacing: 4px;
text-decoration: none;
display: block;
text-align: center;
font-size: 1.9rem;
opacity: 0;
}
nav li a:before {
content: '';
width: 70px;
height: 2px;
background-color: #fff;
position: absolute;
top: 50%;
left: 0;
z-index: 100;
transform: translateX(-100%);
opacity: 0;
transition: all .2s linear;
}
nav li a:after {
content: attr(data-content);
font-size: 1.2rem;
transition: all .2s linear;
opacity: 0;
position: absolute;
z-index: 100;
color: #fff;
display: block;
margin-right: auto;
margin-left: auto;
left: 10;
right: 10;
bottom: -150px;
text-transform: none;
font-family: 'Open sans', sans-serif;
font-weight: 300;
font-style: italic;
letter-spacing: 0;
}
nav li a:hover:before {
transform: translateX(0);
opacity: 1;
}
nav li a:hover:after {
transform: translateY(15px);
opacity: 1;
}
nav li:nth-of-type(1) {
background-color: #1ABC9C
}
nav li:nth-of-type(2) {
background-color: #3498DB
}
nav li:nth-of-type(3) {
background-color: #9B59B6
}
nav li:nth-of-type(4) {
background-color: #f6c23e
}
nav li:nth-of-type(5) {
background-color: #E74C3C
}
/* ====================================
Burger king
==================================== */
.open-overlay {
position: absolute;
right: 5rem;
top: 3.2rem;
z-index: 100;
width: 34px;
display: block;
cursor: pointer;
}
.open-overlay span {
display: block;
height: 1px;
background-color: #fff;
cursor: pointer;
margin-top: 8px;
}
.animate-top-bar {
-webkit-animation: animate-top-bar .6s linear 1 both;
animation: animate-top-bar .6s linear 1 both
}
.animate-bottom-bar {
-webkit-animation: animate-bottom-bar .6s linear 1 both;
animation: animate-bottom-bar .6s linear 1 both
}
.animate-middle-bar {
-webkit-animation: animate-middle-bar .6s linear 1 both;
animation: animate-middle-bar .6s linear 1 both
}
.animate-out-top-bar {
-webkit-animation: animate-out-top-bar .6s linear 1 both;
animation: animate-out-top-bar .6s linear 1 both
}
.animate-out-bottom-bar {
-webkit-animation: animate-out-bottom-bar .6s linear 1 both;
animation: animate-out-bottom-bar .6s linear 1 both
}
.animate-out-middle-bar {
-webkit-animation: animate-out-middle-bar .6s linear 1 both;
animation: animate-out-middle-bar .6s linear 1 both
}
/* ====================================
Animation keyframes
==================================== */
@-webkit-keyframes animate-top-bar {
0% {
background-color: #fff;
}
50% {
transform: translateY(9px)
}
80% {
transform: translateY(5px);
background-color: #fff
}
100% {
transform: translateY(0);
background-color: #34548B;
}
}
@keyframes animate-top-bar {
0% {
background-color: #fff;
}
50% {
transform: translateY(9px)
}
80% {
transform: translateY(5px);
background-color: #fff
}
100% {
transform: translateY(0);
background-color: #34548B;
}
}
@-webkit-keyframes animate-bottom-bar {
0% {
background-color: #fff;
}
50% {
transform: translateY(-9px)
}
80% {
transform: translateY(-5px);
background-color: #fff;
}
100% {
transform: translateY(0);
background-color: #34548B;
}
}
@keyframes animate-bottom-bar {
0% {
background-color: #fff;
}
50% {
transform: translateY(-9px)
}
80% {
transform: translateY(-5px);
background-color: #fff;
}
100% {
transform: translateY(0);
background-color: #34548B;
}
}
@-webkit-keyframes animate-middle-bar {
0% {
background-color: #fff;
}
80% {
background-color: #fff;
}
100% {
background-color: #34548B;
}
}
@keyframes animate-middle-bar {
0% {
background-color: #fff;
}
80% {
background-color: #fff;
}
100% {
background-color: #34548B;
}
}
@-webkit-keyframes animate-out-top-bar {
0% {
background-color: #34548B
}
50% {
transform: translateY(9px)
}
80% {
transform: translateY(5px);
background-color: #34548B
}
100% {
transform: translateY(0);
background-color: #FFF;
}
}
@keyframes animate-out-top-bar {
0% {
background-color: #34548B
}
50% {
transform: translateY(9px)
}
80% {
transform: translateY(5px);
background-color: #34548B
}
100% {
transform: translateY(0);
background-color: #FFF;
}
}
@-webkit-keyframes animate-out-bottom-bar {
0% {
background-color: #34548B
}
50% {
transform: translateY(-9px)
}
80% {
transform: translateY(-5px);
background-color: #34548B;
}
100% {
transform: translateY(0);
background-color: #FFF;
}
}
@keyframes animate-out-bottom-bar {
0% {
background-color: #34548B
}
50% {
transform: translateY(-9px)
}
80% {
transform: translateY(-5px);
background-color: #34548B;
}
100% {
transform: translateY(0);
background-color: #FFF;
}
}
@-webkit-keyframes animate-out-middle-bar {
0% {
background-color: #34548B
}
80% {
background-color: #34548B;
}
100% {
background-color: #fff;
}
}
@keyframes animate-out-middle-bar {
0% {
background-color: #34548B
}
80% {
background-color: #34548B;
}
100% {
background-color: #fff;
}
}
.home a {
font-family: "Work Sans", sans-serif;
color: #222;
font-weight: 300;
font-size: 12px;
text-transform: uppercase;
text-decoration: none;
position: absolute;
z-index: 10;
top: 50px;
left: 50px;
padding-bottom: 3px;
border-bottom: 1px solid #222;
}
@media (max-width: 640px) {
nav ul {
flex-direction: column;
}
nav ul li {
height: 20%;
}
nav ul li a {
font-size: 18px;
}
nav li a:after {
font-size: 0.6rem;
bottom: -25px;
}
nav li a:hover:after {
transform: translateY(0);
}
.open-overlay {
right: 1rem;
}
nav li a:before {
width: 25px;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>$("#open-overlay").trigger('click');</script>
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li><a href="https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192" data-content="Si no persigues lo que quieres, nunca lo tendrás. Si no vas hacia delante, siempre estarás en el mismo lugar... Nora Roberts.">APRENDER</a></li>
<li><a href="https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203" data-content="El éxito no es un accidente, es trabajo duro, perseverancia, aprendizaje, estudio y lo más importante de todo, amor por lo que estás haciendo o aprendiendo a hacer... Edson Arantes do Nascimento.">A</a></li>
<li><a href="#" data-content="A partir del segundo semestre 2021">PROGRAMAR</a></li>
<li><a href="https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=70&Itemid=193" data-content="Acepta la responsabilidad en tu vida. Se consciente de que serás tú quien te llevará a donde quieres ir, nadie más... Les Brown.">PUNTO</a></li>
<li><a href="https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206" data-content="Si deseas conocer el estado actual de tu deuda puedes ingresar a esta opción, cabe destacar que no debes ser Egresado o Estudiante, si eres estos últimos ingrese a su correspondiente menú.">COM</a></li>
</ul>
</nav>
</div>
<section class="home">
<div id="open-overlay" class="open-overlay">
</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js'></script>
<script id="rendered-js" >
function talk() {
$('.open-overlay').css('pointer-events', 'none');
var overlay_navigation = $('.overlay-navigation'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down');
overlay_navigation.velocity('transition.slideLeftIn', {
duration: 300,
delay: 0,
begin: function () {
$('nav ul li').velocity('transition.perspectiveLeftIn', {
stagger: 150,
delay: 0,
complete: function () {
$('nav ul li a').velocity({
opacity: [1, 0] },
{
delay: 10,
duration: 140 });
$('.open-overlay').css('pointer-events', 'auto');
} });
} });
} else {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down');
overlay_navigation.velocity('transition.slideLeftIn', {
duration: 300,
delay: 0,
begin: function () {
$('nav ul li').velocity('transition.perspectiveLeftIn', {
stagger: 150,
delay: 0,
complete: function () {
$('nav ul li a').velocity({
opacity: [1, 0] },
{
delay: 10,
duration: 140 });
$('.open-overlay').css('pointer-events', 'auto');
} });
} });
}
};
</script>
</div>
</body>
</html>
Salu2