html
<div id="ticker-tape"></div>
<script src="https://example.com/ticker-tape-widget.js"></script>
<script>
TickerTapeWidget.init({
containerId: 'ticker-tape',
symbols: ['AAPL', 'GOOGL', 'AMZN'],
style: 'vintage',
speed: 'medium'
});
</script>
html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botones Magnéticos con Efecto Parallax</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="button-container">
<button class="magnetic-button">¡Haz clic aquí!</button>
</div>
<script src="script.js"></script>
</body>
</html>
css
/* styles.css */
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
}
.button-container {
position: relative;
}
.magnetic-button {
padding: 15px 30px;
border: none;
background-color: #ff6f61;
color: white;
font-size: 16px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.magnetic-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 150%;
height: 150%;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease;
z-index: 0;
}
.magnetic-button:hover {
transform: scale(1.1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.magnetic-button:hover::before {
transform: translate(-50%, -50%) scale(1.3);
}
javascript
// script.js
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('.magnetic-button');
document.addEventListener('mousemove', (event) => {
const { clientX: mouseX, clientY: mouseY } = event;
const { offsetLeft: buttonX, offsetTop: buttonY, offsetWidth: buttonWidth, offsetHeight: buttonHeight } = button;
const buttonCenterX = buttonX + buttonWidth / 2;
const buttonCenterY = buttonY + buttonHeight / 2;
const deltaX = mouseX - buttonCenterX;
const deltaY = mouseY - buttonCenterY;
const maxOffset = 20;
const offsetX = Math.max(-maxOffset, Math.min(maxOffset, deltaX / 10));
const offsetY = Math.max(-maxOffset, Math.min(maxOffset, deltaY / 10));
button.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
});
});
css
body {
background-image: url("../img/noise.gif"), radial-gradient(circle, rgb(242, 251, 248) 0%, rgb(248, 254, 252) 100%);
background-size: cover;
background-repeat: no-repeat;
background-blend-mode: overlay;
}
css
@keyframes distortion {
0% {
transform: scale(1) skew(0deg, 0deg);
}
25% {
transform: scale(1.05) skew(1deg, -1deg);
}
50% {
transform: scale(1) skew(-1deg, 1deg);
}
75% {
transform: scale(1.05) skew(1deg, 0deg);
}
100% {
transform: scale(1) skew(0deg, 0deg);
}
}
css
.producttags a:hover {
color: black;
background: #fce4cc;
text-decoration: none;
animation: distortion 0.3s ease-in-out; /* Aplica la animación de distorsión */
}
css
.producttags a:before,
.producttags a:after {
content: "";
position: absolute;
/* Estilos adicionales */
transition: opacity 0.3s ease-in-out; /* Transición para suavizar la desaparición */
}
.producttags a:hover:before,
.producttags a:hover:after {
opacity: 0; /* O utiliza visibility: hidden; */
}
css
.producttags a:hover::after {
backdrop-filter: blur(10px); /* Aplica desenfoque */
}
css
@keyframes distortion {
0% {
transform: scale(1) skew(0deg, 0deg);
}
25% {
transform: scale(1.05) skew(1deg, -1deg);
}
50% {
transform: scale(1) skew(-1deg, 1deg);
}
75% {
transform: scale(1.05) skew(1deg, 0deg);
}
100% {
transform: scale(1) skew(0deg, 0deg);
}
}
.producttags {
list-style: none;
position: relative;
clear: both;
display: block;
padding-bottom: 20px;
margin-bottom: 20px;
}
.producttags li, .producttags a {
float: left;
height: 24px;
line-height: 24px;
position: relative;
font-size: 11px;
}
.producttags a {
margin-left: 20px;
padding: 0 10px 0 12px;
background: black;
color: white;
text-decoration: none;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
position: relative;
overflow: hidden;
}
.producttags a:visited {
color: #fce4cc;
}
.producttags a:before,
.producttags a:after {
content: "";
position: absolute;
top: 0;
left: -12px;
width: 0;
height: 0;
border-color: transparent black transparent transparent;
border-style: solid;
border-width: 12px 12px 12px 0;
transition: opacity 0.3s ease-in-out; /* Transición para suavizar la desaparición */
}
.producttags a:after {
background: #fff;
border-radius: 2px;
box-shadow: -1px -1px 2px #004977;
}
.producttags a:hover {
color: black;
background: #fce4cc;
text-decoration: none;
animation: distortion 0.3s ease-in-out; /* Aplica la animación de distorsión */
}
.producttags a:hover:before,
.producttags a:hover:after {
opacity: 0; /* Pseudo-elementos se hacen invisibles durante el efecto de distorsión */
}
perl awstats.pl -config=misitio -update
Capacitación
por MCE. Mauricio Eberle Morales
Ago 28, 2024 |
Cómo utilizar el plugin WP Reading Time en WordPress
por MCE. Mauricio Eberle Morales
Ago 23, 2024 |
Biblioteca UT Tehuacán
por Elba Roman
Ago 22, 2024 |
Reunión Biblioteca
por Cinthia Tovar
Ago 22, 2024 |
UT Tehuacán
por MCE. Mauricio Eberle Morales
Ago 21, 2024 |
UT Oriental
por Kat-IA
Ago 20, 2024 |
Termux
por MCE. Mauricio Eberle Morales
Ago 20, 2024 |
CrowdStrike
por MCE. Mauricio Eberle Morales
Ago 20, 2024 |
Reunión Silsa
por Cesar Sandoval
Ago 20, 2024 |
Todito Fiesta
por MCE. Mauricio Eberle Morales
Ago 15, 2024 |
Únete a nosotros en nuestro compromiso de promover el acceso abierto y la difusión del conocimiento. Tu apoyo financiero nos permite continuar con nuestros proyectos de Open Access. Además, como agradecimiento, recibirás una hermosa página web como regalo. ¡Juntos podemos hacer la diferencia en el mundo del conocimiento abierto!