Start animation when page is loaded

€2-6 EUR / hour

Teljesítve

Kiadva ekkor:

körülbelül 6 évvel ezelőtt

€2-6 EUR / hour

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/[login to view URL]" 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/[login to view URL]") center no-repeat; background-size: 100%; position: fixed; bottom: -8px; right: 0; } .[login to view URL] { 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; }

Projektazonosító: 16895121

A projektről

11 ajánlat

Távolról teljesíthető projekt

Aktiválva: 6 évvel ezelőtt

Szeretne pénzt keresni?

E-mail cím

A Freelancer oldalán történő árajánlatadás előnyei

Határozzon meg költségvetést és időkeretet

Kapja meg fizetését a munkáért

Vázolja ajánlatát

Ingyen regisztrálhat és adhat árajánlatot munkákra

Neki odaítélve:

@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..... Thankyou waiting for your response.....

€5 EUR 1 napon belül

5,0

(136 értékelés)

5,7

11 szabadúszó adott átlagosan €5 EUR/óra összegű árajánlatot erre a munkára

@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 40 napon belül

5,0

(250 értékelés)

7,6

@rohitagarberg

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

€2 EUR 40 napon belül

4,9

(526 értékelés)

7,0

@websolupro

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

€6 EUR 25 napon belül

5,0

(95 értékelés)

6,3

@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, Laravel, Wordpress, Android etc Web (Html, Laravel & Core Php, Wodpress, Joomla) UI/UX Design (Photoshop & Illustrator) Lets Connect and start the project ASAP. For any query , feel free to connect me. Please message me to discuss further for its development. Thank you

€5 EUR 40 napon belül

5,0

(26 értékelés)

4,6

@Jivan4

A proposal has not yet been provided

€11 EUR 3 napon belül

4,9

(8 értékelés)

2,6

@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 easy fix in the js.

€4 EUR 40 napon belül