Computer Science Mojo

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


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




<link href="" 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 behavior="scroll" direction="left" scrollamount="10">
        <i class="fa fa-cloud" style="color:white;font-size:60px"></i>
    <marquee behavior="scroll" direction="right" scrollamount="5">
        <i class="fa fa-cloud" style="color:grey;font-size:90px"></i>

tweak cloud with:

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