this is my code:
<header>
<div id='animate-area'>
</div>
</header>
css:
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
height: 145px;
background-image: url(http://s10.postimg.org/noxw294zd/banner.png);
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
This is JsFIDDLE: http://jsfiddle.net/6d6xa65n/
When run this image-src="img/banner.png" it will show different output. but when i add image src="http://s10.postimg.org/noxw294zd/banner.png", it shows something different from actual output, after completing one time of rotation, need to start from left. and need to remove space left and right side of image.
How to fix this? Can someone help me with us?
This is image i used http://imgur.com/FDbmms0
If I got it right, you need to make these changes:
To remove extra space:
body {
margin: 0;
padding: 0;
}
To make your image rotate back and forth:
#keyframes animatedBackground {
0% { background-position: 0 0; }
50% { background-position: 100% 0; }
100% { background-position: 0 0; }
}
See working demo.
Edit:
I've found this article with basics on how to do the infinite image scroll. But I couldn't make it work with relative width and height (so as author of the technique in his demo), so I've just multiplied original width (1269px) accordingly. Here is the final css:
body {
margin: 0;
padding: 0;
}
#slideshow {
position: relative;
overflow: hidden;
height: 100px;
}
#animate-area {
height: 100%;
width: 2538px;
position: absolute;
left: 0;
top: 0;
background-image: url('http://s10.postimg.org/noxw294zd/banner.png');
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
/* Put your css in here */
#keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-webkit-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-moz-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
So #animate-area is twice as large as image and we just animate to left on full image size. See updated demo.
Related
I'm creating a crossfade fullscreen slideshow on my webpage with HTML and CSS, however it's not working well.
I could create crossfading on background images, but there is a problem.
In first loading, there are white flickers between each images.
I don't want to avoid white flickers.
How can I fix them?
I've wrote with HTML and CSS to create a crossfade slideshow.
<body>
<div class="slideshow">
</div>
</body>
body {
margin: 0;
padding: 0;
}
.slideshow {
height: 100vh;
weight: 100%;
background-image: url('../images/1.jpg');
background-size: cover;
animation: slide 24s infinite;
}
#keyframes slide {
25% {
background-image: url('../images/2.jpg');
background-size: cover;
}
50% {
background-image: url('../images/3.jpg');
background-size: cover;
}
75% {
background-image: url('../images/4.jpg');
background-size: cover;
}
}
I don't need white flickers and apply a beautiful crossfade slideshow.
Flickers happen because the browser paints a new image, probably.
Try creating individual <div>s for each slide, position them absolute, and simply fade each of them away.
<body>
<div class="slideshow">
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
<div class="slide slide-4"></div>
</div>
</body>
.slideshow {
position: relative;
width: 100vw; height: 100vh;
}
.slide {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0; /* makes it full size */
opacity: 0;
transition: opacity 1s;
background-size: cover;
background-position: center;
}
.slide.active {
opacity: 1;
}
With CSS only:
#keyframes slide-1 {
0% , 40% , 100% { opacity: 0; }
20% { opacity: 1; }
}
#keyframes slide-2 {
0% , 20% , 60% , 100% { opacity: 0; }
40% { opacity: 1; }
}
#keyframes slide-3 {
0% , 40% , 80% , 100% { opacity: 0; }
60% { opacity: 1; }
}
#keyframes slide-4 {
0% , 60% , 100% { opacity: 0; }
80% { opacity: 1; }
}
.slide-1 { animation: slide-1 24s infinite; background-image: url('../images/1.jpg'); }
.slide-2 { animation: slide-2 24s infinite; background-image: url('../images/2.jpg'); }
.slide-3 { animation: slide-3 24s infinite; background-image: url('../images/3.jpg'); }
.slide-4 { animation: slide-4 24s infinite; background-image: url('../images/4.jpg'); }
Or with JS:
setInterval(function(){
var current = document.querySelector('.slide.active');
if (current.nextElementSibling) {
current.nextElementSibling.classList.add('active');
} else {
current.parentElement.firstElementChild.classList.add('active');
};
current.classList.remove('active');
}, 6000);
Hi i have created a game which runs on different devices on different resolutions. so to adjust the resolution i am using dynamic css scaling , so due to scaling my keyframe animation is flickering massively on firefox. The sprite animation is used within a div background-imgae. Please help me to get rid out of this.
Below is the source code and url of animation:
Please open it in firefox.
https://trcdev.oupchina.com.hk/test/kg_game3/#/home
.boboFeather {
background-image: url(‘../../assets/images/home/boboFeather.png’);
background-repeat: no-repeat;
width: 460px;
height: 489px;
position: absolute;
right: 250px;
bottom: 30px;
animation: BoboFeatherAnim 2s steps(14) infinite;
-webkit-animation: BoboFeatherAnim 2s steps(14) infinite;
-moz-animation: BoboFeatherAnim 2s steps(14) infinite;
-ms-animation: BoboFeatherAnim 2s steps(14) infinite;
-o-animation: BoboFeatherAnim 2s steps(14) infinite;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
#keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}
#-moz-keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}
#-ms-keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}
#-o-keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}
#-webkit-keyframes BoboFeatherAnim {
from {
background-position: 0px;
}
to {
background-position: -6440px;
}
}
Add -webkit-transform-style: preserve-3d; or -moz-transform-style: preserve-3d;style to the container of a flickering element. To class="container" in your case, that contains .boboFeather element.
I have a background image for animation.
How can i do endless animation ?
(If animation goes right side of page , i want to see it in appear in left side of page)
The original code from David Walsh - CSS Background Animations
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
#animate-area {
width: 560px;
height: 400px;
background-image: url(https://davidwalsh.name/demo/bg-clouds.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
}
<div id="animate-area"></div>
I posted this because you said left to right.
You can use something like this.
#horizontal-scroll {
width: 1439px;
height: 1170px;
background: black url(https://assets.periscope.tv/images/map.svg);
-webkit-animation: backgroundScroll 50s linear infinite;
animation: backgroundScroll 50s linear infinite;
}
#-webkit-keyframes backgroundScroll {
from {
background-position: -1439px 0;
}
to {
background-position: 0 0;
}
}
#keyframes backgroundScroll {
from {
background-position: -1439px 0;
}
to {
background-position: 0 0;
}
}
<div id="horizontal-scroll"></div>
#keyframes customname
{
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
classname
{
background-image: url(Url of tyour file);
width: width of the file;
height: Height of the file;
background-position: 0px 0px;
background-repeat: repeat-x; //Repeating through X axis only
animation: customname 40s linear infinite;
}
Code is for displaying an image during a hover.
In addition to not getting the images to display while hovering, I am getting a white border on the top (about 17px) and right side of the image.
Any suggestions as to why this is happening?
http://jsfiddle.net/wfpzLv8n/
.nav-wrap {
width: 100%;
height: 770px;
background: #111;
position: relative;
}
.nav-wrap .img-place {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 5;
}
.nav-wrap .nav li {
font-family: 'HelveticaNeue';
position: relative;
z-index: 6;
list-style: none;
}
.nav-wrap .nav li a {
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 48px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 0px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}
.nav-wrap .nav:hover li a {
opacity: 0.3;
}
.nav-wrap .nav li a:hover {
opacity: 1;
padding-left: 95px;
font-weight: 600;
}
.nav-wrap .bg1 {
background-image: url("http://www.photography-match.com/views/images/gallery/Ghandrung_Village_and_Annapurna_South_Nepal_Himalaya.jpg");
background-size: 120%;
opacity: 0.3;
-webkit-animation: fadein 2s forwards;
-moz-animation: fadein 2s forwards;
-ms-animation: fadein 2s forwards;
-o-animation: fadein 2s forwards;
animation: fadein 2s forwards;
-webkit-animation: mymove 11s forwards ease-out;
animation: mymove 11s forwards ease-out;
}
` #keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes mymove {
0% {
top: -12px;
}
100% {
top: -240px;
}
}
#keyframes mymove {
0% {
top: -12px;
}
100% {
top: -240px;
}
}
.nav-wrap .bg2 {
background-image: url("http://travspire.com/wp-content/uploads/2013/06/Glimpse_of_hampi_main.jpg");
background-size: 125%;
opacity: 0.4;
animation: bgani 7s linear forwards;
}
.nav-wrap .bg3 {
background-image: url("http://lh5.ggpht.com/_nFOgRvQfbY4/SqDwU31NB8I/AAAAAAAAATE/Jo1zuHhJaDA/s1600/IMG_4278.JPG");
background-size: 130%;
-webkit-animation: fadein 3s forwards ease-out;
-moz-animation: fadein 3s forwards ease-out;
-ms-animation: fadein 3s forwards ease-out;
-o-animation: fadein 3s forwards ease-out;
animation: fadein 3s forwards ease-out;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes bgani {
0% {
opacity: 0;
background-size: 100%;
}
15% {
opacity: 0.3;
}
100% {
background-size: 125%;
}
</style>
Your jsFiddle was messed up, that's all. You shouldn't put the <style></style> tags in the CSS area, and you shouldn't put the <script></script> tags in the JavaScript area. Also, to include jQuery, you need to include it as an external resource, which is a section in the left sidebar. You put your resource URL in the text box, and click the plus button at its right. Here's a fixed version, with your HTML cleaned up too.
http://jsfiddle.net/xchrt5db/
I'm guessing you're new to jsfiddle? I've formatted it correctly now, is that working?
$('.nav li a').hover(function() {
$('.img-place').toggleClass($(this).data('target'));
});
$('.nav-wrap .img-place, .nav-wrap').height($(window).height());
http://jsfiddle.net/link2twenty/wfpzLv8n/2/
I need to have a growing and decreasing circle in made in javascript.
My idea is to use a div with
border-radius : 50%
To get a circle. I need to make it scale from 0.2 to 1 every [x] seconds .
Like It grows from 0.2 to 1 in 5 seconds, then it decreases from 1 to 0.2 in5 seconds too. THen the movement starts again.
I think i have to use sin or cos functions but i don't know how to get this interval depending on time.
I need it to be coupled with a javascript timing function, so that when i satr a timer, the animation begins, and when I pause it it pauses the animation.
Thanks for advice !
One more example of CSS animation which probably better option then javascript:
.circle {
background: coral;
height: 100px;
width: 100px;
border-radius: 50%;
-webkit-animation: pulse 1s ease infinite alternate;
animation: pulse 1s ease infinite alternate;
}
#-webkit-keyframes pulse {
from {
-webkit-transform: scale(1);
}
to {
-webkit-transform: scale(.2);
}
}
<div class="circle"></div>
For Firefox you will need to add prefixless rule
#keyframes pulse {
from { transform: scale(1); }
to { transform: scale(.2); }
}
You could do this with CSS3 animations. Look at this example and change it until it does exactly how you want it.
#circle {
-webkit-animation: oscillate 10s infinite;
animation: oscillate 10s infinite;
border: 1px solid black;
height: 100px;
width: 100px;
}
#-webkit-keyframes oscillate {
0% { border-radius: 20%; }
50% { border-radius: 100%; }
100% { border-radius: 20%; }
}
#keyframes oscillate {
0% { border-radius: 20%; }
50% { border-radius: 100%; }
100% { border-radius: 20%; }
}
<div id="circle">Hi</div>
Use a CSS3 animation set on infinite. Check this fiddle.
#-webkit-keyframes mymove {
0%, 100% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(0.2); }
}
#keyframes mymove {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.2); }
}
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
border-radius:60px;
}