Find Jobs
Hire Freelancers

Start animation when page is loaded

€2-6 EUR / hour

Completed
Posted almost 6 years ago

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

About the project

11 proposals
Remote project
Active 6 yrs ago

Looking to make some money?

Benefits of bidding on Freelancer

Set your budget and timeframe
Get paid for your work
Outline your proposal
It's free to sign up and bid on jobs
Awarded to:
User Avatar
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 in 1 day
5.0 (136 reviews)
5.7
5.7
11 freelancers are bidding on average €5 EUR/hour for this job
User Avatar
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 in 40 days
5.0 (250 reviews)
7.6
7.6
User Avatar
hi sir, i will make the animation to start on page load, ready to do it right now, thanks................
€2 EUR in 40 days
4.9 (526 reviews)
7.0
7.0
User Avatar
Hello I can make your animation work on onload aswel just message me to start . Thank you Balouch Khan
€6 EUR in 25 days
5.0 (95 reviews)
6.3
6.3
User Avatar
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 in 40 days
5.0 (26 reviews)
4.6
4.6
User Avatar
A proposal has not yet been provided
€11 EUR in 3 days
4.9 (8 reviews)
2.6
2.6
User Avatar
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 in 40 days
0.0 (1 review)
0.0
0.0

About the client

Flag of GERMANY
Güstrow, Germany
4.9
3
Payment method verified
Member since May 3, 2018

Client Verification

Thanks! We’ve emailed you a link to claim your free credit.
Something went wrong while sending your email. Please try again.
Registered Users Total Jobs Posted
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.