Suoritettu

Start animation when page is loaded

The animation starts when you click on the button but it should start, when you load the page

HTML

<div id="flight" class="flight"></div>

<div class="runway">

<div class="runwayNo"></div>

</div>

<div class="controls">

<button onclick="simulate()">TAKE OFF</button>

</div>

<div class="twintowerblack"><img src="pics/[url removed, login to view]" alt="Twintower Schwarz"></div>

<script>

function simulate(){

$("#flight").addClass("run");

setTimeout(function(){

$("#flight").removeClass("run");

},10000)

}

</script>

CSS

.flight {

width: 200px;

height: 100px;

background: url("pics/[url removed, login to view]") center no-repeat;

background-size: 100%;

position: fixed;

bottom: -8px;

right: 0;

}

.[url removed, login to view] {

animation: landFlight linear 10s;

}

.runway {

width: 95%;

height: 1px;

border-top: 1px dotted #eee;

background: #333;

position: fixed;

bottom: 5px;

right: 0;

}

.runway .runwayNo {

position: absolute;

width: 50px;

color: #fff;

bottom: 23px;

left: -30px;

text-align: center;

padding: 5px 0;

}

.runway .runwayNo:after {

position: absolute;

height: 20px;

width: 10px;

border: 1px dotted #fff;

content: '';

bottom: -23px;

left: 18px;

}

@keyframes landFlight {

0% {

-ms-transform: translate(0, 0) rotate(0deg);

-moz-transform: translate(0, 0) rotate(0deg);

-webkit-transform: translate(0, 0) rotate(0deg);

transform: translate(0, 0) rotate(0deg);

}

20% {

-ms-transform: translate(-400px, -1px) rotate(0deg);

-moz-transform: translate(-400px, -1px) rotate(0deg);

-webkit-transform: translate(-400px, -1px) rotate(0deg);

transform: translate(-400px, -1px) rotate(0deg);

}

30% {

-ms-transform: translate(-450px, -2px) rotate(0deg);

-moz-transform: translate(-450px, -2px) rotate(0deg);

-webkit-transform: translate(-450px, -2px) rotate(0deg);

transform: translate(-450px, -2px) rotate(0deg);

}

38% {

-ms-transform: translate(-500px, -5px) rotate(10deg);

-moz-transform: translate(-500px, -5px) rotate(10deg);

-webkit-transform: translate(-500px, -5px) rotate(10deg);

transform: translate(-500px, -5px) rotate(10deg);

}

39% {

-ms-transform: translate(-510px, -10px) rotate(15deg);

-moz-transform: translate(-510px, -10px) rotate(15deg);

-webkit-transform: translate(-510px, -10px) rotate(15deg);

transform: translate(-510px, -10px) rotate(15deg);

}

40% {

-ms-transform: translate(-520px, -12px) rotate(20deg);

-moz-transform: translate(-520px, -12px) rotate(20deg);

-webkit-transform: translate(-520px, -12px) rotate(20deg);

transform: translate(-520px, -12px) rotate(20deg);

}

50% {

-ms-transform: translate(-600px, -50px) rotate(20deg);

-moz-transform: translate(-600px, -50px) rotate(20deg);

-webkit-transform: translate(-600px, -50px) rotate(20deg);

transform: translate(-600px, -50px) rotate(20deg);

}

60% {

-ms-transform: translate(-700px, -100px) rotate(20deg);

-moz-transform: translate(-700px, -100px) rotate(20deg);

-webkit-transform: translate(-700px, -100px) rotate(20deg);

transform: translate(-700px, -100px) rotate(20deg);

}

100% {

-ms-transform: translate(-2000px, -750px) rotate(20deg);

-moz-transform: translate(-2000px, -750px) rotate(20deg);

-webkit-transform: translate(-2000px, -750px) rotate(20deg);

transform: translate(-2000px, -750px) rotate(20deg);

}

}

.controls button {

border: 0;

outline: 0;

color: #000;

background: lightskyblue;

padding:61.3px;

cursor: pointer;

}

Taidot: CSS, HTML5, Javascript, jQuery / Prototype, PHP

Näytä lisää: script click start page, start php page mysql admin, stop start animation, apply css page loaded, moss 2007 start job page, flash rollover start animation rollover stop, start animation onmouseover, start regestracion page plus, myspace flash animation page graphics, start thickbox page load, swishmax page loaded, create myspace background layout start blank page, php check page loaded frame, start script start set page, html mouseover start animation

Tietoa työnantajasta:
( 0 arvostelua ) Germany

Projektin tunnus: #16895121

Myönnetty käyttäjälle:

webxtechin

Hi! I CAN DO THIS NOW I am Expert in PHP,WORDPRESS,MYSQL,HTML5-HTML,JAVASCRIPT,CSS,AJAX etc..... I have 5+yr experience in developing as well as designing field... I can do this work easily and quickly..... Lisää

€5 EUR / tunti
(65 Arvostelua)
4.4

13 freelanceria on tarjonnut keskimäärin %project_bid_stats_avg_sub_18% %project_currencyDetails_sign_sub_19%/tunti tähän työhön

rohitagarberg

hi sir, i will make the animation to start on page load, ready to do it right now, thanks................

€2 EUR / tunti
(394 arvostelua)
6.7
€4 EUR / tunti
(36 arvostelua)
6.1
celalaybar

Hello. I can modify the animation script to make it run on page load instead of button click. I am competent in JavaScript, HTML and CSS.

€6 EUR / tunti
(111 arvostelua)
6.1
websolupro

Hello I can make your animation work on onload aswel just message me to start . Thank you Balouch Khan

€6 EUR / tunti
(52 arvostelua)
5.7
jayesh793

I have worked on similar projects to what you are looking for, and I am confident I can exceed your expectations. We can achieve the results that you are asking for. I have a few questions about your project, please Lisää

€3 EUR / tunti
(18 arvostelua)
4.9
Hoffffi

Hello sir. I have great experience in web developing and it will take to me arround 5 minutes , and it wont cost so much :)

€2 EUR / tunti
(4 arvostelua)
3.5
sku5551ed6fd9643

Hello Hiring manager I have gone through your post and I am interested to work on it .As I have lot of experience in relevant field and I have 100% confidence to work on your project. Skill- Php, Magento, Larav Lisää

€5 EUR / tunti
(11 arvostelua)
3.2
Jivan4

A proposal has not yet been provided

€11 EUR / tunti
(4 arvostelua)
1.8
€5 EUR / tunti
(0 arvostelua)
0.0
afnankullab2

It 's so easy to do [login to view URL] with me and I'll do it for you in just one hour. I am an expert in Java Script

€4 EUR / tunti
(0 arvostelua)
0.0
€2 EUR / tunti
(0 arvostelua)
0.0
tmorozco

I work primarily with font end hmtl/css/js /jQuery in my projects and often times handle animations in css and js. Without prior testing, it sounds like its probably an event listener issue and should be a relatively Lisää

€4 EUR / tunti
(0 arvostelua)
0.0