Código de JavaScript - Focus / Blur Efectos en Web Site

Imágen de perfil
Val: 1.523
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Focus / Blur Efectos en Web Sitegráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 5 de Marzo del 2019 por Scriptshow (137 códigos) (Publicado el 20 de Noviembre del 2017)
1.328 visualizaciones desde el 20 de Noviembre del 2017
  • Scriptshow se encuentra ahora conectado en el
  • chat de PHP
Script que cambia el aspecto de una web, intro, etc. al clicar dentro o fuera del navegador. Los eventos: OnFocus / OnBlur asociados a funciones JavaScript, cambian la/s Clase/s y contenidos de un Sitio Web. Abre el browser en primer plano; haz click sin cerrarlo ni minizarlo para ver el efecto.

Piensa en posibles aplicaciones...

Espero sea útil.

Un saludo

Requerimientos

Un navegador web o dispositivo compatible.

1.0
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 24 de Noviembre del 2017 (Publicado el 20 de Noviembre del 2017)gráfica de visualizaciones de la versión: 1.0
1.329 visualizaciones desde el 20 de Noviembre del 2017
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Version 1.0 revisable.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blur / Focus</title>
<style>
* {
-webkit-transition: .8s;
-moz-transition: .8s;
-ms-transition: .8s;
transition: .8s;
}
body {
height: auto;
font-family: "Open Sans", sans-serif;
}
h1 {
font-size: 80px;
padding: 80px 40px;
text-align: center;
text-rendering: optimizeLegibility;
}
body.focus {
background-color: #D2D2D2;
color: #020202;
}
#focus {
color: #020202;
letter-spacing: .1em;
text-shadow: 4px 4px 16px #202020;
filter: DropShadow(color=#202020, offX=2, offY=2, positive=1);
}
body.blur {
background-color: #2D2D2D;
color: #D2D2D2;
}
#blur {
color: #202020;
letter-spacing: .1em;
text-shadow: 4px 4px 16px #020202;
filter: DropShadow(color=#020202, offX=2, offY=2, positive=1);
}
.focus #focus, 
.blur #blur { 
display: block;
}
.focus #blur, 
.blur #focus { 
display: none;
}
a {
width: 180px;
margin: auto;
padding: 14px;
display: block;
font-size: 14px;
text-align: center;
text-decoration: none;
}
.focus a {
border: 2px solid #202020;
color: #202020;
}
.blur a {
border: 2px solid #D2D2D2;
color: #D2D2D2;
}
</style>
</head>
<body class="focus">
<h1 id="focus">FOCUS</h1>
<h1 id="blur">BLUR</h1>
<a href="#">I N T R O</a>
<h2 align="center">Web</h2>
<h4 align="center">ScriptShow 2000 - 2016</h4>
<script>
window.onblur = function() {
document.title = "Blur";
document.body.className = "blur";
}
 
window.onfocus = function() {
document.title = "Focus";
document.body.className = "focus";
}
</script>
</body>
</html>



Comentarios sobre la versión: 1.0 (1)

26 de Marzo del 2019
estrellaestrellaestrellaestrellaestrella
Show!
Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4310