Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Efecto apagar las luces para ver vídeos


luces apagadas efecto


Este truco es unos de los que más me gustan y más llamativos a la hora de visualizar vídeos en internet, y este script nos lo ofrece la página web de Janko y cómo no, usa jQuery, para crear dicho efecto. El efecto es fascinante, al hacer click en apagar las luces, hace que toda la página se oscurezca, menos el vídeo, la película que estés viendo, tu vídeo de Youtube favorito, o la televisión on-line que estés visionando. De este modo, no habrá otros elementos que nos distraigan, y la apariencia del efecto parecerá que estemos en el cine, de nuestra localidad. A continuación puedes ver una demostración:







  1. Para insertar o incrustar este maravilloso efecto en tu blog de Blogger, por ejemplo, sería de la siguiente forma que te mostramos a continuación o seguidamente, sigue los pasos:
  2. Entra en Blogger
  3. A continuación ingresas en Plantilla
  4. Ahora en Editar Html
  5. Busca la etiqueta </head> en tu plantilla
  6. Y antes de dicha etiqueta añades el siguiente script
  7. Atención: si ya tienes insertado jQuery en tu plantilla, omite la primera línea de código.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type="text/javascript">
//<![CDATA[ 
$(document).ready(function(){
$("#oscuro").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#oscuro").toggle();
if ($("#oscuro").is(":hidden"))
$(this).html("Apagar las luces").removeClass("turnedOff");
else
$(this).html("Encender las luces").addClass("turnedOff");
});
});
//]]>
</script>

Si tienes insertado Mootools o Scriptaculous en tu plantilla, usa este parche!

<script type="text/javascript">
//<![CDATA[ 
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#oscuro").css("height", jQuery(document).height()).hide();
jQuery(".lightSwitcher").click(function(){
jQuery("#oscuro").toggle();
if (jQuery("#oscuro").is(":hidden"))
jQuery(this).html("Apagar las luces").removeClass("turnedOff");
else
jQuery(this).html("Encender las luces").addClass("turnedOff");
});
});
//]]>
</script>

Ahora añade los estilos en CSS antes de ]]></b:skin>

/*Truco apagar las luces en Aizum Blog*/
#videolights {
position:relative;
z-index:102;
}
#apagar {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(http://lh6.googleusercontent.com/-azJxijJlWX4/T3vT2giQqkI/AAAAAAAACWk/6wt4sBdcHEY/s16/luces-on.png); /* icono bombilla en On */
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(http://lh4.googleusercontent.com/-J0U5xRqb7KU/T3vT2kcmUsI/AAAAAAAACWo/-VTwo42-Nj0/s16/luces-off.png);  /* icono bombilla en Off */
}
#oscuro {
background:#000; /* Color del fondo */
opacity:0.7; /* Opacidad de la pantalla */
filter:alpha(opacity=70); /* Opacidad de la pantalla */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Ahora añade el siguiente código antes de </body>

<div id='oscuro'/>


Y por último, dónde quieras poner tu vídeo, usa este código!

<center>
<div id="apagar"><a class="lightSwitcher" href="javascript:void(0);">Apagar las luces</a></div>
<div id="videolights">
...Aquí el código embed del video...
</div>
</center>



Aizum Blog, lunes, diciembre 30, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9