Start animation when page is loaded €2-6 EUR / hour 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? Alamat e-mel Mohon pekerjaan yang serupa Faedah membida di Freelancer Tetapkan bajet dan garis masa anda
Dapatkan bayaran untuk kerja anda
Ianya percuma untuk mendaftar dan membida pekerjaan
11 freelancers are bidding on average €5 EUR/jam 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 dalam 40 hari
5.0 (250 ulasan) 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) 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) 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) A proposal has not yet been provided
€11 EUR dalam 3 hari
4.9 (8 ulasan) 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)