En la creación del post
antes que nada este post esta dedicado a este publico especial de taringa que le gusta el marketing, el desarrollo web y la mercadotecnia, no hice este post para que lo miraran con el afán de mirarlo y hacer publicidad, sino con la intensión de verla estrategia de marketing que se utiliza a través de html 5 y la creatividad que se puede hacer con simples herramientas.
yo soy un estudiante de arquitectura que en sus tiempos libres se dedica a diseñar paginas web y se me ocurrió por que no hacer un comercial y luego dije uffff habrá que conseguir cámaras y actores y todo eso y simplemente dije naaa, después de estar viendo varios comerciales de windows, apple, google y muchos otros de la nueva tendencia tecnológica me di cuenta que tal vez no era necesario
yo soy un estudiante de arquitectura que en sus tiempos libres se dedica a diseñar paginas web y se me ocurrió por que no hacer un comercial y luego dije uffff habrá que conseguir cámaras y actores y todo eso y simplemente dije naaa, después de estar viendo varios comerciales de windows, apple, google y muchos otros de la nueva tendencia tecnológica me di cuenta que tal vez no era necesario
bueno ahora los programas utilizados fueron:
El famosos photoshop cs 5, para las imágenes, textos etc.
camtasia estudio 7 iba a usar el after efects pero no le se mucho este lo utilice para grabar las animaciones html 5 y las funciones como lo son sooms y aditamentos de 3 textos describiendo la dirección de las paginas web, ademas para gener el archivo .avi
Google chrome para correr las animaciones y el funcionamiento las paginas web
sehncha para editar el código de html 5
Adobe audition 2.0 para el audio, el audio que se graba con el camtasia estudio es muy malo es mono y uno cuando hace las cosas siempre quiere lo mejor, así que limpie el audio lo mas que pude y lo grabe a 440 kbps, 94 khz, 2 chanels, 24 bits CBR
y flash parque algunas paginas están en flash todabia
La idea del comercial
fue básicamente hacer algo minimalista y que explicara rápido lo que se necesita, viendo las tendencias en publicidad que esta utilizando microsoft, google y apple creo que fue la elección correcta y ademas porque no poda hacer mas
Pensamientos
tal ves ustedes dirán porque usar html 5 si el camtasia puede hacer muchos efectos, claro que puede hacer muchos efectos pero no puede hacer todos
Aquí en este link pueden ver lo que se hizo directamente en html 5 (solo google chrome y safari lo pueden correr):
Codigo
y bueno este fue el código usado para la parte de html 5
[color=#000000]
<!DOCTYPE html5>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Video version html 5</title><script type="text/javascript">
function setConfig(configObject) {
config = configObject;
//get ol list and children
var ol = document.body.getElementsByTagName('ol')[0];
scenes = ol.children;
currentSceneIndex = -1;
}
function start() {
goToScene(0);
}
function goToSceneID(id) {
for (var i=0; i < config.length; i++) {
if (config[i].id === id) {
goToScene(i);
return;
}
}
}
//function to go directly to any scene
function goToScene(index) {
//go to scene
startScene(index);
//set up timer if jumping on done
if (config[index].jump !== -1) {
applyTimeout(config[index].jump, config[index].duration);
}
}
function startScene(index) {
//restart current scene without flicker
if (index === currentSceneIndex) {
scenes[index].setAttribute('class','run restart');
setTimeout(function(){
scenes[index].setAttribute('class','run');
},0);
return;
}
//add the class "run" to the scene currently running and remove it from anybody else
var scene;
for (var i=0; i < scenes.length; i++) {
scene = scenes[i];
if (i === index) {
scene.setAttribute('class','run');
} else {
scene.setAttribute('class','');
}
}
currentSceneIndex = index;
}
//set timeout
function applyTimeout(index,time) {
setTimeout(function(){
goToScene(index);
},time);
}
</script><script type="text/javascript">
window.onload=setup;
function setup() {
setConfig([{"jump":-1,"duration":41620,"id":0}]);
start();
}
</script>
<style type="text/css">
.AN-sObj-stage {
border:1px solid #000;
position: relative;
overflow:hidden;
-webkit-perspective: 600;
-webkit-transform-style:preserve-3d;
}
.AN-sObj-stage div {
position: absolute;
}
.AN-sObj-stage a {
color: inherit;
text-decoration:none;
}
.AN-sObj-stage * {
margin:0;
padding:0;
-webkit-font-smoothing: antialiased;
}
body,.AN-sObj-stage,ol,li {
margin:0;
padding:0;
}
ol {
list-style:none;
position:relative;
}
li {
position:absolute;
top:0;
left:0;
}
li {
display:none;
}
li.run {
display:block;
}
.restart * {
-webkit-animation-name: none !important;
}
.AN-sObj-stage{
height: 720px;
width: 1280px;
background-color: rgba(255,255,255,1);
border:1px solid rgba(255,255,255,0.82);
}
#AN-sObj-450{
-webkit-transform: translate3d(393px, 263px, 0px);
width: 611px;
height: 160px;
top:0;
left:0;
}
#AN-sObj-451{
-webkit-transform: translate3d(15px, 303px, 0px);
width: 1238px;
height: 57px;
top:0;
left:0;
}
#AN-sObj-452{
-webkit-transform: translate3d(15px, 303px, 0px);
width: 1238px;
height: 57px;
top:0;
left:0;
}
#AN-sObj-453{
-webkit-transform: translate3d(15px, 303px, 0px);
width: 1238px;
height: 57px;
top:0;
left:0;
}
#AN-sObj-454{
-webkit-transform: translate3d(420px, 103px, 0px);
width: 495px;
height: 498px;
top:0;
left:0;
}
#AN-sObj-455{
-webkit-transform: translate3d(512px, 290px, 0px);
width: 302px;
height: 52px;
top:0;
left:0;
}
#AN-sObj-456{
-webkit-transform: translate3d(512px, 290px, 0px);
width: 302px;
height: 52px;
top:0;
left:0;
}
#AN-sObj-457{
-webkit-transform: translate3d(512px, 290px, 0px);
width: 302px;
height: 52px;
top:0;
left:0;
}
#AN-sObj-458{
-webkit-transform: translate3d(-26px, -26px, 0px);
width: 1337px;
height: 777px;
top:0;
left:0;
}
#AN-sObj-459{
-webkit-transform: translate3d(0px, 0px, 0px);
width: 1280px;
height: 720px;
top:0;
left:0;
}
#AN-sObj-460{
-webkit-transform: translate3d(220px, 297px, 0px) scale3d(0.917, 0.917, 1);
width: 844px;
height: 55px;
top:0;
left:0;
}
#AN-sObj-461{
-webkit-transform: translate3d(0px, 0px, 0px);
width: 1280px;
height: 720px;
top:0;
left:0;
}
#AN-sObj-462{
-webkit-transform: translate3d(0px, 0px, 0px);
width: 1280px;
height: 720px;
top:0;
left:0;
}
#AN-sObj-463{
-webkit-transform: translate3d(530px, 320px, 0px);
width: 302px;
height: 52px;
top:0;
left:0;
}
#AN-sObj-464{
-webkit-transform: translate3d(0px, 0px, 0px);
width: 1280px;
height: 720px;
top:0;
left:0;
}
#AN-sObj-465{
-webkit-transform: translate3d(0px, 0px, 0px);
width: 1280px;
height: 720px;
top:0;
left:0;
}
#AN-sObj-466{
-webkit-transform: translate3d(134px, 321px, 0px);
width: 1024px;
height: 55px;
top:0;
left:0;
}
#AN-sObj-467{
-webkit-transform: translate3d(363px, 262px, 0px);
width: 611px;
height: 160px;
top:0;
left:0;
}
@-webkit-keyframes AN-ani-468 {
0% {
-webkit-transform: translate3d(393px, 263px, 0px) scale3d(0.629, 0.629, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(393px, 263px, 0px) scale3d(0.629, 0.629, 1);
opacity: 0;
}
20.48% {
-webkit-transform: translate3d(393px, 263px, 0px) scale3d(0.629, 0.629, 1);
opacity: 1;
}
81.65% {
-webkit-transform: translate3d(393px, 263px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
100% {
-webkit-transform: translate3d(393px, 263px, 0px) scale3d(1, 1, 1);
opacity: 0;
}
}
.run #AN-sObj-450{
-webkit-animation-name: AN-ani-468;
-webkit-animation-duration: 3.7600000000000002s;
-webkit-animation-delay: 0.21s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-450{
-webkit-transform: translate3d(393px, 263px, 0px) scale3d(0.629, 0.629, 1);
opacity: 0;
}
@-webkit-keyframes AN-ani-469 {
0% {
-webkit-transform: translate3d(15px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0.563, 0.563, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(15px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0.563, 0.563, 1);
opacity: 0;
}
58.26% {
-webkit-transform: translate3d(15px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
opacity: 0.4;
}
100% {
-webkit-transform: translate3d(38px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(2.007, 2.007, 1);
opacity: 0;
}
}
.run #AN-sObj-451{
-webkit-animation-name: AN-ani-469;
-webkit-animation-duration: 7.139999999999999s;
-webkit-animation-delay: 4.23s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-451{
-webkit-transform: translate3d(15px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0.563, 0.563, 1);
opacity: 0;
}
@-webkit-keyframes AN-ani-470 {
0% {
-webkit-transform: translate3d(15px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0.563, 0.563, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(15px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0.563, 0.563, 1);
opacity: 0;
}
56.52% {
-webkit-transform: translate3d(15px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
opacity: 0.4;
}
100% {
-webkit-transform: translate3d(38px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(2.007, 2.007, 1);
opacity: 0;
}
}
.run #AN-sObj-452{
-webkit-animation-name: AN-ani-470;
-webkit-animation-duration: 7.359999999999999s;
-webkit-animation-delay: 4.23s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-452{
-webkit-transform: translate3d(15px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0.563, 0.563, 1);
opacity: 0;
}
@-webkit-keyframes AN-ani-471 {
0% {
-webkit-transform: translate3d(15px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0.563, 0.563, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(15px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0.563, 0.563, 1);
opacity: 0;
}
54.74% {
-webkit-transform: translate3d(15px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
opacity: 0.4;
}
100% {
-webkit-transform: translate3d(38px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(2.007, 2.007, 1);
opacity: 0;
}
}
.run #AN-sObj-453{
-webkit-animation-name: AN-ani-471;
-webkit-animation-duration: 7.6s;
-webkit-animation-delay: 4.23s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-453{
-webkit-transform: translate3d(15px, 303px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0.563, 0.563, 1);
opacity: 0;
}
@-webkit-keyframes AN-ani-472 {
0% {
-webkit-transform: translate3d(420px, 103px, 0px) scale3d(0.352, 0.352, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(420px, 103px, 0px) scale3d(0.352, 0.352, 1);
opacity: 0;
}
51.12% {
-webkit-transform: translate3d(420px, 103px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
100% {
-webkit-transform: translate3d(420px, 103px, 0px) scale3d(1.168, 1.168, 1);
opacity: 0;
}
}
.run #AN-sObj-454{
-webkit-animation-name: AN-ani-472;
-webkit-animation-duration: 4.010000000000002s;
-webkit-animation-delay: 12.11s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-454{
-webkit-transform: translate3d(420px, 103px, 0px) scale3d(0.352, 0.352, 1);
opacity: 0;
}
@-webkit-keyframes AN-ani-473 {
0% {
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(0.435, 0.435, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(0.435, 0.435, 1);
opacity: 0;
}
38.08% {
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(1, 1, 1);
opacity: 0.3;
}
100% {
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(1.65, 1.712, 1);
opacity: 0;
}
}
.run #AN-sObj-455{
-webkit-animation-name: AN-ani-473;
-webkit-animation-duration: 2.8099999999999987s;
-webkit-animation-delay: 10.3s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-455{
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(0.435, 0.435, 1);
opacity: 0;
}
@-webkit-keyframes AN-ani-474 {
0% {
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(0.435, 0.435, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(0.435, 0.435, 1);
opacity: 0;
}
41.63% {
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(1, 1, 1);
opacity: 0.2;
}
100% {
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(1.65, 1.712, 1);
opacity: 0;
}
}
.run #AN-sObj-456{
-webkit-animation-name: AN-ani-474;
-webkit-animation-duration: 2.5699999999999985s;
-webkit-animation-delay: 10.3s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-456{
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(0.435, 0.435, 1);
opacity: 0;
}
@-webkit-keyframes AN-ani-475 {
0% {
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(0.435, 0.435, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(0.435, 0.435, 1);
opacity: 0;
}
44.96% {
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(1, 1, 1);
opacity: 0.2;
}
100% {
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(1.65, 1.712, 1);
opacity: 0;
}
}
.run #AN-sObj-457{
-webkit-animation-name: AN-ani-475;
-webkit-animation-duration: 2.379999999999999s;
-webkit-animation-delay: 10.3s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-457{
-webkit-transform: translate3d(512px, 290px, 0px) scale3d(0.435, 0.435, 1);
opacity: 0;
}
@-webkit-keyframes AN-ani-476 {
0% {
-webkit-transform: translate3d(-8px, -28px, 0px) scale3d(0.191, 0.191, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(-8px, -28px, 0px) scale3d(0.191, 0.191, 1);
opacity: 0;
}
46.67% {
-webkit-transform: translate3d(-26px, -26px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
87.47% {
-webkit-transform: translate3d(-26px, -26px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
100% {
-webkit-transform: translate3d(-26px, -26px, 0px) scale3d(1, 1, 1);
opacity: 0;
}
}
.run #AN-sObj-458{
-webkit-animation-name: AN-ani-476;
-webkit-animation-duration: 4.950000000000001s;
-webkit-animation-delay: 14.76s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-458{
-webkit-transform: translate3d(-8px, -28px, 0px) scale3d(0.191, 0.191, 1);
opacity: 0;
}
@-webkit-keyframes AN-ani-477 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
78.1% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1.167, 1.167, 1);
opacity: 0;
}
}
.run #AN-sObj-459{
-webkit-animation-name: AN-ani-477;
-webkit-animation-duration: 3.469999999999999s;
-webkit-animation-delay: 19.09s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-459{
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
@-webkit-keyframes AN-ani-478 {
0% {
-webkit-transform: translate3d(220px, 297px, 0px) scale3d(0.81613, 0.81613, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(220px, 297px, 0px) scale3d(0.81613, 0.81613, 1);
opacity: 0;
}
64.46% {
-webkit-transform: translate3d(220px, 297px, 0px) scale3d(0.917, 0.917, 1);
opacity: 1;
}
100% {
-webkit-transform: translate3d(220px, 297px, 0px) scale3d(1.518552, 1.518552, 1);
opacity: 0;
}
}
.run #AN-sObj-460{
-webkit-animation-name: AN-ani-478;
-webkit-animation-duration: 2.870000000000001s;
-webkit-animation-delay: 22.2s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-460{
-webkit-transform: translate3d(220px, 297px, 0px) scale3d(0.81613, 0.81613, 1);
opacity: 0;
}
@-webkit-keyframes AN-ani-479 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.789, 0.789, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.789, 0.789, 1);
opacity: 0;
}
44.19% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
87.98% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 0;
}
}
.run #AN-sObj-461{
-webkit-animation-name: AN-ani-479;
-webkit-animation-duration: 2.580000000000002s;
-webkit-animation-delay: 24.81s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-461{
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.789, 0.789, 1);
opacity: 0;
}
@-webkit-keyframes AN-ani-480 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
100% {
-webkit-transform: translate3d(360px, -6px, 0px) scale3d(1.574, 1.574, 1);
opacity: 0;
}
}
.run #AN-sObj-462{
-webkit-animation-name: AN-ani-480;
-webkit-animation-duration: 1.1699999999999982s;
-webkit-animation-delay: 27.06s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-462{
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
@-webkit-keyframes AN-ani-481 {
0% {
-webkit-transform: translate3d(530px, 320px, 0px) scale3d(0.551, 0.551, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(530px, 320px, 0px) scale3d(0.551, 0.551, 1);
opacity: 0;
}
57.21% {
-webkit-transform: translate3d(530px, 320px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
100% {
-webkit-transform: translate3d(500px, 326px, 0px) scale3d(3.718, 3.718, 1);
opacity: 0;
}
}
.run #AN-sObj-463{
-webkit-animation-name: AN-ani-481;
-webkit-animation-duration: 2.1499999999999986s;
-webkit-animation-delay: 27.39s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-463{
-webkit-transform: translate3d(530px, 320px, 0px) scale3d(0.551, 0.551, 1);
opacity: 0;
}
@-webkit-keyframes AN-ani-482 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.789, 0.789, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.789, 0.789, 1);
opacity: 0;
}
58% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
85.33% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 0;
}
}
.run #AN-sObj-464{
-webkit-animation-name: AN-ani-482;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 29.04s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-464{
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.789, 0.789, 1);
opacity: 0;
}
@-webkit-keyframes AN-ani-483 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
46.29% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1.629, 1.629, 1);
opacity: 0;
}
}
.run #AN-sObj-465{
-webkit-animation-name: AN-ani-483;
-webkit-animation-duration: 1.7500000000000036s;
-webkit-animation-delay: 30.84s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-465{
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
@-webkit-keyframes AN-ani-484 {
0% {
-webkit-transform: translate3d(134px, 321px, 0px) scale3d(0.787, 0.787, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(134px, 321px, 0px) scale3d(0.787, 0.787, 1);
opacity: 0;
}
32.34% {
-webkit-transform: translate3d(134px, 321px, 0px) scale3d(1, 1, 1);
opacity: 0.7;
}
57.27% {
-webkit-transform: translate3d(134px, 321px, 0px) scale3d(1, 1, 1);
opacity: 0.7;
}
100% {
-webkit-transform: translate3d(134px, 321px, 0px) scale3d(1.55, 1.55, 1);
opacity: 0;
}
}
.run #AN-sObj-466{
-webkit-animation-name: AN-ani-484;
-webkit-animation-duration: 3.3699999999999974s;
-webkit-animation-delay: 32.35s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-466{
-webkit-transform: translate3d(134px, 321px, 0px) scale3d(0.787, 0.787, 1);
opacity: 0;
}
@-webkit-keyframes AN-ani-485 {
0% {
-webkit-transform: translate3d(363px, 262px, 0px) scale3d(0.725, 0.725, 1);
opacity:0;
}
0.01% {
-webkit-transform: translate3d(363px, 262px, 0px) scale3d(0.725, 0.725, 1);
opacity: 0;
}
37.23% {
-webkit-transform: translate3d(363px, 262px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
62.1% {
-webkit-transform: translate3d(363px, 262px, 0px) scale3d(1, 1, 1);
opacity: 1;
}
100% {
-webkit-transform: translate3d(363px, 262px, 0px) scale3d(1.172, 1.172, 1);
opacity: 0;
}
}
.run #AN-sObj-467{
-webkit-animation-name: AN-ani-485;
-webkit-animation-duration: 5.909999999999997s;
-webkit-animation-delay: 35.46s;
-webkit-animation-fill-mode: both;
}
.restart #AN-sObj-467{
-webkit-transform: translate3d(363px, 262px, 0px) scale3d(0.725, 0.725, 1);
opacity: 0;
}
</style>
</head>
<body>
<ol>
<li id="scene-0"><div class="AN-sObj-stage" id="ext-gen873"><div class="AN-Object" id="AN-sObj-450"><div id="AN-sObj-val-450"><img src="assets/logo naturalwebs.jpg"></div></div><div class="AN-Object" id="AN-sObj-451"><div id="AN-sObj-val-451"><img src="assets/frank.png"></div></div><div class="AN-Object" id="AN-sObj-452"><div id="AN-sObj-val-452"><img src="assets/frank.png"></div></div><div class="AN-Object" id="AN-sObj-453"><div id="AN-sObj-val-453"><img src="assets/frank.png"></div></div><div class="AN-Object" id="AN-sObj-454"><div id="AN-sObj-val-454"><img src="assets/html5-display.png"></div></div><div class="AN-Object" id="AN-sObj-455"><div id="AN-sObj-val-455"><img src="assets/descubre2.png"></div></div><div class="AN-Object" id="AN-sObj-456"><div id="AN-sObj-val-456"><img src="assets/descubre2.png"></div></div><div class="AN-Object" id="AN-sObj-457"><div id="AN-sObj-val-457"><img src="assets/descubre2.png"></div></div><div class="AN-Object" id="AN-sObj-458"><div id="AN-sObj-val-458"><img src="assets/naturalwebs inicio.png"></div></div><div class="AN-Object" id="AN-sObj-459"><div id="AN-sObj-val-459"><img src="assets/naturalwebs salida.jpg"></div></div><div class="AN-Object" id="AN-sObj-460"><div id="AN-sObj-val-460"><img src="assets/un diseño.png"></div></div><div class="AN-Object" id="AN-sObj-461"><div id="AN-sObj-val-461"><img src="assets/entrada cristaelite.jpg"></div></div><div class="AN-Object" id="AN-sObj-462"><div id="AN-sObj-val-462"><img src="assets/salida cristaelite.jpg"></div></div><div class="AN-Object" id="AN-sObj-463"><div id="AN-sObj-val-463"><img src="assets/arte.png"></div></div><div class="AN-Object" id="AN-sObj-464"><div id="AN-sObj-val-464"><img src="assets/inicio daniel.jpg"></div></div><div class="AN-Object" id="AN-sObj-465"><div id="AN-sObj-val-465"><img src="assets/final danel.jpg"></div></div><div class="AN-Object" id="AN-sObj-466"><div id="AN-sObj-val-466"><img src="assets/solucion.png"></div></div><div class="AN-Object" id="AN-sObj-467"><div id="AN-sObj-val-467"><img src="assets/logo naturalwebs.jpg"></div></div></div></li>
</ol>
</body>
</html>
[/i][/i][/color]
Y después de estar una semana como loco con estos programas, e aqui el trabajo final
miralo en youtube
Si gustan pueden ayudarme con un like en facebook
http://www.facebook.com/pages/Naturalwebs/144535145565860?sk=app_4949752878
ojala les guste
