Find Jobs
Hire Freelancers

Start animation when page is loaded

€2-6 EUR / hour

Selesai
Disiarkan hampir 6 tahun yang lalu

€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; }
ID Projek: 16895121

Tentang projek

11 cadangan
Projek jarak jauh
Aktif 6 tahun yang lalu

Ingin menjana wang?

Faedah membida di Freelancer

Tetapkan bajet dan garis masa anda
Dapatkan bayaran untuk kerja anda
Tuliskan cadangan anda
Ianya percuma untuk mendaftar dan membida pekerjaan
Dianugerahkan kepada:
Avatar Pengguna
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 dalam 1 hari
5.0 (136 ulasan)
5.7
5.7
11 freelancers are bidding on average €5 EUR/jam for this job
Avatar Pengguna
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 dalam 40 hari
5.0 (250 ulasan)
7.6
7.6
Avatar Pengguna
hi sir, i will make the animation to start on page load, ready to do it right now, thanks................
€2 EUR dalam 40 hari
4.9 (526 ulasan)
7.0
7.0
Avatar Pengguna
Hello I can make your animation work on onload aswel just message me to start . Thank you Balouch Khan
€6 EUR dalam 25 hari
5.0 (95 ulasan)
6.3
6.3
Avatar Pengguna
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 dalam 40 hari
5.0 (26 ulasan)
4.6
4.6
Avatar Pengguna
A proposal has not yet been provided
€11 EUR dalam 3 hari
4.9 (8 ulasan)
2.6
2.6
Avatar Pengguna
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 dalam 40 hari
0.0 (1 ulasan)
0.0
0.0

Tentang klien

Bendera GERMANY
Güstrow, Germany
4.9
3
Kaedah pembayaran disahkan
Ahli sejak Mei 3, 2018

Pengesahan Klien

Terima kasih! Kami telah menghantar pautan melalui e-mel kepada anda untuk menuntut kredit percuma anda.
Sesuatu telah berlaku semasa menghantar e-mel anda. Sila cuba lagi.
Pengguna Berdaftar Jumlah Pekerjaan Disiarkan
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
Memuatkan pratonton
Kebenaran diberikan untuk Geolocation.
Sesi log masuk anda telah luput dan telah dilog keluar. Sila log masuk sekali lagi.