En esta unidad formativa hemos realizado varios tipos de efectos que dan un poco de vida a la pagina.
A continuación, presento unos ejemplos de lo que hemos conseguido:
Adaptación de un div desplegable con un efecto de transición que se ejecuta al pasar el ratón por encima del div y se oculta al salir del div.
Efecto de icono que se rota al pasar por encima el ratón y aparece la información.
Efecto de sombra en un div y en el texto y efecto ejemplo de imagen reducida en .png de 8, 16 y 32 bits.
Efecto de area de imagen que modifica una imagen al pasar el ratón por encima de una zona delimitada.
Se ha añadido a la página original una pestaña adicional a la que hemos llamado "Motocross" y en ella hemos incrustado un .gif de alta resolución y un Lettering en la tipografía GREENCLEW.
En la página contacto, se ha añadido un formulario de consulta y un iframe de un mapa de google maps.
HTML:
<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head><!-- Created by Artisteer v4.0.0.58833 -->
<!-- Cambio de Estilos CSS en función del tamaño de la pantalla del navegador desde el que se visualiza-->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1600px)" href="style.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-width: 999px)" href="style2.css"/>
<title>Main</title>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<!--Estilo CSS que hace que el objeto y los textos con la class cajafotos tenga un borde y una sombra-->
<style>
.cajafotos
{
position: relative;
bottom: 10px;
background-color: #ffffff;
border-radius: 11px;
opacity: 0.70;
box-shadow: 0px 0px 13px #000000;
width:10%;
height:35%;
left:10px;
margin-left: 10px;
text-align:center;
color: white;
/*Efecto de sombra chula para el texto*/
text-shadow: black 0.05em 0.05em 0.2em;
/*Efecto de sombra chula con drop-shadows*/
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
</style>
<script src="jquery.js"></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
<!--Fichero de funciones y plugin Jquery -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<meta name="description" content="Description">
<meta name="keywords" content="Keywords">
</head>
<body>
<style>
#lat{
position:absolute;
right:1px;
top:100px;
/* Con transition ajustamos la velocidad de despliegue del DIV */
transition: 1s;
background-color: #e0e0e0;
}
#social{
position:relative;
right:1px;
width:138px;
top:5px;
height: 433px;
transition: 1s;
}
</style>
<div id="art-main">
<nav class="art-nav clearfix">
<ul class="art-hmenu"><li><a href="main.html" class="active">Main</a></li><li><a href="motocross.html">Motocross</a></li><li><a href="contact-us.html">Contact Us</a></li></ul>
</nav>
<header class="art-header clearfix">
<div class="art-shapes">
<h1 class="art-headline" data-left="18.01%">
<a href="#">Greenclew</a>
</h1>
<h2 class="art-slogan" data-left="18.43%">Web Design and Internet Marketing</h2>
</div>
</header>
<!--Div desplegable al pasar el raton por encima y contraible al dejar de estár con el ratón por encima//-->
<div id="lat" onmouseover="lat.style.width='100px'" onmouseout="lat.style.width='30px'">
<!-- Imágenes que se despliegan en el div//-->
<img id="social" src="social.jpg" alt="social" />
</div>
<div class="art-sheet clearfix">
<div class="art-layout-wrapper clearfix">
<div class="art-content-layout-row">
<div class="art-layout-cell art-content clearfix"><article class="art-post art-article">
<div class="art-postcontent art-postcontent-0 clearfix"><div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-1" style="width: 100%" >
<br style="line-height: 450px">
<div style="position:absolute;top:110px;left:50px;text-shadow:3px 3px #cccccc;">
<h5>Fresh<br>
actual<br>
ImPressive</h5>
</div>
</div>
</div>
</div>
<div class="art-content-layout-br layout-item-0">
</div><div class="art-content-layout layout-item-2">
<div class="art-content-layout-row">
<!-- Efecto que hace que al pasar por encima el mouse, gire la imagen y aparezcan las características en su lugar-->
<!-- Flip ITEM 1-->
<div class="art-layout-cell layout-item-3" style="width: 25%" >
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<p style="text-align:center;"><img width="201" height="201" alt="" src="images/green1.jpg" class=""></p><!-- front content -->
</div>
<div class="back">
<br><br><br><br><br><br><h4 style="text-align:center;">Projects</h4>
<p style="text-align:center;">Etiam pharet, tellus sit amet congue vulputate.</p><!-- back content -->
</div>
</div>
</div>
</div>
<!-- ITEM 2-->
<div class="art-layout-cell layout-item-3" style="width: 25%" >
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<p style="text-align:center;"><img width="201" height="201" alt="" src="images/green2-2.jpg" class=""></p>
</div>
<div class="back">
<br><br><br><br><br><br><h4 style="text-align:center;">Ideas</h4>
<p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
<!-- ITEM 3-->
<div class="art-layout-cell layout-item-3" style="width: 25%" >
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<p style="text-align:center;"><img width="201" height="201" alt="" src="images/green3-2.jpg" class=""></p>
</div>
<div class="back">
<br><br><br><br><br><br><h4 style="text-align:center;">process</h4>
<p style="text-align:center;">Aenean citudin imperdiet dignissim posuere id.</p>
</div>
</div>
</div>
</div>
<!-- ITEM 4-->
<div class="art-layout-cell layout-item-3" style="width: 25%" >
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<p style="text-align:center;"><img width="201" height="201" alt="" src="images/green4.jpg" class=""></p>
</div>
<div class="back">
<br><br><br><br><br><br><h4 style="text-align:center;">Offers</h4>
<p style="text-align:center;">Cras elit nisl, rhoncus nec dolor iaculis ultricies.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Ejemplo inserción de objeto iframe, en este caso, un video de youtube-->
<center><iframe width="640" height="360" src="https://www.youtube.com/embed/4tDGuqEps7Y?controls=0" frameborder="0" allowfullscreen></iframe></center>
<br><br><br>
<!-- Ejemplo imagenes .png 8 bits, 16 bits 32 bits-->
<div class="art-content-layout-br layout-item-0">
</div>
<div class="art-content-layout layout-item-2">
<h3>PROGRESSION IMAGE QUALITY</h3>
<br><br>
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-3" style="width: 30%" >
<div class="cajafotos">
<h6>.png</h6>
<br><p>8 bits</p>
</div>
<p style="text-align:center;"><img width="201" height="201" alt="" src="images/8bit.png" class=""></p>
<center> Ejemplo de imagen a 8 bits.</center><br clear="all">
</div>
</div>
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-3" style="width: 30%" >
<div class="cajafotos">
<h6>.png</h6>
<br><p>16 bits</p>
</div>
<p style="text-align:center;"><img width="201" height="201" alt="" src="images/16bit.png" class=""></p>
<center>Ejemplo de imagen a 16 bits.</center><br clear="all">
</div>
</div>
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-3" style="width: 30%" >
<div class="cajafotos">
<h6>.png</h6>
<br><p>32 bits</p>
</div>
<p style="text-align:center;"><img width="201" height="201" alt="" src="images/32bit.png" class=""></p>
<center>Ejemplo de imagen a 32 bits.</center><br clear="all">
</div>
</div>
</div>
<div class="art-content-layout-br layout-item-0">
</div><div class="art-content-layout layout-item-2">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-3" style="width: 25%" >
<h3>Latest News</h3>
<div class="newsdate">
<h6>17</h6>
<p>Apr</p>
</div>
Lorem ipsum dolor sit amet aenean sollicitudin arcu.<br clear="all">
<div class="newsdate">
<h6>27</h6>
<p>Mar</p>
</div>
Etiam pharetra, tellus sit amet congue vulputate.<br clear="all">
<div class="newsdate">
<h6>05</h6>
<p>Mar</p>
</div>
Curabitur gravida felis, sit amet scelerisque.<br clear="all">
<div class="newsdate">
<h6>19</h6>
<p>Feb</p>
</div>
Donec vel neque in neque porta sed sit amet lectus.<br clear="all">
<div class="newsdate">
<h6>24</h6>
<p>Jan</p>
</div>
Morbi tristique posuere consequat vel neque in neque.
</div><div class="art-layout-cell layout-item-3" style="width: 50%" >
<h1>Quality and Efficiency</h1>
<!-- Ejemplo de mapa de imagenes-->
<!--La etiqueta <map> define el área del objeto donde queremos hacer la acción-->
<map name="mapa1">
<area shape="RECT" coords="217,78,389,207" onmouseover="mouseover1()" onmouseout="mouseout1()">
</map>
<!--Scripts para sustituir la imagen del mapa de imagen al pasar por encima con el ratón-->
<script>
function mouseover1()
{
document.getElementById("imagsust").src = "images/tele2.jpg";
}
function mouseout1()
{
document.getElementById("imagsust").src = "images/tele1.jpg";
}
</script>
<img id="imagsust" width="449" height="300" alt="Mapa de imágenes. Pasa el raton sobre la pantalla del televisor." border="0" usemap="#mapa1" src="images/tele1.jpg" style="margin-right:-50px;" class="">
<!-- Efecto Jquery que hace agrandarse el texto al hacer click en el botón-->
<button id="readbuton" class="art-button">»Zoom Text</button>
<script>
// Using multiple unit types within one animation.
$( "#readbuton" ).click(function() {
$( "#textoanimado" ).animate({
width: "80%",
opacity: 1,
marginLeft: "0.6in",
fontSize: "2em",
borderWidth: "10px"
}, 1500 );
});
</script>
<div id="textoanimado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris. Pellentesque ac felis tellus.</p>
</div>
</div><div class="art-layout-cell layout-item-3" style="width: 25%" >
<h3>Services</h3>
<ul>
<li>Suspendisse pharetra auctor pharetra.</li>
<li>Nunc a sollicitudin est.</li>
<li>Curabitur ullamcorper gravida felis</li>
<li>Sit amet scelerisque lorem iaculis sed.</li>
<li>Donec vel neque in neque porta venenatis sed sit amet lectus.</li>
<li>Morbi tristique posuere consequat.</li>
<li>Maecenas ut lorem lacus.</li>
<li>Suspendisse et sem eleifend massa.</li>
<li>Donec ut hendrerit enim.</li>
</ul>
</div>
</div>
</div>
</div>
</article></div>
</div>
</div>
</div><footer class="art-footer clearfix">
<div class="art-content-layout layout-item-0">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-1" style="width: 20%">
<p style="font-size:18px;">INFO</p>
<br>
<ul>
<li><a href="#">Welcome</a></li>
<li><a href="#">People</a></li>
<li><a href="#">Management</a></li>
</ul>
</div><div class="art-layout-cell layout-item-1" style="width: 18%">
<p style="font-size:18px;">LOCATION</p>
<br>
<ul>
<li><a href="#">Map</a></li>
<li><a href="#">Address</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><div class="art-layout-cell layout-item-1" style="width: 25%">
<p style="font-size:18px;">ABOUT</p>
<br>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Terms</a></li>
</ul>
</div><div class="art-layout-cell" style="width: 37%">
<p style="text-align:right;"><br></p>
<p style="text-align:right;"><img width="32" height="32" alt="" src="images/rss_32-2.png" style="margin:5px;"><img width="32" height="32" alt="" src="images/picasa_32-2.png" style="margin:5px;"><img width="32" height="32" alt="" src="images/facebook_32-2.png" style="margin:5px;" class=""><img width="32" height="32" alt="" src="images/flickr_32-2.png" style="margin:5px;" class=""><br>
<a href="http://artdesigner.lv"></a></p>
<p style="text-align: right;"><span style="text-align: right;"><br></span></p>
<p style="text-align: right;"><span style="text-align: right;">Copyright © 2011-2012. All Rights Reserved.<br>
Icons by <a href="http://artdesigner.lv">Artdesigner.lv</a></span><br></p>
<p style="text-align: right;"><br></p>
<p style="text-align: right;"><br></p>
</div>
</div>
</div>
</footer>
</div>
<p class="art-page-footer">
<span id="art-footnote-links"><a href="http://www.artisteer.com/" target="_blank">Web Template</a> created with Artisteer.</span>
</p>
</div>
</body></html>
No hay comentarios:
Publicar un comentario