Tamamlanmış

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;

}

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

Daha fazlasını gör: 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

İşveren Hakkında:
( 0 değerlendirme ) Germany

Proje NO: #16895121

Seçilen:

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..... Daha Fazla

€5 EUR / saat
(65 Değerlendirme)
4.4

Bu iş için 13 freelancer ortalamada €5/saat teklif veriyor

rohitagarberg

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

€2 EUR / saat
(394 Değerlendirme)
6.7
€4 EUR / saat
(36 Değerlendirme)
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 / saat
(111 Değerlendirme)
6.1
websolupro

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

€6 EUR / saat
(52 Değerlendirme)
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 Daha Fazla

€3 EUR / saat
(18 Değerlendirme)
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 / saat
(4 Değerlendirme)
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 Daha Fazla

€5 EUR / saat
(11 Değerlendirme)
3.2
Jivan4

A proposal has not yet been provided

€11 EUR / saat
(4 Değerlendirme)
1.8
€5 EUR / saat
(0 Değerlendirme)
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 / saat
(0 Değerlendirme)
0.0
€2 EUR / saat
(0 Değerlendirme)
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 Daha Fazla

€4 EUR / saat
(0 Değerlendirme)
0.0