I am trying to make an animation in javascript, where as the character is running, the grond should move as well. The problem that I have is that the ground image has an animation, but the image gets cut, and reapear.
I have this piece of code in css
.ground {
position: absolute;
bottom:0;
width: 100%;
height: 100px;
animation: ground-animation 20s infinite linear;
}
#keyframes ground-animation {
from {
right: -80px;
}
to {
right: 100%;
}
}
Just double the width of ground and repeat background image. No?
https://codepen.io/ildar-meyker/pen/eYrdZyw
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.ground {
position: absolute;
left: 0;
bottom: 0;
width: 200%;
height: 100vh;
animation: ground-animation 20s infinite linear;
background: url(https://i.pinimg.com/originals/8f/1a/b8/8f1ab8b14a55720d6859620a6f596933.jpg) repeat-x 0 100%;
background-size: 50% auto;
}
#keyframes ground-animation {
from {
}
to {
transform: translateX(-50%);
}
Related
This question already has answers here:
How to have css3 animation to loop forever
(3 answers)
Closed 4 years ago.
My animation is currently moving in a square motion. However, I want it to move from the left side of the screen to the right side and back again on an infinite loop. Can anyone help with this?
.animation {
width: 10px;
height: 10px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
25% {
background-color: red;
left: 200px;
top: 0px;
}
50% {
background-color: red;
left: 200px;
top: 200px;
}
75% {
background-color: red;
left: 0px;
top: 200px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
<div class="animation"></div>
You can set an animation's iteration count to infinite, and create a seamless loop by having the starting and ending keyframes (0% and 100%) share the same position, like so:
.animation {
width: 10px;
height: 10px;
background-color: red;
position: relative;
animation: example 2s infinite;
}
#keyframes example {
0%,
100% {
left: 0;
}
50% {
left: 200px;
}
}
<div class="animation"></div>
Try adding animation-iteration-count and setting it to infinite:
animation-iteration-count: infinite
I'm having a problem where I'm trying to transition an element (image) to the center of the page.
The problem is that it jumps to one point and then animates the rest of the transitions instead of animating one movement to the center.
img {
position: relative;
width: 350px;
transition-property: all;
transition-duration: .5s;
transition-timing-function: ease;
}
.transformed {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Here you can see it in action: https://codesandbox.io/s/xz8o225yz
You must enter the parameters in the first class as well.
like:
img {
position: relative;
width: 350px;
left: 0;
top: 0;
transition-property: all;
transition-duration: .5s;
transition-timing-function: ease;
}
.transformed {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Only if you add ex: left:0 and top:0 the animation know where have to start. The same for all parameters you want animated.
Its because you have not defined the value for left and top properties which you have defined in .transformed selector. Try this code.
img {
position: relative;
width: 350px;
transition-property: all;
transition-duration: .5s;
transition-timing-function: ease;
left: 0;
top: 0;
}
You can do it like this:
function myFunction() {
var el = document.getElementById('myImg');
el.classList.add("transformed");
}
* {
box-sizing: border-box;
}
body {
background-color: lightblue;
/* added; or on any other parent element */
position: relative;
height: 100vh;
margin: 0;
}
.wrapper {
padding: 20px;
width: 100%;
}
img {
position: absolute; /* modified */
top: 25px; /* added */
left: 0; /* added */
width: 350px;
transition: all .5s;
}
.transformed {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<button onclick="myFunction()">Center</button>
<img id="myImg" src="https://media0.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif">
Hi i Have a custom made banner with following code
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: Arial, serif;
color: #003C78;
}
a {
color: #003C78;
}
.banner-wrap {
display: flex;
width: 728px;
height: 90px;
}
.page-container {
position: relative;
overflow: hidden;
width: 100%;
}
.page-container img {
width: 100%
}
.image-wrapper,
.text-wrapper {
position: absolute;
height: auto;
width: 411px;
}
.image-wrapper {
top: 0;
right: -155px;
z-index: 2;
animation: slideLeft 14.5s infinite ease 0s normal forwards;
}
.image-wrapper img {
position: absolute;
left: 0px;
top: -100px;
width: 150%
}
.text-wrapper h1,
.text-wrapper h2 {
position: absolute;
left: 90px;
padding: 0;
opacity: 0;
z-index: 3;
font-size: 1.3em;
}
.text-wrapper h1 {
animation: fade infinite 14.5s linear 0s normal forwards;
animation-delay: 4s;
top: 15px;
}
.text-wrapper h2 {
animation: fadeNew infinite 14.5s linear 0s normal forwards;
animation-delay: 7.8s;
}
.text-wrapper img {
position: absolute;
left: 50px;
bottom: 30px;
width: 468px;
height: 180px
}
.red-wrapper {
position: absolute;
bottom: 0px;
z-index: 9;
right: -600px;
color: #fff;
animation: slideLeftNew 14.5s infinite ease 0s normal forwards;
animation-delay: 7s;
padding-left: 15px;
border-bottom: 100px solid #E6000A;
border-right: 50px solid transparent;
height: 0;
width: 120px;
}
.red-wrapper h3 {
font-size: 1.1em;
font-weight: 300;
margin-top: 26px;
}
.logo img {
width: 80px;
height: auto;
margin: 17px;
}
img.kitchen {
transform: translateY(-40%);
-webkit-transform: translateY(-40%);
-ms-transform: translateY(-40%);
width: 63%;
position: absolute;
left: -18px;
animation: moveUp 14.5s infinite ease 0s normal forwards;
}
img.wall {
width: 11%;
position: absolute;
left: 0;
z-index: 9;
}
#keyframes slideLeft {
20.95% {
right: -155px
}
85%,
27.19% {
right: 135px;
}
}
#keyframes slideLeftNew {
15.95% {
right: -220px
}
20.19%,
37% {
right: 0
}
42% {
right: -220px;
}
}
#keyframes fade {
0% {
opacity: 0
}
23%,
14.38% {
opacity: 1
}
26% {
opacity: 0
}
}
#keyframes fadeNew {
0% {
opacity: 0
}
30%,
14.38% {
opacity: 1
}
33% {
opacity: 0
}
}
#keyframes moveUp {
0% {
transform: translateY(-40%);
}
50% {
transform: translateY(-45%);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Hawa Sliding Solutions</title>
<meta content="text/html;charset=UTF-8" http-equiv="content-type">
</head>
<body>
<a href="http://hawa-suono.com/" target="_blank">
<div class="banner-wrap">
<div class="logo"><img src="logo.png"></div>
<div class="page-container">
<div class="text-wrapper">
<h1>Den Alltag auf stumm schalten.</h1>
<h2>Hawa Suono – die schalldichte Lösung.</h2>
</div>
<img class="wall" src="wall.png" />
<img class="kitchen" src="kitchen3.jpg" />
<div class="image-wrapper"><img src="tuer2.jpg" /></div>
<div class="red-wrapper">
<h3>Jetzt die Weltneuheit entdecken.</h3>
</div>
</div>
</div>
</a>
</body>
</html>
Now I need to check if the banner is loaded and work, and if it is not, then I need to put another image instead of the banner. I tried a lot of things, to check if image is there, to check if css is loaded, to check is the document loaded, but that solution can not work, because I must only check if the banner is loaded, not the whole document. So now, I am stacked and do not know what to do next.Also, I can not use jquery, only pure javascript.
Any help?
Thanks
If using JS,
function imgError(image) {
image.onerror = "";
image.src = "/images/wall.gif";
return true;
}
<img src="wall.png" onerror="imgError(this);"/>
Without JS,
<img src="wall.png" onError="this.onerror=null;this.src='/images/wall.gif';" />
you can do it with jquery
//check all images on the page
$('img').each(function(){
var img = new Image();
img.onload = function() {
console.log($(this).attr('src') + ' - done!');
}
img.src = $(this).attr('src');
});
working fiddle : http://jsfiddle.net/kalmarsh80/nrAPk/
I need a "special" animation and i am not finding how i will get this sort of animation i seek for, on each triangle should make the same animation, one to the left and one to the right, i need the right way to start making this. Do i use JQuery for this ?
The animation: I want the triangles to move more or less to the middle of screen in order to show the content that is hidden, as it happens here: beepi.com/default.aspx on the circles
I currently have this:
#anim {
z-index: 1;
position: relative;
height: 100%;
min-height: 100%;
background-image: url("http://i.imgur.com/EPM2arR.jpg");
background-image: no-repeat;
background-size: 100%;
}
#anim img {
z-index: 2;
position: relative;
height: 100%;
width: 100%;
}
.arrow-left {
text-align: left;
padding: 1.5% 12px;
text-transform: uppercase;
position: absolute;
width: 13%;
left: 0;
z-index: 3;
top: 40%;
}
.arrow-right {
text-align: right;
padding: 1.5% 15px;
text-transform: uppercase;
position: absolute;
width: 13%;
right: 0;
z-index: 3;
top: 40%;
}
.arrow-right h2 {
font-size: 28px;
color: #FFF;
}
.arrow-left h2 {
font-size: 28px;
color: #FFF;
}
<section id="anim">
<img src="http://i.imgur.com/AeCYNqc.png">
<div class="arrow-right">
<h2>Scouting For Companies</h2>
</div>
<div class="arrow-left">
<h2>Seeking For Ideas</h2>
</div>
</section>
The animation should be like this:
If I understood well, you need css animation. You can use something like this:
/* For right side */
.arrow-right{
animation: aniright 3s ease;
animation-fill-mode: forwards;
}
#keyframes aniright {
from { right: 0; }
to { right: 13%; }
}
/* For left side */
.arrow-left{
animation: anileft 3s ease;
animation-fill-mode: forwards;
}
#keyframes anileft {
from { left: 0; }
to { left: 13% }
}
I believe you will need to cut and put arrows from image in .arrow-left and .arrow-right classes together will all other elements you want to slide in.. and also put some action to call animation. For e.g:
.arrow-left:hover{
animation: anileft 3s ease;
animation-fill-mode: forwards;
}
... will start animation when your cursor goes over .arrow-left element.
I have been trying to fade out a CSS3 preloader with jQuery. I have been trying to stop the animation (which is a box rotating), and then fade in a letter inside the box then, have them both fade out, the letter fading out a little later than the box. I have had the problem where the letter fades in way later than I want it to and when it comes on if fades out really fast. Here is the code:
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('.loader-inner').css({'-webkit-animation': 'none'});
$('.loader').delay(100).css({'-webkit-animation': 'none'}); // will first fade out the loading animation
$('.letter').delay(100).fadeIn('slow');
$('.preloader').delay(2050).fadeOut('slow');// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut(900);
$('body').delay(2060).css({'overflow':'visible'});
});
//]]>
body, html {
height: 100%;
text-align: center;
}
body {
background-color: #2f2f2f;
}
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background-color: #2f2f2f;
}
.loader {
display: block;
width: 60px;
height: 60px;
position: fixed;
border: 5px solid #d5b317;
top: 50%;
left:50%;
-webkit-animation: loader 2s infinite ease;
z-index: -10;
overflow: hidden;
margin-left: -29px
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #d5b317;
-webkit-animation: loader-inner 2s infinite ease-in;
z-index: -10;
}
#font-face {
font-family: 'Adobe Gurmukhi';
src: url(/fonts/AdobeGurmukhi-Regular.ttf);
}
.letter {
display:hidden;
color: #f7d11e;
font-family: 'Adobe Gurmukhi';
font-size: 70px;
position:absolute;
top: 50%;
left: 50%;
margin-top: -17px;
margin-left: -19px;
z-index: -9;
}
#-webkit-keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
<!--preloader-->
<div class="preloader">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<span><p class="letter">ਅ</p></span>
The z-index of .preloader (99999) is higher than that of .letter (-9). That delay you are experiencing is the delay until .preloader fades out and thus reveals .letter. As a quick fix I made the z-index of .letter higher than that of .preloader and that delay is gone.
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('.loader-inner').css({'-webkit-animation': 'none'});
$('.loader').delay(100).css({'-webkit-animation': 'none'}); // will first fade out the loading animation
$('.letter').delay(100).fadeIn('slow');
$('.preloader').delay(2050).fadeOut('slow');// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut(900);
$('body').delay(2060).css({'overflow':'visible'});
});
//]]>
body, html {
height: 100%;
text-align: center;
}
body {
background-color: #2f2f2f;
}
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background-color: #2f2f2f;
}
.loader {
display: block;
width: 60px;
height: 60px;
position: fixed;
border: 5px solid #d5b317;
top: 50%;
left:50%;
-webkit-animation: loader 2s infinite ease;
z-index: -10;
overflow: hidden;
margin-left: -29px
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #d5b317;
-webkit-animation: loader-inner 2s infinite ease-in;
z-index: -10;
}
#font-face {
font-family: 'Adobe Gurmukhi';
src: url(/fonts/AdobeGurmukhi-Regular.ttf);
}
.letter {
display:hidden;
color: #f7d11e;
font-family: 'Adobe Gurmukhi';
font-size: 70px;
position:absolute;
top: 50%;
left: 50%;
margin-top: -17px;
margin-left: -19px;
z-index: 999999;
}
#-webkit-keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
<!--preloader-->
<div class="preloader">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<span><p class="letter">ਅ</p></span>
what you are doing is first you use delay that means you want to call fadeOut after some delay and you given the delay time 2 sec and its working correctly as expected.
Its started fading out after 2 sec.
I think its working as expected if you want to fade it out little soon then you have to reduce the delay time of remove delay.
Hope this may help you.
Thanks!!
you can try the callback function
$('.letter').delay(100).fadeIn('slow', function(){
// function called after fade in finished
setTimeout(function(){
$('.preloader').fadeOut('slow');
$('.letter').fadeOut(900);
$('body').css({'overflow':'visible'});
}, 2600);
});
Replace your code with this, both will fadeOut at same time.
// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut('fast');