How do I make a simple animation?

Question

I am building an avation website and want clouds to move across the banner to give the feel that the site/airplane logo is moving in the sky. I already have the clouds that i made in Illustrator but now I need to make a simple GIF that has the cloud move from one side of the screen to the other and repeat. I dont even know how to do animation frames or any of that so I need lots of detail. Thanks!

Answer 1

I went the one of those links and saw that that the following would give me better understanding. Does everone here understand now. Its not in my knowledge base!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
var CloudGenerator = new Class({
    // Implement the Events and Options utility classes
    Implements: [Events, Options],
    // Initialize our defualt values for the class options passed in
    options: {
        totalClouds:  4,        // Total number of clouds on screen at a given time (int)
        minDuration: 10000,     // Minimum travel time for a cloud across the screen (milliseconds)
        maxDuration: 120000,    // Maximum tracel time for a cloud across the screen (milliseconds)
        checkInterval: 10000,   // The interval used to check if new clouds are needed (milliseconds)
        autoStart: true,        // Automatically starts the cloud generator by default (bool)
        sky: $("sky"),          // Default sky target resides in an element named "sky" (element)
        cloudImg: "cloud.png",  // Define default cloud image (path/url)
        cloudDirection: 0,      // 0 = left to right, 1 = right to left (int)
        cloudWidth: 573,        // Cloud width (px)
        cloudHeight: 262,       // Cloud height (px)
        cloudScales: [1, 0.8, 0.6, 0.4, 0.2],   // Define an array containing the sizes the cloud will be scaled to (%)
        maxAltitude: 600,       // This defines the vertical space you allow clouds to appear within the sky (px)
        cloudTransition: Fx.Transitions.linear  //Define the transition algorithm for the cloud movement
    cloudCheck: null,           // Initialize the vairable to hold the setInterval declaration
    cloudsInSky: 0,             // Keep track of number of clouds in sky
    cloudSky: null,             // A reference to the cloudSky generated and injected into the sky element
    // Our constructor for the CloudGenerator class
    // It takes in the options passed to it and uses the implemented Options
    // utility class to modify any defualt options in our options object
    initialize: function(options){
        // Modify any defaults with the passed in options
        this.setOptions(options);
        // Create Cloud Sky
        this.cloudSky = new Element('div', {
            id: 'cloudSky',
            src: this.options.cloudImg,
            styles: {
                position: 'absolute',
                width: (sky.getDimensions().x + (2*this.options.cloudWidth)),
                left: -this.options.cloudWidth 
        // Place the cloud container within the sky
        // This lets us ensure that the clouds can smoothly enter and exit the
        // boundaries of the sky element
        sky.grab(this.cloudSky);
        // autostat the cloud generator by default
        if(this.options.autoStart){
            this.startGenerator();
    // Check if there are less than the max number of clouds in the sky
    // If there is room, deploy another cloud, if not, do nothing
    deploy: function(){
        var cloudScale = (Math.floor(Math.random()*this.options.cloudScales.length));
        cloudScale = this.options.cloudScales[cloudScale];
        var cloudDuration = Math.floor(Math.random() * (this.options.maxDuration + 1 - this.options.minDuration))
                            + this.options.minDuration;
        var cloudAltitude = Math.floor(Math.random() * (this.options.maxAltitude - (cloudScale * this.options.cloudHeight)));
        if(this.cloudsInSky < this.options.totalClouds && !this.cloudsFull){
            this.cloudsInSky++;
            new Cloud({
                width: Math.floor(this.options.cloudWidth * cloudScale),
                height: Math.floor(this.options.cloudHeight * cloudScale),
                altitude: cloudAltitude,
                duration: cloudDuration,
                direction: this.options.cloudDirection,
                cloudImg: this.options.cloudImg,
                cloudTransition: this.options.cloudTransition,
                onComplete: function(){
                    this.removeCloud();
                }.bind(this)
    // Decrement cloudsInSky variable
    removeCloud: function(){
        if(this.cloudsInSky > 0){
            this.cloudsInSky--;
            console.log("cloud removed");
    // Stop the cloudGenerator
    stopGenerator: function(){
        clearInterval(this.cloudCheck);
        return "generator stopped";
    // Start the cloudGenerator
    startGenerator: function(){
        this.deploy();
        this.cloudCheck = this.deploy.periodical(this.options.checkInterval, this);
var Cloud = new Class({
    // Implement the Events and Options utility classes
    Implements: [Events, Options],
    cloudId: "",    // hold a reference to this cloud's DOM id property
    options: {
        duration: 4000,         // Duration of the clouds movement across the sky (milliseconds)
        direction: 0,           // Direction of the clouds movement, 0 = left to right and vice versa (int)
        altitude: 200,          // Altitude of the cloud in the sky
        width: 573,             // Width of the cloud (px)
        height: 262,            // Height of the cloud (px)
        cloudImg: "cloud.png",  // Cloud image (path/url)
        sky: $("cloudSky"),     // CloudSky element that the cloud will be injected into (element)
        cloudTransition: Fx.Transitions.linear  //Define the transition algorithm for the cloud movement
    initialize: function(options){
        // modify any defaults with the passed in options
        this.setOptions(options);
        // create and animate the cloud element
        this.createCloud();
    createCloud: function(){
        this.cloudId = 'cloud-' + (new Date().getTime());
        // determine if cloud will be moving left to right or right to left
        // the position cloud offscreen to begin movement
        var cloudStyle = {
            position: 'absolute',
            top: this.options.altitude,
            width: this.options.width,
            height: this.options.height
        var skyPosition = 'upperRight'; // Move the cloud to the right, ignore the 'upper'
        var cloudEdge = 'upperLeft';    // Align the edge of the cloud to the edg edge of the sky
        // Determine the direction of the cloud and set styles and positions
        if(this.options.direction === 0){
            cloudStyle.left = (0 - this.options.width);
        else {
            cloudStyle.right = (0 - this.options.width);
            skyPosition = 'upperLeft';
            cloudEdge = 'upperRight';
        // Create the image element for the cloud
        var cloud = new Element('img', {
            id: this.cloudId,
            src: this.options.cloudImg,
            styles: cloudStyle
        // Add the cloud image element to the cloudSky div
        sky.grab(cloud);
        // Move the cloud across the sky
        new Fx.Move(cloud, {
            relativeTo: this.options.sky,
            position: skyPosition,
            edge: cloudEdge,
            offset: {x: 0, y: this.options.altitude},
            duration: this.options.duration,
            transition: this.options.cloudTransition,
            onComplete: function(){
                this.complete();
            }.bind(this)
        }).start();
    complete: function(){
        $(this.cloudId).destroy();  // Remove the cloud element from the DOM
        this.fireEvent('complete'); // fire the onComplete event, this is picked up
                                    // by the CloudGenerator class