css code
#intro {
position: relative;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
padding-top: 15.6rem;
overflow: hidden;
}
#intro > figure {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
margin-left: 0px;
}
#intro > figure:nth-child(1){
background-image: url('../images/1.jpg');
}
#intro > figure:nth-child(2){
animation-delay: 6s;
background-image: url('../images/2.jpg');
}
#intro > figure:nth-child(3){
animation-delay: 12s;
background-image: url('../images/3.jpg');
}
html code:
<section id="intro">
<figure></figure>
<figure></figure>
<figure></figure>
</section>
In this code I am going to display background image one by one but here when background image fade out one by one after third image its display black background. So, How can I remove black color background I want to display only images using css.
Thank You
If there isn't reason avoid jQuery plugins, just try to use Slick carousel.
Take a look to "fade", it works great.
Related
I have this 2D Highway background image
https://opengameart.org/sites/default/files/background-1_0.png
I'm working on a mobile game (with JS and CSS3) of racing cars,
and I want to make animation of this road to make an illusion of movement
Can someone please guide me what's the best practice for this case?
Currently I do something like that, but it's not smooth enough (especially in mobile browser) -
.main {
background-image: url(https://opengameart.org/sites/default/files/background-1_0.png);
background-repeat-x: no-repeat;
background-size: 103%;
background-repeat-y: repeat;
background-position-y: 27px;
animation: loopingRoad 0.1s infinite;
height: 100%;
width: 100%;
}
#keyframes loopingRoad {
100% {
background-position-y: 1000%;
}
0% {
background-position-y: 0%
}
}
Use
background-position: 0 0;
background-position: 0 -100000px;
as the keyFrame keys:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.main {
background-image: url(https://opengameart.org/sites/default/files/background-1_0.png);
background-repeat-x: no-repeat;
background-size: 103%;
background-repeat-y: repeat;
background-position-y: 27px;
animation: loopingRoad 250s linear infinite;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
#keyframes loopingRoad {
from {
background-position: 0 0;
}
to {
background-position: 0 -100000px;
}
}
<div class="main" />
Create a container in which you set the aspect ratio that corresponds with the road image. This allows you to play with the width of the container while keeping the image in the right proportions.
For the image itself. Make it twice the height of the container. This allows you to transform the entire road 50% upwards. When starting the animation, the top half of the road is exposed. At the end of the animation the bottom half is exposed. Loop this proces to create the illusion.
The transform property animates very well as it doesn't ask the browser to repaint the entire page, but only the element that is transformed.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.view {
max-width: 840px;
max-height: 100%;
overflow: hidden;
}
.road {
aspect-ratio: 840 / 650; /* Dimensions of the road image */
overflow: hidden;
}
.road::before {
content: "";
display: block;
animation: loopRoad 1.5s infinite linear;
height: 200%; /* Twice the height */
background-size: auto 50%; /* Fit into 1 vertical half */
background-image: url(https://opengameart.org/sites/default/files/background-1_0.png);
background-repeat: repeat-y;
}
#keyframes loopRoad {
from {
transform: translate3d(0, 0%, 0);
}
to {
transform: translate3d(0, -50%, 0);
}
}
<div class="view">
<div class="road"></div>
</div>
I have tried a lot of different ways using animation keyframes. I cannot seem to be able to do it.
I basically want my background animate left to right and repeat, like a marquee but as my background.
It seems like the only solution for me is to make a gif for my background, but that is really time extensive for me.
to avoid jumps in the animation (once it reachs the end and start again) I would move the image with repeat-x to an exagerated amount of x coordenates like this:
html {
margin:0;padding:0; height:100%;
}
body {
height:100%;
background-image:url(https://i.imgur.com/aCDecXL.jpg);
background-size: auto 100%;
overflow:hidden;
background-repeat:repeat-x;
animation: scroll 700000s infinite linear;
}
#keyframes scroll {
from { background-position: 0%; }
to { background-position: 90000000%; }
}
Try this.
#animate-area {
width: 560px;
height: 400px;
background-image: url('http://labs.designoptimizer.net/snip/bg-clouds.png');
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
<div id="animate-area"></div>
Use animation keyframe to make it work
.background{
background: url(https://dummyimage.com/1500x700/);
width: 560px;
height: 400px;
background-position: 0px 0px;
background-repeat: repeat-x;
background-size: cover;
animation: animation_back 2s linear infinite;
}
#keyframes animation_back {
from { background-position: 0 0; }
to { background-position: 200% 0; }
}
<div class="background">
</div>
when i scrolling down my menubar go behind the cycle slider i tried z-index 1 but its not working please give any soloution i dont know what going wrong
</div>
<img src="http://malsup.github.io/images/p1.jpg">
<img src="http://malsup.github.io/images/p2.jpg">
<img src="http://malsup.github.io/images/p3.jpg">
<img src="http://malsup.github.io/images/p4.jpg">
</div>
</div>
<div class="section_about">
</div>
*{
margin: 0;
padding: 0;
}
/* Top Menu Start Here */
.top_nav{
height: 90px;
width: 100%;
background: rgba(0,0,0,.5);
position: fixed;
z-index: 1;
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
-moz-transition:all 0.7s ease;
-o-transition:all 0.7s ease;
-ms-transition:all 0.7s ease;
}
.container{
height: 100vh;
width: 100%;
max-width: 100%;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
}
.site-dt{
background-color: #fff;
height: 573px;
width: 100%;
}
#slider-main{
height: 578px;
width: 100%;
overflow: hidden;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#slider-main #slider img{
height: 100%;
width: 100%;
}
.section_about{
height: 573px;
width: 100%;
background-color: #de5670;
overflow: hidden;
position: absolute;
}
Try doing a
display: block;
or
display: table;
on both of them. Set the index 2 for the menu, and 0 for the slide container. I hope this helps.
Try this :
#slider-main #slider img{
height: 100%;
width: 100%;
position:absolute !important;
z-index:2!important;
}
I use transition in javascript but doesn't work on firefox, someone know why ? Is good on google chrome.
This is my code :
el.style.backgroundImage = "url('menu.jpg')";
el.style.transition = "background 0.4s";
Following suggestion at link posted by #Jeremy ; substituted setting transition to affect background-size for opacity
div a {
color: #fff;
z-Index: 3;
position: absolute;
}
div:before,
div:after {
content: " ";
position: absolute;
background-repeat: no-repeat;
display: block;
width: 50px;
height: 50px;
transition: background-size 0.4s;
}
div:before {
background: #1F1F1F;
background-size: 100% 100%;
}
div:after {
background: url(http://lorempixel.com/50/50/nature);
background-size: 0% 0%;
}
div:hover:before {
background-size: 0% 0%;
}
div:hover:after {
background-size: 100% 100%;
}
<div>abc
</div>
plnkr http://plnkr.co/edit/XJMvtEnuvS1TF1xqIVVQ?p=preview
In the example below I will show you a sample of what I have right now and you will notice when you hover over the black box a transition occurs and slides in my tooltip. My problem is that I want that tooltip to only appear when I hover over the black box. In the example you will notice if you hover over the black or anywhere within 180px right of the black box the transition still occurs( this is because my graphic is 180px wide)! I want to restrict the hover effect to only the black box! Please help!
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates">
<div id="regionsUnitedStatesTooltip"></div>
</div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
position: absolute;
left:-60px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background: #000;
}
#regionsUnitedStatesTooltip {
opacity:0;
background: #555;
height:60px;
width:180px;
left:100px;
position:absolute;
transition:all ease-in-out 0.25s;
top:0;
}
#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
left: 60px;
opacity:1;
}
Example:
JSFIDDLE
Best way I can see is to make it so you can't hover over the tooltip when it's not visible.
I achieved this by setting it initially to height: 0. Here's the changes
#regionsUnitedStatesTooltip {
height: 0;
transition: opacity ease-in-out 0.25s, left ease-in-out 0.25s;
}
#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
height: 60px;
}
Demo ~ http://jsfiddle.net/pTMCP/3/
Update
Even simpler, add these two lines...
#regionsUnitedStatesTooltip {
visibility: hidden; /* add this */
}
#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
visibility: visible; /* and this */
}
Demo ~ http://jsfiddle.net/pTMCP/5/