@font-face | timshaya

Here’s a working Demo.

Animation with TweenLite & Reducing Code Clutter with jQuery

If you’ve never developed web or mobile applications in Actionscript, Flash or Flex, you may have no idea of how awesome TweenLite, TweenMax, TimelineLite, etc are for code-based animation. Now it’s available for HTML5 & Javascript/CSS3 animation. It’s possible to use TweenLite with Canvas & WebGL. TweenLite uses the requestAnimationFrame API, which means javascript animation speed is pretty fast — in other words, it’s device battery & performance friendly. The above demo should work at roughly the same speed between your smart phone & a desktop browser.

UPDATE 06.14.2012: A friend reported some choppiness in the animation on his Galaxy S2, using the default Ice Cream Sandwich browser. My guess is the Power4.easeOut easing equation is the culprit. I’ve had to try a few easing settings to get rid of choppiness in some desktop browsers for this example. It could also be the way this example is built with all the slides pre-positioned horizontally the entire time (instead of being swapped into place as needed, when needed). Overall, he said it’s working OK. The animation runs smooth on an iPhone 4S (A5 processor at 800-1ghz, roughly the same as Galaxy S2’s processor).

In this example, I used jQuery to reduce the amount of code I had to write to dynamically assign an onclick listener to every button. It also helped me reduce the amount of cross-browser code needed to use event listeners in Javascript for the Web. Working with Javascript in Unity3D is so much more pleasant, since there are no DOM differences to worry about in that environment.

Here’s the main animation code, marquee.js:

var SLIDEITBNR = SLIDEITBNR || {}; 

(function($){

	SLIDEITBNR.slideshow = function(){

		var sl = document.getElementById('inrSlides');
		var xpos = [];
		var slideWidth = 620;
		var totalSlides = 5;

		function moveSlide(p)
		{   
		   TweenLite.to(sl, 1, { css:{ left:xpos[p] }, ease:Power4.easeOut }); //overwrite:false ????
		}	

		return { 
			
			init: function()
			{			          
			     //xpos = [0, -620, -1240, -1860, -2480];   
			     //xpos = [ -(slideWidth*0), -(slideWidth*1), -(slideWidth*2), -(slideWidth*3), -(slideWidth*4) ]; 
			     for( var i=0; i < totalSlides; i++) 
			     {
			     	xpos[i] = -(slideWidth * i);
			     }			     	

			 	$(".slidebtns").each( function(index, element) {
					$( element ).click( function(){						
						return moveSlide(index);
					});
				});	 
			}
		}
			
	}();	

	SLIDEITBNR.slideshow.init();

})($);

Web Fonts with @font-face

I grabbed two free-for-commercial-use fonts from Font Squirrel, Oxygen and Distant Galaxy. I used the CodeAndMore.com free web font converter to generate the various formats like .woff, .svg, etc.

Here’s fonts.css:

@font-face {
	font-family: "Distant Galaxy";
	src: url(fonts/eot/distgrg_.eot);
	src: local('Distant Galaxy'),
	     url(fonts/woff/distgrg_.woff) format("woff"), 
		 url(fonts/ttf/distgrg_.ttf) format("truetype"),
		 url(fonts/svg/distgrg_.svg) format("svg");
	font-style: normal;
	font-weight: bold;
}

@font-face {
	font-family: "Oxygen";
	src: url(fonts/eot/oxygen.eot);
	src: local('Oxygen'), 
	     url(fonts/woff/oxygen.woff) format("woff"),
	     url(fonts/ttf/oxygen.ttf) format("truetype"),
	     url(fonts/svg/oxygen.svg) format("svg");
	font-style: normal;
	font-weight: normal;
}

I use the Web Fonts by referring to them by name in like so (see the next css source example below)

font-family: "Distant Galaxy",Arial,Helvetica,sans-serif;

CSS-based layout with horizontal unordered lists & divs

* { 
	margin:0; 
	padding:0; 
}

body {
    position:absolute;
    top: 0px;
    left: 0px;
    margin: 0 auto;
    background: #606956;
}

ul {
	list-style-type: none;	
	/*width: 3100px; 620 x 5 slides */
	padding:0;
	margin: 0 auto;	 
}

li {
	float:left;
	padding: 0px;	
	/* -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.5); */
    /* border-radius: 25px;*/ 
    /*-moz-border-radius: 25px;	*/
}

#allSlides {
  position:absolute;
  top: 9px;
  left: 11px;	
  width: 620px;
  height: 250px;
  overflow: hidden;
  border-radius: 15px;  
  background: #DDD;
  border-radius: 25px;
}

#inrSlides {
  position:absolute;
  top: 0px;
  left: 0px;	
  list-style-type: none;	
  width: 3100px; /* 620 x 5 slides */
	padding:0;
  overflow: hidden;
	margin: 0 auto;		
}

#allSlideBtns {
    position:absolute;
    top: 214px;
    left: 42px;	
    width: 590px;
    height: 50px;
    font-family: "Distant Galaxy",Arial,Helvetica,sans-serif;    
    line-height: 110%;
    color: #FFF;   
    font-weight: bold;  
} 

