Computer Science Mojo

~ David's Notes on coding, software and computer science




Post

How to easily create HTML floating clouds using marquee

Category: Web     Tag: HTML   Web design  
By: David     On: Thu 20 August 2015     

The easiest way to create floating clouds is simply using HTMLs marquee tag and a cloud icon from font awesome. No complicated animation needed.
Alt Text

Software

Reading

Code

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

<div id="my-clouds">
    <marquee behavior="scroll" direction="right" scrollamount="15">
        <i class="fa fa-cloud" style="color:white;font-size:40px"></i>
    </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="10">
        <i class="fa fa-cloud" style="color:white;font-size:60px"></i>
    </marquee>
    <marquee behavior="scroll" direction="right" scrollamount="5">
        <i class="fa fa-cloud" style="color:grey;font-size:90px"></i>
    </marquee>
</div>

tweak cloud with:

  • direction: "direction"
  • speed: "scrollamount"
  • color: CSS "color"
  • size: CSS "font-size"