Start animation when page is loaded €2-6 EUR / hour Zveřejněno skoro před 6 roky
€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;
}
IČ projektu: 16895121
O projektu 11 nabídky
Vzdálený projekt
Aktivní před 6 roky
Chcete si vydělat nějaké peníze? E-mailová adresa Podejte si žádost o podobná pracovní místa Výhody podávání nabídek na Freelancer Stanovte si rozpočet a časový rámec
Získejte za svou práci zaplaceno
Registrace a podávání nabídek je zdarma
11 freelanceři nabízejí v průměru €5 EUR/hodinu za tuto práci
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 v 40 dnech
5,0 (250 recenze) hi sir, i will make the animation to start on page load, ready to do it right now, thanks................
€2 EUR v 40 dnech
4,9 (526 recenze) Hello I can make your animation work on onload aswel just message me to start .
Thank you
Balouch Khan
€6 EUR v 25 dnech
5,0 (95 recenze) 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 v 40 dnech
5,0 (26 recenze) A proposal has not yet been provided
€11 EUR v 3 dnech
4,9 (8 recenze) 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 v 40 dnech
0,0 (1 recenze)