# 3.- Recursos
# Navbar
<nav>
<div class="navbar">
<div class="logo"><a href="">hello</a></div>
<div class="responsive_nav">
<ul class="nav_ul">
<li><a href="/index.html">Home</a></li>
<li><a href="/dos.html">Sobre mí</a></li>
<li><a href="">Nosotros</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="icons_toggle">
<i class="close"> X </i>
<i class="open"> A </i>
</div>
</div>
</nav>
nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 1rem;
height: 70px;
}
ul{
display: flex;
}
li{
list-style: none;
}
a{
padding: 0.4rem 0.8rem;
margin: 1rem;
}
.icons_toggle{
display: none;
}
.nav_ul li.active{
background: rgb(239, 65, 65);
}
.responsive_nav{
display: block;
}
h1{
margin-top: 10rem;
}
@media (max-width: 790px) {
.content_nav{
display: block;
}
.icons_toggle{
display: block;
}
i.close {
padding: 1rem;
}
i.open {
padding: 1rem;
}
ul{
display: flow-root;
}
.responsive_nav{
width: 100%;
background: red;
position: fixed;
top: 70px;
left: 0;
text-align: center;
display: none;
}
li {
padding: 1rem;
}
}
var close = $('.close').hide()
var open = $('.open')
var content_responsive = $('.responsive_nav')
//Opción 1 Arriba a abajo con slideToggle
$(open).click(function(){
$(content_responsive).slideToggle(1000);
$(open).hide()
$(close).show()
})
$(close).click(function(){
$(content_responsive).slideToggle(1000)
$(close).hide()
$(open).show()
})
//Opción 2 Derecha a izquierda
$(open).click(function(){
$(content_responsive).show("slide", { direction: "right" }, 1000);;
$(open).hide()
$(close).show()
})
$(close).click(function(){
$(content_responsive).hide("slide", { direction: "right" }, 1000);
$(close).hide()
$(open).show()
})
//active nav click select
var current = location.pathname;
$('.nav_ul li a').each(function(){
var $this = $(this);
if($this.attr('href').indexOf(current) !== -1){
$this.parent().addClass('active');
}
})
# Table column color
Ponemos color para diferenciar las líneas
<h1>Contenido con difentes colores</h1>
<p>Primer párrafo</p>
<p>Otro párrafo</p>
<p>Tecer párrafo</p>
<p>Uno más</p>
<p>y acabo...</p>
//Rayas a textos
$("p").each(function(i){
if(i%2==0){
$(this).css("background-color", "#eee");
}else{
$(this).css("background-color", "#ccc");
}
});
# MouseOver imagen
Al pasar el mause en la imagen aparece un texto en el fondo con fondo rojo
<section id="cards">
<div class="contenedor">
<img class="onClick_img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTT1lAfENEh_hQSSjOgUIFnHqn1nF93C3KKRg&usqp=CAU" />
<div class="texto-encima">Texto</div>
<div class="centrado">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, explicabo!.</div>
</div>
<div class="contenedor">
<img class="onClick_img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTT1lAfENEh_hQSSjOgUIFnHqn1nF93C3KKRg&usqp=CAU" />
<div class="texto-encima">Texto</div>
<div class="centrado">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, explicabo!.</div>
</div>
<div class="contenedor">
<img class="onClick_img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTT1lAfENEh_hQSSjOgUIFnHqn1nF93C3KKRg&usqp=CAU" />
<div class="texto-encima">Texto</div>
<div class="centrado">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, explicabo!.</div>
</div>
</section>
#cards{
display: flex;
gap: 1rem;
justify-content: space-evenly;
align-items: center;
}
.contenedor{
position: relative;
display: inline-block;
text-align: center;
}
.texto-encima{
position: absolute;
top: 10px;
left: 10px;
}
.centrado{
position: absolute;
top: 49%;
width: 100%;
left: 50%;
transition: .5s ease;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
background: red;
height: 98%;
display: flex;
align-items: center;
display: none;
}
@media (max-width: 1000px) {
#cards{
display: flex;
flex-wrap: wrap;
}
}
var onClick = $('.contenedor')
$(onClick).mouseover(function(){
$(this).children('.centrado').css({
color: 'white',
opacity: 0.8,
position: 'absolute',
background: 'red',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
opacity: 0.8,
})
});
$(onClick).mouseout(function(){
$(this).children('.centrado').css({'display':'none'})
});
# Animate()
Al pasar el mause en el parrafo con la propiedad animate hacemos que la imagen aumente a al 100% su color y sacando el mause de la imagen nuevamente vuelva a como estaba
<section>
<h1>Copiar propiedades a la etiqueta HEADER</h1>
<article>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTT1lAfENEh_hQSSjOgUIFnHqn1nF93C3KKRg&usqp=CAU" />
</article>
</section>
img{
opacity: 0.3;
}
//Con esta variable selecionamos el valor que tienen en su css
var colorfondo = $('img').css('opacity')
$('section > h1').mouseover(function(){
$("img").animate({opacity: '100%'}, 1000)
});
$('section > h1').mouseout(function() {
$("img").animate({opacity: colorfondo }, 1000)
});
# Animarscroll
Al darle click a una etiqueta lo que realizara es bajar hasta otra etiqueta o objeto
<div class="mayor">Este DIV se sale!!</div>
<button id="animarscroll">Animar hasta la caja roja</button>
<div id="hastaaqui">Animar scroll hasta aquí</div>
<div id="irarriba"><a href="#">Ir arriba</a></div>
.mayor{
width: 3500px;
padding: 20px;
background-color: #ccf;
}
#animarscroll{
background-color: #fcc;
}
#hastaaqui{
background-color: #900;
padding: 10px;
color: white;
font-size: 0.6em;
width: 200px;
}
#irarriba{
padding: 5px;
position: fixed;
bottom: 40px;
right: 50px;
background-color: rgb(61, 61, 255);
font-weight: bold;
width: 50px;
font-size: 0.8em;
text-align: center;
display: block;
}
#irarriba a{
color: #fff;
}
//Animacion para bajar a otra etiqueta
$("#animarscroll").click(function(){
var posicion = $("#hastaaqui").offset().top;
$("html, body").animate({
scrollTop: posicion
}, 1000);
});
//Funcion para hacer desaparecer la etiqueta ir arriba
$(window).scroll( function(){
var desplazamientoActual = $(window).scrollTop();
var controlArriba = $("#irarriba");
if(desplazamientoActual > 100 && controlArriba.css("display") == "none"){
controlArriba.fadeIn(500);
}
if(desplazamientoActual < 100 && controlArriba.css("display") == "block"){
controlArriba.fadeOut(500);
}
});
//Acá hacemos click y nos envia al inicio de la página
$("#irarriba a").click(function(){
$("html, body").animate({
scrollTop: 0
}, 1000);
});
# Ponerle color a una imagen
<section id="cards">
<div class="contenedor">
<img class="onClick_img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTT1lAfENEh_hQSSjOgUIFnHqn1nF93C3KKRg&usqp=CAU" />
<div class="texto-encima">Texto</div>
<div class="centrado">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, explicabo!.</div>
</div>
<div class="contenedor">
<img class="onClick_img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTT1lAfENEh_hQSSjOgUIFnHqn1nF93C3KKRg&usqp=CAU" />
<div class="texto-encima">Texto</div>
<div class="centrado">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, explicabo!.</div>
</div>
<div class="contenedor">
<img class="onClick_img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTT1lAfENEh_hQSSjOgUIFnHqn1nF93C3KKRg&usqp=CAU" />
<div class="texto-encima">Texto</div>
<div class="centrado">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, explicabo!.</div>
</div>
</section>
$( document ).ready(function() {
var onClick = $('.contenedor')
$(onClick).mouseover(function(){
$(this).children('.centrado').css({
color: 'white',
opacity: 0.8,
position: 'absolute',
background: 'red',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
opacity: 0.8,
})
});
$(onClick).mouseout(function(){
$(this).children('.centrado').css({'display':'none'})
});
})
*{
margin: 0;
padding: 0;
}
#cards{
display: flex;
gap: 1rem;
justify-content: space-evenly;
align-items: center;
}
.contenedor{
position: relative;
display: inline-block;
text-align: center;
}
.texto-encima{
position: absolute;
top: 10px;
left: 10px;
}
.centrado{
position: absolute;
top: 49%;
width: 100%;
left: 50%;
transition: .5s ease;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
background: red;
height: 98%;
display: flex;
align-items: center;
display: none;
}
@media (max-width: 1000px) {
#cards{
display: flex;
flex-wrap: wrap;
}
}
# Lineas moviendo -> <-
<section>
<div class="content_linea">
<h1>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores, nostrum.</h1>
<div></div>
</div>
<div class="content_article">
<article>
<p>Lorem ipsum dolor sit amet.</p>
<div class="linea-horizontal"></div>
</article>
<article>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTT1lAfENEh_hQSSjOgUIFnHqn1nF93C3KKRg&usqp=CAU" />
<div class="linea_vertical"></div>
</article>
<article>
<p>Lorem ipsum dolor sit amet.</p>
<div class="linea-vertical-abajo"></div>
</article>
</div>
</section>
$(function(){
var linea = $('.linea-horizontal').css('left')
var lineavertical = $('.linea_vertical').css('top')
var lineaverticalAbajo = $('.linea-vertical-abajo').css('top')
// var linea1 = $('.linea1').css('left')
$('article').mouseover(function () {
$(this).children('div .linea-horizontal').stop().animate({ left: '' },500)
})
$('article').mouseout(function (){
$(this).children('div .linea-horizontal').stop().animate({ left: linea }, 500)
} )
//Arriba a abajo
$('article').mouseover(function () {
$(this).children('div .linea_vertical').stop().animate({ top: '' },1000)
})
$('article').mouseout(function (){
$(this).children('div .linea_vertical').stop().animate({ top: lineavertical }, 1000)
})
//Abajo a arriba
$('article').mouseover(function () {
$(this).children('div .linea-vertical-abajo').stop().animate({ top: '' },1000)
})
$('article').mouseout(function (){
$(this).children('div .linea-vertical-abajo').stop().animate({ top: lineaverticalAbajo }, 1000)
})
} )
section{
width: 80%;
margin: auto;
}
p{
border: 1px solid black;
margin: 0;
}
.content_article{
display: flex;
}
article{
position: relative;
overflow: hidden;
background: green;
margin: 1rem;
}
.linea-horizontal{
position: absolute;
width: 100%;
height: 10px;
background-color: red;
bottom: 0;
left: -100%;
}
.linea_vertical{
position: absolute;
width: 10px;
height: 100%;
background-color: rgb(40, 255, 36);
bottom: 0;
top: -100%;
}
.linea-vertical-abajo{
position: absolute;
width: 10px;
height: 100%;
background-color: rgb(255, 199, 16);
bottom: 0;
top: 100%;
}
# Elementos dinámicos
Colocando una nueva etiqueta
<section>
<h1>Copiar propiedades a la etiqueta HEADER</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae, magnam?</p>
<article>
<div class="content_image_text">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTT1lAfENEh_hQSSjOgUIFnHqn1nF93C3KKRg&usqp=CAU" />
</div>
<span>texto imagen</span>
</article>
</section>
$('p').click(function(){
$('article').children('#parrafo_nuevo').remove()
$('.content_image_text').before(` <p id='parrafo_nuevo' class='dinamica'>Soy nuevo</p> `)
$('.content_image_text').siblings('#parrafo_nuevo').addClass('background-color','yellow')
})
$('.content_image_text').hover(function() {
$('.content_image_text').before(` <p id='parrafo_nuevo' class='dinamica'>Soy nuevo</p> `)
}, function() {
$('#parrafo_nuevo').remove();
});
section{
width: 80%;
margin: 0 auto;
}
article{
display: flex;
}
.dinamica{
color: red;
border: 2px solid black;
position: absolute;
z-index: 100;
}
.background-color{
background-color: yellow;
}
.content_image_text{
position: relative;
}
.hidden {
visibility: hidden;
}