|
|
|
| |
 |
| |
|
| |
|
By BYTET at 2010-03-06 00:12
|
Beyond Flash – CSS 3+Javascript “Movies” First let me stress that I am not a professional programmer. I set my task to recreating an existing Flash 3.o presentation I did a few years ago. To see the original go to http://loopzine.tv click the “T” button and cycle through the “Ts” until you get to The Synthetic Dream Foundation -Behind the Gates of Horn and Ivory. CLICK to PLAY. (requires Flash of course)
My code is messy and I’m sure it could be optimized and cleaned up. But, it works and as I haven’t seen anything quite like it on the Internet I became excited to share it. Be warned, my example code is intended for WebKit browsers only (Google Chrome , Apple Safari 4+, Mobile Safari on the I-Phone and I hope, the Android mobile browser).
Here is a link to FaceBook of a video screen capture of Chrome running my script. To be clear, this is not a video of a video. It’s a video of a CSS 3 and Java Script web page (NOT FLASH)
Sticking with the movie metaphor, you can create “scenes” with animated “actors” that appear and disappear along the timeline of your production totally in CSS 3 and java script. I never gave the mantra of HTML 5 being a “Flash” killer much credence until I was able to recreate my existing Flash 3 “movies” using scripts. So let’s get started!
As your page loads, all your actors and their assorted animated behaviors will be drawn and execute, mostly out-of-sight back stage but just to be sure you don’t see them until it’s time for them to enter the stage, once your page loads completely a “timeline” script is started that first hides your cast. I’ve named my cast members “page” as they are a short pages of words numbered in the order they appear.
Code:
function timeLine()
{
var t=setTimeout("document.getElementById('page9').style.display='none'",30);
var t=setTimeout("document.getElementById('page8').style.display='none'",40);
var t=setTimeout("document.getElementById('page7').style.display='none'",50);
var t=setTimeout("document.getElementById('page6').style.display='none'",60);
var t=setTimeout("document.getElementById('page5').style.display='none'",70);
var t=setTimeout("document.getElementById('page4').style.display='none'",80);
var t=setTimeout("document.getElementById('page3').style.display='none'",90);
var t=setTimeout("document.getElementById('page2').style.display='none'",1000);
var t=setTimeout("document.getElementById('page1').style.display='none'",9000);
I also discovered to my surprise that when it’s time for them to reappear on stage it triggers their animated behaviors. How perfect!!!!
So, you are going to want to create a stage and more importantly a hidden back stage where your actors will wait out of sight until they are queued to enter and exit. Your stage can have scenery, (a background graphic) that’s static or in motion. For this presentation I decided to start by “fading in” a static background (div.example). Note how div.example calls an animation control block (keyframes). This is the basic pattern used throughout. An element is defined in HTML down in the BODY. The element calls an animation class from up in the CSS STYLE section and that animation has an associated control block – keyframes.
Code:
@-webkit-keyframes fadein {
0% { opacity:0; }
100% { opacity:1; }
}
div.body {
background-color: #000000;
padding: 0px 0px;
height:320px;
width:240px;
overflow:hidden;
}
div.example {
-webkit-animation-name: fadein;
-webkit-animation-duration: 14s;
-webkit-animation-iteration-count: 1;
height: 320px;
width: 240px;
position: relative;
left: 0px;
top: 0px;
background:
url(http://www.htmlforums.com/bigcover.png) no-repeat;
}
HTML Code:
</style>
</head>
<body onLoad="timeLine()">
<center>
<div class="body">
<div class="example">
My original “Flash” animation had a “branding” logo and verbiage that identified the supporting background music loop. For this element I created a rounded corner box in a three color gradient fill. I then overlaid my site logo and the static verbiage identifying the background sound track which is embedded in the page and starts playing automatically in a continuous loop.
Code:
div.footer {
height: 320px;
width: 260px;
position: relative;
left: 2px;
top: -112px;
background:
url(http://www.htmlforums.com/footer.png) no-repeat;
}
#logotitle { font-family:arial, helvetica;
font-size:6pt;
letter-spacing:4px;
color: #ffff00;
position: relative;
right: -20px;
top: -435px;
}
#band { font-family:arial, helvetica;
font-size:6pt;
letter-spacing:1px;
color: #ffffff;
position: relative;
left: 30px;
top: -435px;
}
#song { font-family:arial, helvetica;
font-size:6pt;
color: #000000;
position: relative;
left: 27px;
top: -435px;
}
#border-radius2 {
display:inline-block;
border:1px solid #999;
padding:1em;
-webkit-border-radius:40px;
text-align:center;
width:13em;
position: relative;
left: -117px;
top: -50px;
background-color: #ffff00;
background-image: -webkit-gradient(linear, 0% 0%, 0% 85%, from(rgba(256, 26, 20, 0.8)),to(orange), to(rgba(246, 250, 200, 1.0)));
border-top-color: #f7a250;
border-right-color: #f7a050;
border-bottom-color: #ef925e;
border-left-color: #f6a460;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 16px;
}
.css-demo {
margin-bottom:1em;
}
[html]
<div id="border-radius2" class="css-demo" style=font-size:16pt></div>
<div class="footer"></div>
<div id="logotitle"> music loop</div>
<div id="band">The Synthetic Dream
|
|
read more | BYTET's blog | login or register to post comments
|
|
|
|
|
|
| |
|
| |
|
By Wiki at 2008-10-15 07:28
|
Unlocked Cell Phones at All Mobile Brands. An online source for all brand GSM cell phones, unlocked phones, cellular phones and mobile phone accessories.
|
|
Wiki's blog | 2 comments
|
|
|
|
|
|
| |
|
| |
|
|
|
Especially if you know next to nothing about <HTML>. Being a WAHM is a lot tougher than you might think. I started over a year ago and the thing is still not done. Between the baby & toddler not a lot gets done. For anyone attempting to build your own site here is a little bit of general information to help you get started ....
Three things to have a general idea of before you start to build your site
1. Design & Layout - should involve CSS, look at some sites, some tutorials (there are lots of good ones here) and get familiar with the task before you.
2. SEO - aka Search Engine Optimization. This will make more sense as you learn HTML or if you know it already, but if you are aware of some key techniques beforehand it will save you hours of recoding and correction down the road.
|
|
read more | lovinglearning's blog | 1 comment
|
|
|
|
|
|
|
|
|
|
|
|
