Skip to content

Instantly share code, notes, and snippets.

@Fahrek

Fahrek/index.html

Created December 16, 2018 03:02
Show Gist options
  • Save Fahrek/8e285cf639547d9718610fb1ddfcd230 to your computer and use it in GitHub Desktop.
Save Fahrek/8e285cf639547d9718610fb1ddfcd230 to your computer and use it in GitHub Desktop.
Download ZIP
MouseEffectJS
Raw
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="content-fluid">
<header class="row">
<figure id="logotipo" class="desktop-2 laptop-3 tablet-3 phone-12">
<img src="https://www.ingeniovirtual.com/wp-content/uploads/caracteristicas-de-un-logotipo-moderno.jpg" width='250' height='150' alt="logo">
</figure>
<div class="desktop-4 laptop-2 tablet-1 phone-0">
<br>
</div>
<nav class="desktop-6 laptop-7 tablet-8 phone-12">
<ul>
<li class="desktop-2 laptop-2 tablet-2 phone-12"><a href="#">Boton 1</a></li>
<li class="desktop-2 laptop-2 tablet-2 phone-12"><a href="#">Boton 2</a></li>
<li class="desktop-2 laptop-2 tablet-2 phone-12"><a href="#">Boton 3</a></li>
<li class="desktop-2 laptop-2 tablet-2 phone-12"><a href="#">Boton 4</a></li>
<li class="desktop-2 laptop-2 tablet-2 phone-12"><a href="#">Boton 5</a></li>
<li class="desktop-2 laptop-2 tablet-2 phone-12"><a href="#">Boton 6</a></li>
</ul>
</nav>
</header>
<div id="slide" class='row'>
<ul>
<li>
<img src="https://placeimg.com/1280/720/arch" alt="img1">
<div class='textSlide'>
<h1>Lorem Ipsum</h1>
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et unde deserunt aut porro excepturi placeat totam consectetur consequatur reprehenderit facilis. Enim debitis magni expedita distinctio sapiente amet quibusdam beatae nihil.</h3>
</div>
</li>
<li>
<img src="https://placeimg.com/1280/720/tech" alt="img2">
<div class='textSlide'>
<h1>Lorem Ipsum</h1>
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et unde deserunt aut porro excepturi placeat totam consectetur consequatur reprehenderit facilis. Enim debitis magni expedita distinctio sapiente amet quibusdam beatae nihil.</h3>
</div>
</li>
<li>
<img src="https://placeimg.com/1280/720/people/grayscale" alt="img3">
<div class='textSlide'>
<h1>Lorem Ipsum</h1>
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et unde deserunt aut porro excepturi placeat totam consectetur consequatur reprehenderit facilis. Enim debitis magni expedita distinctio sapiente amet quibusdam beatae nihil.</h3>
</div>
</li>
<li>
<img src="https://placeimg.com/1280/720/animals" alt="img4">
<div class='textSlide'>
<h1>Lorem Ipsum</h1>
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et unde deserunt aut porro excepturi placeat totam consectetur consequatur reprehenderit facilis. Enim debitis magni expedita distinctio sapiente amet quibusdam beatae nihil.</h3>
</div>
</li>
</ul>
<ol id='paginacion'>
<li item='0'><span class="fa fa-circle"></span></li>
<li item='1'><span class="fa fa-circle"></span></li>
<li item='2'><span class="fa fa-circle"></span></li>
<li item='3'><span class="fa fa-circle"></span></li>
</ol>
<div class='flechas' id='retroceder'><span class="fa fa-chevron-left"></span></div>
<div class='flechas' id='avanzar'><span class="fa fa-chevron-right"></span></div>
</div>
<div id="galeria" class="row">
<ul>
<li class="desktop-2 laptop-3 tablet-4 phone-12"><img src="https://placeimg.com/1280/720/people/grayscale" alt="img1"></li>
<li class="desktop-2 laptop-3 tablet-4 phone-12"><img src="https://placeimg.com/1280/720/tech" alt="img1"></li>
<li class="desktop-2 laptop-3 tablet-4 phone-12"><img src="https://placeimg.com/1280/720/animals" alt="img1"></li>
<li class="desktop-2 laptop-3 tablet-4 phone-12"><img src="https://placeimg.com/1280/720/people/sepia" alt="img1"></li>
<li class="desktop-2 laptop-3 tablet-4 phone-12"><img src="https://placeimg.com/1280/720/nature/grayscale" alt="img1"></li>
<li class="desktop-2 laptop-3 tablet-4 phone-12"><img src="https://placeimg.com/1280/720/architecture/sepia" alt="img1"></li>
<li class="desktop-2 laptop-3 tablet-4 phone-12"><img src="https://placeimg.com/1280/720/nature" alt="img1"></li>
<li class="desktop-2 laptop-3 tablet-4 phone-12"><img src="https://placeimg.com/1280/720/people/grayscale" alt="img1"></li>
<li class="desktop-2 laptop-3 tablet-4 phone-12"><img src="https://placeimg.com/1280/720/tech/sepia" alt="img1"></li>
<li class="desktop-2 laptop-3 tablet-4 phone-12"><img src="https://placeimg.com/1280/720/architecture/grayscale" alt="img1"></li>
<li class="desktop-2 laptop-3 tablet-4 phone-12"><img src="https://placeimg.com/1280/720/nature/sepia" alt="img1"></li>
<li class="desktop-2 laptop-3 tablet-4 phone-12"><img src="https://placeimg.com/1280/720/animals" alt="img1"></li>
</ul>
</div>
<div id="efectoMouse" class="row">
<figure></figure>
<figure></figure>
<figure></figure>
</div>
</div>
</body>
</html>
Raw
script.js
// SLIDESHOW
// OBJETO CON LAS PROPIEDADES DEL SLIDE
var p = {
paginacion: document.querySelectorAll('#paginacion li'),
item: 0,
cajaSlide: document.querySelector('#slide ul'),
animacionSlide: 'slide',
imgSlide: document.querySelectorAll('#slide ul li'),
avanzar: document.querySelector('#slide #avanzar'),
retroceder: document.querySelector('#slide #retroceder'),
velocidadSlide: 3000,
formatearLoop: false
}
// OBJETO CON LOS METODOS DEL SLIDE
var m = {
inicioSlide: function(){
for(var i = 0; i < p.paginacion.length; i++){
p.paginacion[i].addEventListener('click', m.paginacionSlide);
p.imgSlide[i].style.width = (100 / p.paginacion.length) + '%';
}
p.avanzar.addEventListener('click', m.avanzar);
p.retroceder.addEventListener('click', m.retroceder);
m.intervalo();
p.cajaSlide.style.width = (p.paginacion.length * 100) + '%';
},
paginacionSlide: function(item){
p.item = item.target.parentNode.getAttribute('item');
m.movimientoSlide(p.item);
},
avanzar: function(){
if(p.item == p.imgSlide.length - 1){
p.item = 0;
} else {
p.item++;
}
m.movimientoSlide(p.item);
},
retroceder: function(){
if(p.item == 0){
p.item = p.imgSlide.length - 1;
} else {
p.item--;
}
m.movimientoSlide(p.item);
},
movimientoSlide: function(item){
p.formatearLoop = true;
p.cajaSlide.style.left = -(item * 100) + '%';
for(var i = 0; i < p.paginacion.length; i++){
p.paginacion[i].style.opacity = .5;
}
p.paginacion[item].style.opacity = 1;
if(p.animacionSlide == 'slide'){
p.cajaSlide.style.transition = '.7s left ease-in-out';
} else if(p.animacionSlide == 'fade') {
p.imgSlide[item].style.opacity = 0;
p.imgSlide[item].style.transition = '.7s opacity ease-in-out';
setTimeout(function(){
p.imgSlide[item].style.opacity = 1;
}, 500);
}
},
intervalo: function(){
setInterval(function(){
if(p.formatearLoop){
p.formatearLoop = false;
} else {
m.avanzar();
}
}, p.velocidadSlide);
}
}
m.inicioSlide();
// GALERIA
// OBJETO CON LAS PROPIEDADES DE LA GALERIA
var pg = {
imgGaleria: document.querySelectorAll('#galeria ul li img'),
rutaImagen: null,
cuerpoDOM: document.querySelector('body'),
lightBox: null,
modal: null,
animacionGaleria: 'fade'
}
// OBJETO CON LOS METODOS DE LA GALERIA
var mg = {
inicioGaleria: function(){
for(var i = 0; i < pg.imgGaleria.length; i++){
pg.imgGaleria[i].addEventListener('click', mg.capturaImagen)
}
},
capturaImagen: function(img){
pg.rutaImagen = img.target;
mg.lightbox(pg.rutaImagen);
},
lightbox: function(img){
pg.cuerpoDOM.appendChild(document.createElement('DIV')).setAttribute('id', 'lightbox');
pg.lightBox = document.querySelector('#lightbox');
pg.lightBox.style.width = '100%';
pg.lightBox.style.height = '100%';
pg.lightBox.style.position = 'fixed';
pg.lightBox.style.zIndex = '10';
pg.lightBox.style.background = 'rgba(0,0,0,.8)';
pg.lightBox.style.top = 0;
pg.lightBox.style.left = 0;
pg.lightBox.appendChild(document.createElement('DIV')).setAttribute('id', 'modal');
pg.modal = document.querySelector('#modal');
pg.modal.innerHTML = img.outerHTML + '<div>X</div>';
pg.modal.style.display = 'block';
pg.modal.style.position = 'relative';
pg.modal.childNodes[0].style.width = '100%';
pg.modal.childNodes[0].style.border = '15px solid white';
if(window.matchMedia('(max-width: 1000px)').matches){
pg.modal.style.width = '90%';
} else {
pg.modal.style.width = '60%';
}
if(pg.animacionGaleria == 'slideLeft'){
pg.modal.style.top = '50%';
pg.modal.style.left = 0;
pg.modal.style.opacity = 0;
setTimeout(function(){
pg.modal.style.transition = '.5s left ease';
pg.modal.style.left = '50%';
pg.modal.style.opacity = 1;
pg.modal.style.marginLeft = - (pg.modal.childNodes[0].width / 2) + 'px';
pg.modal.style.marginTop = - (pg.modal.childNodes[0].height / 2) + 'px';
}, 50);
}
if(pg.animacionGaleria == 'slideTop'){
pg.modal.style.top = '-100%';
pg.modal.style.left = '50%';
pg.modal.style.opacity = 0;
setTimeout(function(){
pg.modal.style.transition = '.5s top ease';
pg.modal.style.top = '50%';
pg.modal.style.opacity = 1;
pg.modal.style.marginLeft = - (pg.modal.childNodes[0].width / 2) + 'px';
pg.modal.style.marginTop = - (pg.modal.childNodes[0].height / 2) + 'px';
}, 50);
}
if(pg.animacionGaleria == 'fade'){
pg.modal.style.top = '50%';
pg.modal.style.left = '50%';
pg.modal.style.opacity = 0;
setTimeout(function(){
pg.modal.style.transition = '.5s opacity ease';
pg.modal.style.opacity = 1;
pg.modal.style.marginLeft = - (pg.modal.childNodes[0].width / 2) + 'px';
pg.modal.style.marginTop = - (pg.modal.childNodes[0].height / 2) + 'px';
}, 50);
}
pg.modal.childNodes[1].style.position = 'absolute';
pg.modal.childNodes[1].style.right = '5px';
pg.modal.childNodes[1].style.top = '5px';
pg.modal.childNodes[1].style.color = 'silver';
pg.modal.childNodes[1].style.cursor = 'pointer';
pg.modal.childNodes[1].style.fontSize = '30px';
pg.modal.childNodes[1].style.width = '40px';
pg.modal.childNodes[1].style.height = '40px';
pg.modal.childNodes[1].style.textAlign = 'center';
pg.modal.childNodes[1].style.background = 'white';
pg.modal.childNodes[1].style.borderRadius = '0px 0px 0px 5px';
pg.modal.childNodes[1].addEventListener('click', mg.salirGaleria);
},
salirGaleria: function(){
pg.lightBox.parentNode.removeChild(pg.lightBox);
}
}
mg.inicioGaleria();
// EFECTO MOUSE
// OBJETO CON LAS PROPIEDADES DEL EFECTO MOUSE
var pm = {
zona: document.querySelector('#efectoMouse'),
figuras: document.querySelector('#efectoMouse figure')
}
// OBJETO CON LOS METODOS DEL EFECTO MOUSE
var mm = {
inicioMouse: function(){
pm.zona.addEventListener('mousemove', mm.movimientoMouse);
for(var i = 0; i < pm.figures.length; i++){
pm.figuras[i].innerHTML = '<img src="https://imgur.com/WRskxnZ"></img>';
pm.figuras[i].style.zIndex = -i;
}
},
movimientoMouse: function(mouse) {
console.log(mouse.offsetX, mouse.offsetY);
}
}
mm.inicioMouse();
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js"></script>
Raw
style.sass
// GENERAL
*
margin: 0
padding: 0
//background: white
//color: black
//text-shadow: inner 1px
font-family: sans-serif
font-size: 20px
font-weight: bold
list-style: none
text-decoration: none
box-sizing: border-box
text-align: center
//.inset_text-shadow
//text-shadow: rgb(0, 0, 0) 0px 0px 2px
a:link, a:visited, a:active, a:hover, a:focus
text-decoration: none
.wrap
position: relative
margin: auto
width: 100%
height: auto
clear: both
.row
//background: purple
position: relative
margin: auto
width: 100%
height: auto
clear: both
// FIN GENERAL
// ENCABEZADO
/*header #logotipo
text-align: center
padding: 20px*/
/*header #logotipo img
width: 100%*/
header nav ul li a
display: block
background: #333
text-align: center
padding: 10px
color: white
// FIN ENCABEZADO
// SLIDESHOW
#slide
position: relative
margin: auto
width: 100%
overflow: hidden
#slide ul
position: relative
left: 0%
margin: auto
height: auto
//width: 400%
clear: both
display: table
#slide ul li
position: relative
float: left
//width: 25%
#slide ul li img
width: 100%
#slide #paginacion
position: absolute
width: 100%
margin: auto
text-align: center
bottom: 10px
left: 0
z-index: 1
#slide #paginacion li
display: inline-block
margin: 0px 5px
cursor: pointer
opacity: 0.5
color: white
text-shadow: 0px 0px 5px #333
#slide #paginacion li:first-child
opacity: 1
#slide .flechas
position: absolute
font-size: 2em
color: white
cursor: pointer
z-index: 2
#slide #retroceder
top: 45%
left: 2%
#slide #avanzar
top: 45%
right: 2%
#slide ul li .textSlide
position: absolute
width: 100%
bottom: 40px
left: 0
text-align: center
z-index: 1
color: white
#slide ul li .textSlide h1
background: rgba(0,0,0,0.5)
font-size: 20px
padding: 5px 0
#slide ul li .textSlide h3
background: rgba(0,0,0,0.5)
font-size: 14px
padding-bottom: 10px
// FIN SLIDESHOW
// GALERIA
#galeria
position: relative
margin: auto
width: 100%
#galeria ul
padding: 20px
#galeria ul li
padding: 10px
cursor: pointer
//transition: .6s
#galeria ul li:hover
transition: .6s
opacity: .6
#galeria ul li img
width: 100%
// FIN GALERIA
// EFECTO MOUSE
#efectoMouse
position: relative
width: 100%
height: 100px
overflow: hidden
#efectoMouse figure
position: absolute
top: 0
left: 0
// FIN EFECTO MOUSE
// @MEDIAQUERIES
// DESKTOP
@media (min-width: 1200px)
.desktop-12
//border: 1px solid black
//background: lightyellow
position: relative
float: left
width: 100%
height: 150px
.desktop-11
//border: 1px solid black
//background: purple
position: relative
float: left
width: 91.66666667%
height: 150px
.desktop-10
//border: 1px solid black
//background: darkred
position: relative
float: left
width: 83.33333333%
height: 150px
.desktop-9
//border: 1px solid black
//background: orange
position: relative
float: left
width: 75%
height: 150px
.desktop-8
//border: 1px solid black
//background: lightgray
position: relative
float: left
width: 66.66666667%
height: 150px
.desktop-7
//border: 1px solid black
//background: lightmaroon
position: relative
float: left
width: 58.33333333%
height: 150px
.desktop-6
//border: 1px solid black
//background: olive
position: relative
float: left
width: 50%
height: 150px
.desktop-5
//border: 1px solid black
//background: lightpink
position: relative
float: left
width: 41.66666667%
height: 150px
.desktop-4
//border: 1px solid black
//background: tomato
position: relative
float: left
width: 33.33333333%
height: 150px
.desktop-3
//border: 1px solid black
//background: beige
position: relative
float: left
width: 25%
height: 150px
.desktop-2
//border: 1px solid black
//background: lightblue
position: relative
float: left
width: 16.66666667%
height: 150px
.desktop-1
//border: 1px solid black
//background: lightgreen
position: relative
float: left
width: 8.33333333%
height: 150px
.desktop-0
display: none
// ENCABEZADO
header nav ul li a
margin: 30% 5px
font-size: 14px
/*header #logotipo img
width: 100%*/
// FIN DESKTOP
// LAPTOP
@media (max-width: 1199px) and (min-width: 992px)
.laptop-12
position: relative
float: left
width: 100%
height: auto
.laptop-11
position: relative
float: left
width: 91.66666667%
height: auto
.laptop-10
position: relative
float: left
width: 83.33333333%
height: auto
.laptop-9
position: relative
float: left
width: 75%
height: auto
.laptop-8
position: relative
float: left
width: 66.66666667%
height: auto
.laptop-7
position: relative
float: left
width: 58.33333333%
height: auto
.laptop-6
position: relative
float: left
width: 50%
height: auto
.laptop-5
position: relative
float: left
width: 41.66666667%
height: auto
.laptop-4
position: relative
float: left
width: 33.33333333%
height: auto
.laptop-3
position: relative
float: left
width: 25%
height: auto
.laptop-2
position: relative
float: left
width: 16.66666667%
height: auto
.laptop-1
position: relative
float: left
width: 8.333333333%
height: auto
.laptop-0
display: none
header nav ul li a
margin: 30% 5px
font-size: 14px
// FIN LAPTOP
// TABLET
@media (max-width: 991px) and (min-width: 768px)
.tablet-12
position: relative
float: left
width: 100%
height: auto
.tablet-11
position: relative
float: left
width: 91.66666667%
height: auto
.tablet-10
position: relative
float: left
width: 83.33333333%
height: auto
.tablet-9
position: relative
float: left
width: 75%
height: auto
.tablet-8
position: relative
float: left
width: 66.66666667%
height: auto
.tablet-7
position: relative
float: left
width: 58.33333333%
height: auto
.tablet-6
position: relative
float: left
width: 50%
height: auto
.tablet-5
position: relative
float: left
width: 41.66666667%
height: auto
.tablet-4
position: relative
float: left
width: 33.33333333%
height: auto
.tablet-3
position: relative
float: left
width: 25%
height: auto
.tablet-2
position: relative
float: left
width: 16.66666667%
height: auto
.tablet-1
position: relative
float: left
width: 8.333333333%
height: auto
.tablet-0
display: none
header nav ul li a
margin: 28% 2px
font-size: 10px
#slide ul li .textSlide h1
font-size: 20px
#slide ul li .textSlide h3
font-size: 14px
// FIN TABLET
// PHONE
@media (max-width: 767px)
.phone-12
position: relative
float: left
width: 100%
height: auto
.phone-11
position: relative
float: left
width: 91.66666667%
height: auto
.phone-10
position: relative
float: left
width: 83.33333333%
height: auto
.phone-9
position: relative
float: left
width: 75%
height: auto
.phone-8
position: relative
float: left
width: 66.66666667%
height: auto
.phone-7
position: relative
float: left
width: 58.33333333%
height: auto
.phone-6
position: relative
float: left
width: 50%
height: auto
.phone-5
position: relative
float: left
width: 41.66666667%
height: auto
.phone-4
position: relative
float: left
width: 33.33333333%
height: auto
.phone-3
position: relative
float: left
width: 25%
height: auto
.phone-2
position: relative
float: left
width: 16.66666667%
height: auto
.phone-1
position: relative
float: left
width: 8.333333333%
height: auto
.phone-0
display: none
header nav ul li a
margin: 0px
font-size: 14px
border-bottom: 1px solid #444
header #logotipo img
width: 50%
#slide ul li .textSlide
display: none
#slide #retroceder
top: 40%
font-size: 1em
left: 2%
#slide #avanzar
top: 40%
font-size: 1em
right: 2%
// FIN PHONE
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment