Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Guz en 03 de Mayo 2021, 02:09
-
Hola a todos, buen día, me gustaria saber si la animación de la página que les mostraré a continuación es posible hacerla solo con html, css y js, o si requiere otros componentes. La página es esta: https://www.portal.uda.cl/ y es de una universidad si no me equivoco.
Lo que quiero hacer es esa animación que tienes cuando entras y se ve por unos momentos el nombre y el logo de la universidad.
Sí es posible hacerla me podrian decir como por favor o pasarme una guía o tutorial.
Gracias :D
-
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=86
En 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