#allSlideBtns a {
    color: #650360;   
}

#allSlideBtns li {
	padding-right: 10px;	
}

.slide1 {
  position:relative;  
  top: 0px;
  left: 0px;    
  width: 620px;
  height: 250px;
  background-image: url("../images/slide.jpg");       
}

.hdr {
  position:relative;  
  top: 20px;
  left: 30px;      
  font-family: "Distant Galaxy",Arial,Helvetica,sans-serif;
  line-height: 100%;
  letter-spacing:0.05em;
  color: #650360;
  margin: 0;
  width: 800px;
  font-weight: bold;  
  font-size: 30pt;
}

.copy {
  position:relative;  
  top: 40px;
  left: 30px;
  font-family: "Oxygen",Arial,Helvetica,sans-serif;
  line-height: 110%; 
  color: #650360;  
  width: 570px;     
  font-size: 14pt;    
}

.slidebtns {
    
}

The HTML

Note, that to animate CSS properties like “top” and “left” with TweenLite you need to activate the CSSPlugin. Sorry, used an older version of jQuery ’cause i was in a rush & lazy. It happens.

<!DOCTYPE html>
<html> 
    <head>
        <meta charset="utf-8" />    
        <link rel="stylesheet" type="text/css" href="css/fonts.css" />        
        <link rel="stylesheet" type="text/css" href="css/marquee.css" /> 

        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <!-- the above version of jQuery causes this Warning in Chrome: 

             event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.
        -->                
        <title>slide show</title> 
    </head>
    <body> 

        <div id="allSlides">
          <ul id="inrSlides">          
            <li>
                <div class="slide1">
                    <div class="hdr">HEADLINE, 1ST SLIDE</div>
                    <div class="copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis urna at lectus tincidunt malesuada nec non dolor. Suspendisse a diam quam, sed volutpat erat. Mauris tempus diam eu lacus fringilla adipiscing. Fusce at lorem mauris, vel ultricies tellus. Praesent dapibus mauris congue est sollicitudin...</div>
                </div>
            </li>
            <li>
                <div class="slide1">
                    <div class="hdr">HEADLINE, 2ND SLIDE</div>
                    <div class="copy">Suspendisse erat augue, pharetra sit amet lacinia vestibulum, auctor id risus. Nulla facilisi. Nulla a nunc nec ipsum varius congue vel at magna. Sed vitae congue nisl. Aliquam vel imperdiet risus. Suspendisse sit amet sapien ut neque mattis imperdiet quis et nibh. Cras placerat nunc non purus vulputate condimentum...</div>
                </div>
            </li>
            <li>
                <div class="slide1">
                    <div class="hdr">HEADLINE, 3RD SLIDE</div>
                    <div class="copy">Proin ultrices risus sed massa adipiscing congue placerat sapien venenatis. Vestibulum eget dapibus lacus. Vestibulum justo metus, pharetra ac elementum ac, sagittis nec quam. Quisque ac augue felis. Pellentesque condimentum vulputate ornare.</div>
                </div>
            </li>
            <li>
                <div class="slide1">
                    <div class="hdr">HEADLINE, 4TH SLIDE</div>
                    <div class="copy">Curabitur elementum quam posuere risus ultrices quis congue massa scelerisque. Praesent mattis sodales sodales. Fusce volutpat purus nec justo pharetra ut consequat leo fringilla. Mauris rhoncus risus at velit accumsan ut aliquet augue commodo. </div>
                </div>
            </li>           
            <li>
                <div class="slide1">
                    <div class="hdr">HEADLINE, 5TH SLIDE</div>
                    <div class="copy">Proin nibh tortor, viverra id adipiscing dignissim, cursus vel sem. Maecenas eget turpis a risus rhoncus laoreet. Donec ornare dui non nunc commodo lobortis. Curabitur posuere libero quis arcu commodo vel aliquam orci tempus. Curabitur vitae orci mauris, at pharetra enim. </div>
                </div>
            </li>               
          </ul>
        </div>        
        
        <div id="allSlideBtns">
          <ul>
            <li class="slidebtns"><a href="#">1-SLIDE</a><li>
            <li> :: <li>            
            <li class="slidebtns"><a href="#">2-SLIDE</a><li>
            <li> :: <li>                        
            <li class="slidebtns"><a href="#">3-SLIDE</a><li>
            <li> :: <li>                        
            <li class="slidebtns"><a href="#">4-SLIDE</a><li>
            <li> :: <li>           
            <li class="slidebtns"><a href="#">5-SLIDE</a><li>      
          </ul>
        </div>

        <script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script>
        <script type="text/javascript" src="js/greensock/easing/EasePack.min.js"></script>
        <script type="text/javascript" src="js/greensock/TweenLite.min.js"></script>
        <script type="text/javascript" src="js/marquee.js"></script>   

    </body>
</html>

timshaya

developer | creative technologist

Category Archives: @font-face

HTML5 Slideshow Using TweenLite & jQuery

Animation with TweenLite & Reducing Code Clutter with jQuery

Web Fonts with @font-face

CSS-based layout with horizontal unordered lists & divs

The HTML