Category Archives: CSS

CSS and JavaScript Animation Remake For Tuas South Incineration Plant Video

Leave a reply

What happens if you want to play an old animation video on a modern PC that was created long before FHD and 4K monitors are being invented? Instead of watching the animation, you will be dazed with square pixel boxes and wonder why would the animator likes boxes so much.

This project is a remake of Tuas South Singapore Incineration Plant video using multiple static images, intensive CSS animation and JavaScript for a school environmental hub project. The original animation video belongs to National Environmental Agency (NEA) Singapore.

GitHub: https://github.com/kennykee/Tuas-Incineration-Animation
Demo: https://demo.kennykee.com/MT (View it on the PC)
YouTube: https://www.youtube.com/watch?v=kbaUYNklYxo

jQuery Images Crossfading Front Page Banner – Simple Stuffs

Leave a reply

Creating a crossfading images slideshow for a homepage is easy. All you need is jQuery.

Steps as follow:

1) Assuming we have 3 images. All these images have same height and width, and positioned absolute. Each of these images are overlapping on top of each other.

<div>
	<img id="home-image-1" class="position-absolute" src="home-image-1.png"/>
	<img id="home-image-2" class="position-absolute" src="home-image-2.png"/>
	<img id="home-image-3" class="position-absolute" src="home-image-3.png"/>
</div>
.position-absolute{
	position: absolute;
}

2) Hide second and third image using jQuery hide(). Now we have only one image showing.

3) Next, we need to make the second image fading in after a certain amount of time in crossfading manner. To do this, we will set first and third images to have z-index = 0 while second image to have z-index = 1.

Note we have second image on top of all other images and it is still hidden. Call fadeIn(‘slow’) for second image.

4) Once fadeIn() animation for second image is completed, call hide() for first and third images.

5) Repeat this method for next images.

To see how to create continues looping of crossfading images, see code sample below:

<script>
	$(document).ready(function(){
		$("#home-image-2, #home-image-3").hide(); //Show first image and hide the rest.
		setInterval(function(){loopHomeImages();},5000);
	});

	var curr = 1;

	function loopHomeImages(){
		var after = (this.curr + 1)%3; //Next image in the loop
		var bef = ((curr - 1) >= 0) ? (curr - 1) : 2; //Previous image in the loop

		$(".position-absolute").css("z-index", 0);
		$("#home-image-" + curr).css("z-index", 1);
		$("#home-image-" + curr).fadeIn("slow", function(){
			$("#home-image-" + after).hide();
			$("#home-image-" + bef).hide();
		});
		curr = (curr + 1)%3;
	}
</script>

That’s all.

Good luck and have fun.

Showing Underline When Hovering A Link – Simple Stuff

Leave a reply

Showing an underline for a link on a website is simple. Here are the steps:

Demo: http://kennykee.com/demo/css-underline

1) Within <head></head> of your HTML page, create <style></style> if not exist. For example,

<head>
<style></style>
</head>

2) Let’s say you have a link <a class=”mylink” href=”http://kennykee.com”>My Website</a>. Note the class=”mylink”. We need this to show the underline effect.

3) Update your <style> tag to following:

<head>
<style>
.mylink{
text-decoration: none;
}
.mylink:hover{
text-decoration: underline;
}
</style>
</head>

Done. http://kennykee.com/demo/css-underline

Full code below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
  	    .mylink{
            text-decoration: none;
			font-size: 50px;
			font-family: arial;
			margin-left: 20px;
		}
		.mylink:hover{
			text-decoration: underline;
		}
    </style>
  </head>

  <body>
	 <a class="mylink" href="http://kennykee.com">My Website - Hover Here</a>
  </body>
</html>

DIV 100% Width Without Horizontal Scroll Bar

Leave a reply

When a DIV is set to have 100% width,  you may see horizontal scroll bar appearing. This is due padding, margin and type of position.

To make a DIV with 100% width without horizontal scroll bar appearing, try the following:

1) Set the DIV position type to fixed. Suitable for DIV to be used as a fixed position header.

.div_header{
	height: 30px;
	border-color: black;
	top: 0px;
	width: 100%;
	position: fixed;
}

2) Let the DIV position type to be default. Width = auto. This is the simplest method. Remove left and right margins.

.div{
 	height: 30px;
	border-color: black;
 	width: auto;
 	margin-left: 0px;
	margin-right: 0px;
}

3)  Set the DIV position type to relative. Width = 100%. Remove border, margin and padding for both left and right of the DIV. Any padding or margin will cause horizontal bar to appear.

.div{
	height: 30px;
	border-color: black;
	position: relative;
 	margin-left: 0px;
 	margin-right: 0px;
 	padding-left: 0px;
 	padding-right: 0px;
 	width: 100%;
	border: none;
}