Завершено

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;

}

Квалификация: CSS, HTML5, Javascript, jQuery / Prototype, PHP

Показать больше 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

О работодателе:
( 0 отзыв(-а, -ов) ) Germany

ID проекта: #16895121

Поручен:

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..... Больше

€5 EUR / час
(65 отзывов(-а))
4.4

13 фрилансеров(-а) в среднем готовы выполнить эту работу за €5/час

rohitagarberg

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

€2 EUR / час
(394 отзывов(-а))
6.7
€4 EUR / час
(36 отзывов(-а))
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 / час
(111 отзывов(-а))
6.1
websolupro

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

€6 EUR / час
(52 отзывов(-а))
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 Больше

€3 EUR / час
(18 отзывов(-а))
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 / час
(4 отзывов(-а))
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 Больше

€5 EUR / час
(11 отзывов(-а))
3.2
Jivan4

A proposal has not yet been provided

€11 EUR / час
(4 отзывов(-а))
1.8
€5 EUR / час
(0 отзывов(-а))
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 / час
(0 отзывов(-а))
0.0
€2 EUR / час
(0 отзывов(-а))
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 Больше

€4 EUR / час
(0 отзывов(-а))
0.0