Start animation when page is loaded €2-6 EUR / hour 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? Email address Apply for similar jobs Benefits of bidding on Freelancer Set your budget and timeframe
It's free to sign up and bid on jobs
11 freelancers are bidding on average €5 EUR/hour for this job
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) 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) 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) 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) A proposal has not yet been provided
€11 EUR in 3 days
4.9 (8 reviews) 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)