I am working on a website (early stages) and I'm having severe difficulties applying a background crossfade in the white-background area (I would like to have a few images auto-rotating on the background, completely filling it).
As per the HTML code, I should be fine working with class .main-container in the CSS however, this changes nothing...
I would sincerely appreciate your help, I'm self-taught in HTML+CSS and I just need guidance for the right steps to take.
What would you recommend?
Many thanks in advance!
(update)
I decided to go for the Tympanus.net solution.
Which has been badly implemented to http://www.marcocarlo.com/mimosa/index.html
Here's the CSS code:
.cb-slideshow,
.cb-slideshow:after {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;
background-size:cover;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 18s linear infinite 0s;
-moz-animation: titleAnimation 18s linear infinite 0s;
-o-animation: titleAnimation 18s linear infinite 0s;
-ms-animation: titleAnimation 18s linear infinite 0s;
animation: titleAnimation 18s linear infinite 0s;
}
What can I do so it is on display in the white background area (fully covering it?)
Many thanks in advance!
You can try looking for some existing guides. Or maybe look for some existing image sliders with crossfade transitions. If you are willing to write your own crossfade though, you can use background-size: cover to fill entire areas (example)
Related
I'm trying to create a full background image slideshow without JavaScript and after trying to follow a code example, I'm not sure when it's appropriate to apply the animation to the element's container or when to apply it directly to the element itself. As you can see in the code, when the img was to be animated, the animation was applied directly to the element, but with the h3 element, the animation was applied to the container. I just want to know the best practices.
Here's the link to the example: https://codepen.io/leetech/pen/AJGLq
<ul class="slideshow">
<li><span>Image 01</span><div><h3>A little something something</h3></div></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
<li><span>Image 04</span></li>
<li><span>Image 05</span></li>
<li><span>Image 06</span></li>
</ul>
<div class="container">
<header>
<h1>CSS3 <span>Fullscreen Slideshow</span></h1>
</header>
</div>
.slideshow,
.slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.slideshow:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}
.slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.slideshow li div h3 {
font-family: "helvetica neue", helvetica;
text-transform: uppercase;
font-size: 80px;
padding: 0;
line-height: 200px;
color: rgba(255,255,255, 0.8);
}
Could you please advise me on the better approach?
This is less a question about best practice and more about desired result. The animation should only be applied to the element intended to be animated. Add the animation to the container only when the intention that every child is included in the animation.
I imagine there are going to be layered animations in the case of your slideshow. There will be slide-level animations which could be applied at a container level with element-level animations on child elements with special treatments.
I have a question in regards to building an Infinite Scrolling Banner on a website I'm working on.
I made it by putting all my images on one image and having it scroll across the screen above my footer.
2 issues I'm having, the image is overlapping my outside container, I want it to just show up in the designated area for my content. Also my image isn't repeating it will scroll through the whole image and then start over, I was wondering if I can have the image run on repeat and no overlap my container outside it looks bad.
Here is the code I wrote for it, I would really appreciate any help from you guys, and I'd like to thank you in advance for helping me out.
This is the layout for the code.
<div class="photobanner" style="display: inline-block; height: 150px; width: 2500px; overflow: hidden;">
<img class="first" src="https://www.dcnevents.com/wp-content/uploads/2018/01/ScrollingSponsor-1.png" alt="" />
</div>
This is the styling I've done for the code:
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
.photobanner img{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
p .first{
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
display:inline-block;
}
I have code which rotates the image 360 degrees infinitely. All things seem fine but the rotation of the image is causing the image to resize i.e., the height of page with increasing and decreasing. I'm not getting why is it happening. The fluctuation of scroll bar shows it.
I've attached a sample snippet which illustrates my problem.
.logo-circle img {
-webkit-animation: spin1 100s infinite linear;
-moz-animation: spin1 100s infinite linear;
-o-animation: spin1 100s infinite linear;
-ms-animation: spin1 100s infinite linear;
animation: spin1 100s infinite linear;
position: absolute;
top: 3%;
left: 27.5%;
overflow: hidden;
}
#keyframes spin1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="logo-circle img-responsive">
<img src = "https://upload.wikimedia.org/wikipedia/en/thumb/0/09/Circle_Logo.svg/1024px-Circle_Logo.svg.png" width = "45%"/>
</div>
The image is not resizing, but when it rotates it takes a larger space because of the corners
You can resolve that by adding overflow:hidden to body
body {
margin: 0;
height: 100vh;
}
.logo-circle {
height: 100%;
overflow: hidden;
position: relative;
}
.logo-circle img {
-webkit-animation: spin1 100s infinite linear;
-moz-animation: spin1 100s infinite linear;
-o-animation: spin1 100s infinite linear;
-ms-animation: spin1 100s infinite linear;
animation: spin1 100s infinite linear;
position: absolute;
top: 3%;
left: 27.5%;
max-height: 95%;
width: auto;
}
#keyframes spin1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="logo-circle img-responsive">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/09/Circle_Logo.svg/1024px-Circle_Logo.svg.png" width="45%">
</div>
Maybe it's about img-responsive class from Bootstrap? ... it's use "max-width and height:auto;" So if Your image is not a square, it can be resized.
I using a vertical sprite sheet in an animation with #keyframe.
I just can't get it to work correctly.
body{
background: brown;
}
.hi {
width: 117px;
height: 180px;
background-image: url("http://i.imgur.com/DxApxaV.png");
-webkit-animation: play .9s steps(8) infinite;
-moz-animation: play .9s steps(8) infinite;
-ms-animation: play .9s steps(8) infinite;
-o-animation: play .9s steps(8) infinite;
animation: play .9s steps(8) infinite;
}
#keyframes play {
from { background-position:0px; }
to { background-position:0px 1080px; }
}
<div class="hi"></div>
I tried using #keyframe with background-position-y axis to no avail.
It should be animation at 1 frame.
You just needed to change the steps to 6.
Basically speaking, steps is the number of sprites you are wanting to show over X time. So in this case, you only have 6, not 9.
I also changed it to use background-position.y.. note that having background-position: 0 0; is also good practice for when you come across more complex, grid sprite sheets.
body{
background: brown;
}
.hi {
width: 117px;
height: 180px;
background-image: url("http://i.imgur.com/DxApxaV.png");
background-position: 0 0;
-webkit-animation: play .9s steps(6) infinite;
-moz-animation: play .9s steps(6) infinite;
-ms-animation: play .9s steps(6) infinite;
-o-animation: play .9s steps(6) infinite;
animation: play .9s steps(6) infinite;
}
#keyframes play {
from { background-position-y:0px; }
to { background-position-y:1080px; }
}
<div class="hi"></div>
This is what I tried:
css code:
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; }
}
Now what I need, every once rotational completed, then again start to move from right to left. I need some distance for every rotational completed.
Can somebody help to fix this?
Thanks in advance.
http://jsfiddle.net/6d6xa65n/4/
There isn't any delay between iterations in css3 other than animation-delay, which is used at the beginning, however you can use jQuery for delay. For direction from right to left change:
animation: animatedBackground 40s linear infinite alternate;
-ms-animation: animatedBackground 40s linear infinite alternate;
-moz-animation: animatedBackground 40s linear infinite alternate;
-webkit-animation: animatedBackground 40s linear infinite alternate;
If you want to add delay change to:
animation: animatedBackground 40s 5s linear infinite alternate;
-ms-animation: animatedBackground 40s 5s linear infinite alternate;
-moz-animation: animatedBackground 40s 5s linear infinite alternate;
-webkit-animation: animatedBackground 40s 5s linear infinite alternate;
Or add this, which will give you a delay at the end and beginning if you mean delay by "distance":
background-image: url('http://s10.postimg.org/noxw294zd/banner.png');
animation: animatedBackground 5s linear infinite alternate;
-ms-animation: animatedBackground 5s linear infinite alternate;
-moz-animation: animatedBackground 5s linear infinite alternate;
-webkit-animation: animatedBackground 5s linear infinite alternate;
}
/* Put your css in here */
#keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}
#-webkit-keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}
#-moz-keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}