I'm trying to create a slideshow/carousel but rather than scroll, they fade in/out. I've got them to cycle through the images, with 3 images per cycle but I wanted to stagger each image from left to right.
https://codepen.io/fearnaught/pen/BarOVqr
<div class="logo-container">
<img src="https://www.placecage.com/300/120" alt="1">
<img src="https://www.placecage.com/300/121" alt="2">
<img src="https://www.placecage.com/300/122" alt="3">
<img src="https://www.placecage.com/300/123" alt="4">
</div>
<div class="logo-container two">
<img src="https://www.placecage.com/301/123" alt="6">
<img src="https://www.placecage.com/301/122" alt="5">
<img src="https://www.placecage.com/301/121" alt="7">
<img src="https://www.placecage.com/301/120" alt="8">
</div>
<div class="logo-container three">
<img src="https://www.placecage.com/302/122" alt="9">
<img src="https://www.placecage.com/302/120" alt="10">
<img src="https://www.placecage.com/302/123" alt="11">
<img src="https://www.placecage.com/302/121" alt="12">
</div>
.logo-container {
position: relative;
}
.logo-container.two {
left:320px
}
.logo-container.three {
left: 640px
}
.logo-container img {
position: absolute;
animation-name: multiple-logo-crossfade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
left: 0;
background-color: var(--cream);
}
.logo-container img:nth-of-type(1) {
animation-delay: 6s;
}
.logo-container img:nth-of-type(2) {
animation-delay: 4s;
}
.logo-container img:nth-of-type(3) {
animation-delay: 2s;
}
.logo-container img:nth-of-type(4) {
animation-delay: 0;
}
#keyframes multiple-logo-crossfade {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
82% {
opacity: 0;
}
100% {
opacity: 1;
}
}
I've tried adding different delays to the middle and right images, but it doesn't seem to be a smooth infinite cycle.
Related
How can I get this animation effect? I mean exacly this one:
I have to animate the image (I have every part of it in layers). What I should use? which way is the best?
i hope this can help,i use animation on load event using jQuery.
$( window ).on( "load", function() {
$('.main-section').toggleClass('animation-effect');
});
body {
margin: 0;
}
.main-section {
padding: 25px 0px 0 20px;
background-color: #d7f0f7;
}
.main-section .content {
max-width: 450px;
background-color: #d7f0f7;
transform: translateX(-500px);
transition: 0.8s;
}
.main-section .content .box {
height: 150px;
background-color: #e91e63;
margin-top: -15px;
transition: 0.5s;
width: 0;
}
.main-section .content .leaf {
padding-left: 100px;
}
.main-section .content .half-circle {
padding-left: 100px;
margin-top: -20px;
}
.main-section .content .half-circle-2 {
padding-left: 100px;
margin-top: -25px;
transform: rotate(-14deg);
}
.main-section .content .leaf img {
padding-left: 115px;
}
.main-section.animation-effect .content{
transform: translateX(0px);
transition: 1s;
}
.main-section.animation-effect .box {
width: 100%;
transition: 1s;
}
.main-section .content .half-circle img {
animation: rotate 3.5s infinite;
}
.main-section .content .leaf img {
animation: leaf-animation 3s infinite;
}
#keyframes rotate {
0% {
transform: rotate(-14deg);
}
50% {
transform: rotate(10deg);
}
100%
{
transform: rotate(-14deg);
}
}
#keyframes leaf-animation {
0% {
transform: rotate(0);
}
50% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="main-section">
<div class="content">
<div class="leaf">
<img src="https://i.ibb.co/fSQXHD5/leaf.png" alt="leaf" border="0">
</div>
<div class="half-circle">
<img src="https://i.ibb.co/xfmy6zS/half-1.png" alt="half-1" border="0">
</div>
<div class="half-circle-2">
<img src="https://i.ibb.co/CBdVwNC/half-2.png" alt="half-2" border="0">
</div>
<div class="box">
</div>
</div>
</div>
I have a problem with a image I added to the header It doesn't seem to display in Chrome but is does display on Safari and Firefox. I have 3 black banners/flags on the top left of the screen. The middle doesnt display on chrome. Does anyone have a suggestion or an idea why it doesn't display?
header.php:
<div class="header_inner clearfix">
<div class="marketing-top">
<img src="/wp-content/uploads/2015/04/Banner-header-marketing.png" alt="marketing">
<img class="space" src="/wp-content/uploads/2015/04/Banner-header-design.png" alt="design">
<div class="header-img animated swing">
<img src="/wp-content/uploads/2015/05/banner-header-web-design.jpg" alt="webdesign">
</div>
</div>
css:
.marketing-top {
padding-left: 180px;
position: absolute;
float: left;
left: 100px;
}
.marketing-top .space{
position: absolute;
float:left;
left:280px;
bottom:57px;
}
.header-img {
position: absolute;
float:left;
left:230px;
bottom:0px;
}
#media screen and (max-width: 1250px) {
.marketing-top{
display: none;
}
}
.swing {
animation-name: swing;
transform-origin: center top 0;
}
.animated {
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes swing {
0% {
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
20% {
transform: rotate(1deg);
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(-1deg);
animation-timing-function: ease-in-out;
}
60% {
transform: rotate(0.5deg);
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(-0.5deg);
animation-timing-function: ease-in-out;
}
100% {
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
}
Thanks in advance!
Vonwelzen
Related URL: http://www.elephantdesign.nl
6 hours ago
Its because width of .header-img is 0 in your case. Explicitly assign a width greater than image width
.header-img{
width:50px;
}
I built a grid of images (stored in $image), which may change in a random order with a random delay. The performance was okay, as long as I haven't had background-position: center and background-size: cover in it. Now with these attributes the images flickers while blending in. How may I improve the rendering performance?
My scss looks like this
#mixin image-tiles() {
// First image
#for $i from 1 through $total-image-count {
$firstImg: nth($images, $i);
&.img-#{$i} {
// set the default image if animations are not defined
background-image: url('../../' + $firstImg);
}
// Second image
#for $j from 1 through $total-image-count {
// Third image
#for $k from 1 through $total-image-count {
&.img-#{$i}-#{$j}-#{$k}{
animation-name: random-image-transition-#{$i}-#{$j}-#{$k};
}
}
}
}
#for $d from 0 through ($image-shown-duration * 2) - 1 {
&.delayed-by-#{$d} {
animation-delay: 0.5s * $d;
}
}
&.img {
animation-direction: alternate;
animation-duration: $image-shown-duration * 3s, $image-shown-duration * 3s; // three stages
animation-iteration-count: infinite;
}
}
#for $i from 1 through $total-image-count {
$firstImg: nth($images, $i);
#for $j from 1 through $total-image-count {
$secondImg: nth($images, $j);
#for $k from 1 through $total-image-count {
$thirdImg: nth($images, $k);
#keyframes random-image-transition-#{$i}-#{$j}-#{$k} {
from {
background-image: url('../../' + $firstImg);
}
16% {
background-image: url('../../' + $firstImg);
}
23% {
background-image: url('../../' + $secondImg);
}
50% {
background-image: url('../../' + $secondImg);
}
56% {
background-image: url('../../' + $thirdImg);
}
89% {
background-image: url('../../' + $thirdImg);
}
to {
background-image: url('../../' + $firstImg);
}
}
}
}
}
.tile-teaser-content-wrapper {
margin: 0 auto;
max-width: 80vw;
padding-bottom: 45%;
position: relative;
width: 100%;
}
.tile-teaser-content {
bottom: 0;
left: 0;
max-width: 80vw;
position: absolute;
right: 0;
top: 0;
.tile {
#include image-tiles();
background-size: cover;
background-position: center;
float: left;
height: 100% / $tile-per-col-count;
width: 100% / $tile-per-row-count;
}
}
the html would be
<div class="tile-teaser-content-wrapper">
<div class="tile-teaser-content">
<div class="tile img img-1 img-1-2-3 delayed-by-0"></div>
<div class="tile img img-4 img-4-5-6 delayed-by-1"></div>
<div class="tile img img-7 img-7-8-9 delayed-by-2"></div>
<div class="tile img img-1 img-1-2-3 delayed-by-3"></div>
<div class="tile img img-4 img-4-5-6 delayed-by-4"></div>
<div class="tile img img-7 img-7-8-9 delayed-by-5"></div>
<div class="tile img img-1 img-1-2-3 delayed-by-1"></div>
<div class="tile img img-4 img-4-5-6 delayed-by-2"></div>
<div class="tile img img-7 img-7-8-9 delayed-by-3"></div>
</div>
</div>
It is not a performance problem, it is mode deep than that.
the background-image size is a property of the element. When you are making a transition on this, and the 2 images have different sizes, the browser is unable to set both dimensions at the same time, and so you have a wrong result.
The usual way to solve this is to have 2 elements, each with a background-image, and play with the opacity of one of them.
By the way, animating a background image has still poor browser support, so this is another reason to change your approach
I am new to CSS3 keyframe animations and I'm trying to create animation with three images, where each image would stay for 2 seconds, then change to 2nd image, which would stay 2 seconds as well and then change to the last 3rd image, which would also stay 2 seconds. This animation would then loop back to the first image...second...third...etc.
I have created the following Fiddle: http://jsfiddle.net/klarita/yyRQ8/
I know the stylesheet is a mess at the moment as I can't work it out, Could anyone advice please.
I will need to use the same technique for 6 images later on, just need to understand how it all works.
HTML:
<div id="crossfade">
<img src="http://farm6.staticflickr.com/5145/5576437826_940f2db110.jpg" alt="Image 1">
<img src="http://farm4.staticflickr.com/3611/3463265789_586ce40aef.jpg" alt="Image 2">
<img src="http://farm3.static.flickr.com/2657/5739934564_357f849b58_z.jpg" alt="Image 3">
</div>
CSS:
#crossfade > img {
width: 185px;
height: 185px;
position: absolute;
top: 100px;
left: 100px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 10s linear infinite 0s;
-moz-animation: imageAnimation 10s linear infinite 0s;
-o-animation: imageAnimation 10s linear infinite 0s;
-ms-animation: imageAnimation 10s linear infinite 0s;
animation: imageAnimation 10s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#-o-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
I made some CSS animations, and on WebKit (Safari/Chrome), it works fine, but on Firefox the timing is messed up.
JSFiddle: http://jsfiddle.net/jmorais/p5XCD/1/
Code:
var open = false;
var intransition = false;
function openCard() {
intransition = true;
$('.out').addClass('openingOut');
$('.in-left').addClass('openingIn');
setTimeout(function() {
$('.out').css("z-index", "2");
$('.in-left').css("z-index", "3");
}, 850);
setTimeout(function(){
$('.out').removeClass('openingOut').addClass('outOpen');
$('.in-left').removeClass('openingIn').addClass('inOpen');
open = true;
intransition = false;
}, 3000);
}
function closeCard() {
intransition = true;
$('.out').addClass('closingOut');
$('.in-left').addClass('closingIn');
setTimeout(function() {
$('.out').css("z-index", "3");
$('.in-left').css("z-index", "2");
}, 1000);
setTimeout(function(){
$('.out').removeClass('closingOut').removeClass('outOpen');
$('.in-left').removeClass('closingIn').removeClass('inOpen');
open = false;
intransition = false;
}, 3000);
}
function toggleCard() {
if (intransition) { return; }
if (open) {
closeCard();
} else {
openCard();
}
}
body {
margin-left: 350px;
}
.tile {
position:absolute;
width:350px;
height:400px;
left: 50%;
margin: 0 auto;
background: pink;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.out {
z-index: 3;
}
.in-left {
z-index: 2;
left: -350px;
-webkit-transform: rotateY(-180deg);
-webkit-transform-origin: 100% 100%;
-moz-transform: rotateY(-180deg);
-moz-transform-origin: 100% 100%;
}
.in-right {
z-index: -1;
}
.content {
border: 3px black double;
margin: 10px;
padding: 20px;
height: 335px;
}
.perspective {
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
position: relative;
display: inline-block;
}
/*****************************************
* Open
******************************************/
.openingOut {
/* Webkit */
-webkit-animation-name: open-card-out;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 3s;
-webkit-transition-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
/* Firefox */
-moz-animation-name: open-card-out;
-moz-animation-timing-function: ease;
-moz-animation-duration: 3s;
-moz-transition-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
}
.openingIn {
/* Webkit */
-webkit-animation-name: open-card-in;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 3s;
-webkit-transition-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
/* Firefox */
-moz-animation-name: open-card-in;
-moz-animation-timing-function: ease;
-moz-animation-duration: 3s;
-moz-transition-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
}
.outOpen {
-webkit-transform: rotateY(180deg);
-webkit-transform-origin: 0 0;
-moz-transform: rotateY(180deg);
-moz-transform-origin: 0 0;
}
.inOpen {
-webkit-transform: rotateY(0deg);
-webkit-transform-origin: 0 0;
-moz-transform: rotateY(0deg);
-moz-transform-origin: 0 0;
}
/* Webkit */
#-webkit-keyframes open-card-out {
from {
-webkit-transform-origin: left 0%;
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform-origin: left 0%;
-webkit-transform: rotateY(-180deg);
}
}
#-webkit-keyframes open-card-in {
from {
-webkit-transform-origin: right 0%;
-webkit-transform: rotateY(180deg);
}
to {
-webkit-transform-origin: right 0%;
-webkit-transform: rotateY(0deg);
}
}
/* Firefox */
#-moz-keyframes open-card-out {
from {
-moz-transform-origin: left 0%;
-moz-transform: rotateY(0deg);
}
to {
-moz-transform-origin: left 0%;
-moz-transform: rotateY(-180deg);
}
}
#-moz-keyframes open-card-in {
from {
-moz-transform-origin: right 0%;
-moz-transform: rotateY(180deg);
}
to {
-moz-transform-origin: right 0%;
-moz-transform: rotateY(0deg);
}
}
/*****************************************
* Close
******************************************/
.closingOut {
/* Webkit */
-webkit-animation-name: close-card-in;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 3s;
-webkit-transition-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
/* Firefox */
-moz-animation-name: close-card-in;
-moz-animation-timing-function: ease;
-moz-animation-duration: 3s;
-moz-transition-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
}
.closingIn {
/* Webkit */
-webkit-animation-name: close-card-out;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 3s;
-webkit-transition-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
/* Firefox */
-moz-animation-name: close-card-out;
-moz-animation-timing-function: ease;
-moz-animation-duration: 3s;
-moz-transition-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
}
#-webkit-keyframes close-card-in {
from {
-webkit-transform: rotateY(-180deg);
-webkit-transform-origin: 0% 0%;
}
to {
-webkit-transform: rotateY(0deg);
-webkit-transform-origin: 0% 0%;
}
}
#-webkit-keyframes close-card-out {
from {
-webkit-transform-origin: right 0%;
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform-origin: right 0%;
-webkit-transform: rotateY(180deg);
}
}
#-moz-keyframes close-card-in {
from {
-moz-transform: rotateY(-180deg);
-moz-transform-origin: 0% 0%;
}
to {
-moz-transform: rotateY(0deg);
-moz-transform-origin: 0% 0%;
}
}
#-moz-keyframes close-card-out {
from {
-moz-transform-origin: right 0%;
-moz-transform: rotateY(0deg);
}
to {
-moz-transform-origin: right 0%;
-moz-transform: rotateY(180deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="perspective" onclick="toggleCard();">
<div class="tile out out">
<div class="content">
<p>out</p>
</div>
</div>
<div class="tile in-left">
<div class="content">
<p>in-left</p>
</div>
</div>
<div class="tile in-right">
<div class="content">
<div style="display: table; height: 100%; width: 100%;">
<p>in-right</p>
</div>
</div>
</div>
</div>
As you can see, the in-left div opens in the same time as the out div if you're using Safari/Chrome, but on Firefox it will open at different times, messing up the whole animation.
How can I fix this?
An answer is not needed because the animation effects are the same in both browsers, stable builds tested.
Chrome:
19.0.1084.56 (Official Build 140965) m
Firefox:
Mozilla/5.0 (Windows NT 5.1; rv:13.0) Gecko/20100101 Firefox/13.0
How ironic this non-answer is an answer.
To be sure, flush out your browsers cache and test on another PC for verification.
I am agree with arttronics, I saw that you test all css3 available solutions but I think there are just 2 posible solution without using css3 at all
just wait until firefox improve its performance with css3 animation and transition, I personally think that this won't be for so long
to use an alternative to make that animation like canvas, I think that this is not going to be easy, but I think that this is a posible solution only if you really need that animation running