W3.CSS Cross-Fade Animation?

Goodness · September 19, 2016

I'm liking W3.CSS and was wondering if anyone knows of a way to do a cross-fade on an image carousel.

The w3-animate-fading class work pretty nice but completely fades one image out before fading up the next.

Thanks in advance for any helpful advice.

dsonesuk · September 19, 2016

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.w3-content.w3-section {position: relative;}

#bkimg {background-size: cover; background-position: center; background-image: url(img_rr_04.jpg); position: absolute; top:0; left: 0; right:0; bottom:0; z-index: -1;}
.w3-animate-fading{-webkit-animation:fading 10s infinite;animation:fading 10s infinite;position: relative; z-index: 9999;}
@-webkit-keyframes fading{0%{opacity:0}100%{opacity:1}}
@keyframes fading{0%{opacity:0}100%{opacity:1}}

</style>
</head>
<body>

<p>The w3-animate-fading class animates an element in and out (takes about 10 seconds).</p> 
<div class="w3-content w3-section" style="max-width:500px">
<div id="bkimg"></div>
<img class="mySlides w3-animate-fading" src="img_rr_01.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="img_rr_02.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="img_rr_03.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="img_rr_04.jpg" style="width:100%">

</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
var y = document.getElementById("bkimg");

bkimg=myIndex;
    myIndex++;
    if (myIndex > x.length) {myIndex = 1; bkimg=(x.length);}  
 if (myIndex===1) {bkimg=(x.length);}  


    for (i = 0; i < x.length; i++) {

x[i].style.display = "none";



 
    }

x[myIndex-1].style.display = "block";

y.style.backgroundImage='url('+x[bkimg-1].src+')';
    setTimeout(carousel, 10000);    
}
</script>

</body>
</html>

I think there is conflict in timing of css and JavaScript, because now and again you have background flash of image. but its close.

Goodness · September 20, 2016

Thanks! I'll give that a try.

dsonesuk · September 20, 2016

This is much better, no flickering at all

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
        <style>
            .w3-content.w3-section {position: relative;}

            #bkimg {background-size: contain; background-position: center; background-image: url(http://www.w3schools.com/w3css/img_rr_04.jpg); position: absolute; top:0; left: 0; right:0; bottom:0; z-index: -1; }
            @-webkit-keyframes fading{0%{opacity:0}80%{opacity:1}100%{opacity:1}}
            @keyframes fading{0%{opacity:0}80%{opacity:1}100%{opacity:1}}
            .w3-animate-fading{-webkit-animation:fading 10s infinite;animation:fading 10s infinite;position: relative; z-index: 9999;}


        </style>
    </head>
    <body>

        <p>The w3-animate-fading class animates an element in and out (takes about 10 seconds).</p>
        <div class="w3-content w3-section" style="max-width:500px">
            <div id="bkimg"></div>
            <img class="mySlides w3-animate-fading" src="http://www.w3schools.com/w3css/img_rr_01.jpg" style="width:100%">
            <img class="mySlides w3-animate-fading" src="http://www.w3schools.com/w3css/img_rr_02.jpg" style="width:100%">
            <img class="mySlides w3-animate-fading" src="http://www.w3schools.com/w3css/img_rr_03.jpg" style="width:100%">
            <img class="mySlides w3-animate-fading" src="http://www.w3schools.com/w3css/img_rr_04.jpg" style="width:100%">

        </div>

        <script>
            var myIndex = 0, timer, greatest_img_height = 0, duration = 5000;
            var x = document.getElementsByClassName("mySlides");
            var y = document.getElementById("bkimg");
            for (var j = 0; j < x.length; j++) {
                if (x[j].height > greatest_img_height)
                {
                    greatest_img_height = x[j].height;
                }

            }
            //find largest height of images
            for (var j = 0; j < x.length; j++) {
                x[j].style.height = greatest_img_height + "px";
            }

            //set the background image dimensions to match img element dimensions
            y.style.height = greatest_img_height + "px";
            y.style.backgroundSize = "100% " + greatest_img_height + "px";

            carousel();

            function carousel() {


                clearTimeout(timer);
                var i;

                bkimg = myIndex;
                myIndex++;
                if (myIndex > x.length) {
                    myIndex = 1;
                    bkimg = (x.length);
                }
                if (myIndex === 1) {
                    bkimg = (x.length);
                }

                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                }

                var anim_element = x[myIndex - 1];

                // reset img timing to start from 0 by cloning and appending back to give a clean new start of animation
                var anim_element_clone = anim_element.cloneNode(true);
                anim_element.parentNode.replaceChild(anim_element_clone, anim_element);

                x[myIndex - 1].style.animationDuration = duration / 1000 + "s";
                x[myIndex - 1].style.display = "block";
                y.style.backgroundImage = 'url(' + x[bkimg - 1].src + ')';
                timer = setTimeout(carousel, duration - 1000);

            }
        </script>

    </body>
</html>

Goodness · September 21, 2016

THANKS!

Two Quick Questions:

1) If all of my images are the exact same size (which they are) is there a way to just set the max-width and height without requiring the code to find the largest image height and then set the background image dimensions?

2) This solution doesn't appear to be responsive. I'm using very larger images (1980 x 1155) and when I shrink the browser window they are not scaling properly.

Thanks again!

Edited September 21, 2016 by Goodness

dsonesuk · September 21, 2016

Just comment out code applying fixed height to images and background-image.

dsonesuk · September 21, 2016

Or

<!DOCTYPE html>

<html>

<head>

<title>Document Title</title>

<style>

.w3-content.w3-section {position: relative;}

#bkimg {background-size: contain; background-position: center; background-image: url(http://www.w3schools.com/w3css/img_rr_04.jpg); position: absolute; top:0; left: 0; right:0; bottom:0; z-index: -1; }

@-webkit-keyframes fading{0%{opacity:0}80%{opacity:1}100%{opacity:1}}

@keyframes fading{0%{opacity:0}80%{opacity:1}100%{opacity:1}}

.w3-animate-fading{-webkit-animation:fading 10s infinite;animation:fading 10s infinite;position: relative; z-index: 9999;}

.mySlides {height: auto; }

</style>

</head>

<body>

<p>The w3-animate-fading class animates an element in and out (takes about 10 seconds).</p>

</div>

var myIndex = 0, timer, greatest_img_height = 0, duration = 5000;

var x = document.getElementsByClassName("mySlides");

var y =

document.getElementById("bkimg");

var z = document.body

z.onresize=function(){

setheight();

}

setheight();

carousel();

function carousel() {

clearTimeout(timer);

var i;

bkimg = myIndex;

myIndex++;

if (myIndex > x.length) {

myIndex = 1;

bkimg = (x.length);

}

if (myIndex === 1) {

bkimg = (x.length);

}

for (i = 0; i < x.length; i++) {

x.style.display = "none";

}

var anim_element = x[myIndex - 1];

// reset img timing to start from 0 by cloning and appending back to give a clean new start of animation

var anim_element_clone = anim_element.cloneNode(true);

anim_element.parentNode.replaceChild(anim_element_clone, anim_element);

x[myIndex - 1].style.animationDuration = duration / 1000 + "s";

x[myIndex - 1].style.display = "block";

y.style.backgroundImage = 'url(' + x[bkimg - 1].src + ')';

timer = setTimeout(carousel, duration - 1000);

}

function setheight()

{

for (var j = 0; j < x.length; j++) {

if (x[j].height > greatest_img_height)

{

greatest_img_height = x[j].height;

}

//find largest height of images

for (var j = 0; j < x.length; j++) {

x[j].style.height = greatest_img_height + "px";

}

//set the background image dimensions to match img element dimensions

y.style.height = greatest_img_height + "px";

y.style.backgroundSize = "100% " + greatest_img_height + "px";

}

</script>

</body>

</html>

Edited September 21, 2016 by dsonesuk

dsonesuk · September 22, 2016

Just to point out, the links/src will have to be corrected, I tried to use code box, but it would only show half of content, hence paste directly into post, but even though it showed all coding, the links, src to images is messed up.

Goodness · September 22, 2016

Thanks again.

Do you have any idea why this new version is giving me a white border around the images where the earlier one didn't?

I tried adding w3-padding-0 and w3-black (my images are mostly black) to the div class=w3-content that wraps the images but that didn't have any impact.

I may be reading the code wrong, but it still looks like we are setting the image size based on the background image referenced in the <head>. We know the image size is 1980px x 1155px. Couldn't we just declare that all of the images would have those max dimensions rather than using code the discover and store it?

The way I have it working at the moment is with the w3-animate-fading class (as mentioned in my first post above). Interestingly, the div that the images are inside has the w3-container class rather than the w3-content class. I'm not sure if this makes a huge difference.

Lastly, while this is somewhat responsive it's not fluidly responsive. If I drag and resize the browser window the images distort until I reload/refresh the page.

I really appreciate your help with this!

Edited September 22, 2016 by Goodness

dsonesuk · September 22, 2016

Total rethink, lose resize, lose div with background, instead clone last image (img) insert at top, remove w3css classes add id ref, for referencing to change source of img, remove inline style width add css for width and height in head instead. You just add equal sized images its will sort out the back img for fadein/out effect

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
        <style>
            .w3-content.w3-section {position: relative;}
            body {background-color:#999;}
            #bkimg { position: absolute; top:0; left: 0; right:0; bottom:0; z-index: -1; }
            @-webkit-keyframes fading{0%{opacity:0}80%{opacity:1}100%{opacity:1}}
            @keyframes fading{0%{opacity:0}80%{opacity:1}100%{opacity:1}}
            .w3-animate-fading{-webkit-animation:fading 10s infinite;animation:fading 10s infinite;position: relative; z-index: 9999;}

            .mySlides,#bkimg{height: auto; width: 100%;}
        </style>
    </head>
    <body>

        <p>The w3-animate-fading class animates an element in and out (takes about 10 seconds).</p>
        <div class="w3-content w3-section" style="max-width:500px">
            <img class="mySlides w3-animate-fading" src="img_rr_01.jpg">
            <img class="mySlides w3-animate-fading" src="img_rr_02.jpg">
            <img class="mySlides w3-animate-fading" src="img_rr_03.jpg">
            <img class="mySlides w3-animate-fading" src="img_rr_04.jpg">

        </div>

        <script>
            var myIndex = 0, timer, greatest_img_height = 0, duration = 5000;
            var x = document.getElementsByClassName("mySlides");
            var anim_element = x[x.length - 1];
            //alert(x[3].src)
            // alert(x[x.length - 1].src);
            var anim_element_clone = anim_element.cloneNode();
            anim_element_clone.id = "bkimg";
            anim_element_clone.className = "";
            anim_element.parentNode.insertBefore(anim_element_clone, x[0]);
            var y = document.getElementById("bkimg");
            carousel();


            function carousel() {


                clearTimeout(timer);
                var i;

                bkimg = myIndex;
                myIndex++;
                if (myIndex > x.length) {
                    myIndex = 1;
                    bkimg = (x.length);
                }
                if (myIndex === 1) {
                    bkimg = (x.length);
                }

                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                }

                anim_element = x[myIndex - 1];

                // reset img timing to start from 0 by cloning and appending back to give a clean new start of animation
                anim_element_clone = anim_element.cloneNode();
                anim_element.parentNode.replaceChild(anim_element_clone, anim_element);

                x[myIndex - 1].style.animationDuration = duration / 1000 + "s";
                x[myIndex - 1].style.display = "block";
                y.src = x[bkimg - 1].src;
                timer = setTimeout(carousel, duration - 1000);

            }

        </script>

    </body>
</html>

Goodness · September 22, 2016

Very cool!

Let me mess with this one.

And ..... THANKS! (again)

Goodness · September 22, 2016

This is proving to be more difficult than I thought.

The last version solves the fluid responsive issue.

Up until now I have just been working with this in a stand-alone page (as you sent).

With the last version I attempted to replace the carousel in my actual page.

It is causing the top nav bar to fade in and out with the images and the navigation is no longer clickable.

I think the carousel has somehow taken over that space.

Unfortunately, I may have to just accept the standard w3-animate-fading function and forego the cross-fade.

Edited September 22, 2016 by Goodness

dsonesuk · September 22, 2016

Sound you have not applied position relative to parent element, without it position: absolute element back-img img will go all over the place.

Edited September 22, 2016 by dsonesuk

Goodness · September 23, 2016

This is the code that's located in the <head>

<style>

.w3-content.w3-section {position: relative;}

body {background-color:#000;}

#bkimg { position: absolute; top:0; left: 0; right:0; bottom:0; z-index: -1; }

@-webkit-keyframes fading{0%{opacity:0}80%{opacity:1}100%{opacity:1}}

@keyframes fading{0%{opacity:0}80%{opacity:1}100%{opacity:1}}

.w3-animate-fading{-webkit-animation:fading 10s infinite;animation:fading 10s infinite;position: relative; z-index: 9999;}

.mySlides,#bkimg{height: auto; width: 100%;}

</style>

dsonesuk · September 23, 2016

We need to separate the w3css fading from the new fading on slideshow, is it possible to link to your actual page, or have whole code to see the problem, as i don't want to mess around trying to fix something when its might be something else completely different causing the problem.

Goodness · September 23, 2016

I just tried to message you my page URL but your account doesn't accept messages.

dsonesuk · September 23, 2016

This is separated from any w3css css and js, so no conflict should happen, if you uncomment w3css slide html and JS you will see they both run without conflict.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
        <style>
            #ds-slide {position: relative;}
            body {background-color:#000;}
            #bkimg { position: absolute; top:0; left: 0; right:0; bottom:0; z-index: -1; }
            @-webkit-keyframes ds_fading{0%{opacity:0}80%{opacity:1}100%{opacity:1}}
            @keyframes ds_fading{0%{opacity:0}80%{opacity:1}100%{opacity:1}}
            #ds-slide  .DS-mySlides.w3-animate-fading-ds{-webkit-animation:ds_fading 10s infinite;animation:ds_fading 10s infinite;position: relative; z-index: 9999;}

            #ds-slide .DS-mySlides, .DS-mySlides, #bkimg{height: auto; width: 100%;}
        </style>
    </head>
    <body>

        <p>The w3-animate-fading-ds class animates an element in and out (takes about 10 seconds).</p>
        <div id="ds-slide" class="w3-content w3-section" style="max-width:500px">
            <img class="DS-mySlides w3-animate-fading-ds" src="img_rr_01.jpg" alt="">
            <img class="DS-mySlides w3-animate-fading-ds" src="img_rr_02.jpg" alt="">
            <img class="DS-mySlides w3-animate-fading-ds" src="img_rr_03.jpg" alt="">
            <img class="DS-mySlides w3-animate-fading-ds" src="img_rr_04.jpg" alt="">

        </div>

        <!--     <div  class="w3-content w3-section" style="max-width:500px">
                 <img class="mySlides w3-animate-fading" src="img_rr_01.jpg" alt="" style="width:100%;">
                 <img class="mySlides w3-animate-fading" src="img_rr_02.jpg" alt="" style="width:100%;">
                 <img class="mySlides w3-animate-fading" src="img_rr_03.jpg" alt="" style="width:100%;">
                 <img class="mySlides w3-animate-fading" src="img_rr_04.jpg" alt="" style="width:100%;">

             </div>-->
        <script>

            var DS_myIndex = 0, timer, duration = 5000;

            var parentSlideWrap = document.getElementById('ds-slide');

            var DS_x = parentSlideWrap.getElementsByClassName("DS-mySlides");
            var anim_element = DS_x[DS_x.length - 1];

            var anim_element_clone = anim_element.cloneNode();
            anim_element_clone.id = "bkimg";
            anim_element_clone.removeAttribute('class');
            anim_element.parentNode.appendChild(anim_element_clone, DS_x[0]);
            var y = document.getElementById("bkimg");
            DS_carousel();


            function DS_carousel() {


                clearTimeout(timer);


                bkimg = DS_myIndex;
                DS_myIndex++;
                if (DS_myIndex > DS_x.length) {
                    DS_myIndex = 1;
                    bkimg = (DS_x.length);
                }
                if (DS_myIndex === 1) {
                    bkimg = (DS_x.length);
                }

                for (var i = 0; i < DS_x.length; i++) {
                    DS_x[i].style.display = "none";
                }

                anim_element = DS_x[DS_myIndex - 1];

                // reset img timing to start from 0 by cloning and appending back to give a clean new start of animation
                anim_element_clone = anim_element.cloneNode();
                parentSlideWrap.replaceChild(anim_element_clone, anim_element);

                DS_x[DS_myIndex - 1].style.animationDuration = duration / 1000 + "s";
                DS_x[DS_myIndex - 1].style.display = "block";
                y.src = DS_x[bkimg - 1].src;
                timer = setTimeout(DS_carousel, duration - 1000);

            }

            /*    var myIndex = 0;
             carousel();

             function carousel() {
             var i;
             var x = document.getElementsByClassName("mySlides");
             for (i = 0; i < x.length; i++) {
             x[i].style.display = "none";
             }
             myIndex++;
             if (myIndex > x.length) {
             myIndex = 1;
             }
             x[myIndex - 1].style.display = "block";
             setTimeout(carousel, 9000);
             }*/

        </script>

    </body>
</html>

Goodness · September 23, 2016

Still fading the top nav in and out.

Is there a way for me to send you the URL (not in a public forum)?

Edited September 23, 2016 by Goodness

dsonesuk · September 23, 2016

Its NOT! fading in and out! its z-index is lower than the slideshow images, so as the image reaches full opacity being above the nav it blocks it out of view. You already have a id ref of 'top' so the JavaScript code has to reference this as you can't have multiple id references on the same element, and it has to be unique, i suggest you create a outer div and give that id ref of 'top'

        <div id="top">
            <div id="ds-slide" class="w3-container w3-section w3-black w3-padding-0" style="max-width:100%; max-height:1155px;">
                <img class="DS-mySlides w3-animate-fading-ds" src="http://www.theklick.net/images/banner-3.jpg" style="width:100%">
                <img class="DS-mySlides w3-animate-fading-ds" src="http://www.theklick.net/images/banner-studio-drums.jpg" style="width:100%">
                <img class="DS-mySlides w3-animate-fading-ds" src="http://www.theklick.net/images/banner-harold-4.jpg" style="width:100%">
                <img class="DS-mySlides w3-animate-fading-ds" src="http://www.theklick.net/images/banner-tony-1.jpg" style="width:100%">
                <img class="DS-mySlides w3-animate-fading-ds" src="http://www.theklick.net/images/banner-gilly-1.jpg" style="width:100%">
                <img class="DS-mySlides w3-animate-fading-ds" src="http://www.theklick.net/images/banner-julie-4.jpg" style="width:100%">
                <img class="DS-mySlides w3-animate-fading-ds" src="http://www.theklick.net/images/banner-mike-1.jpg" style="width:100%">
                <img class="DS-mySlides w3-animate-fading-ds" src="http://www.theklick.net/images/banner-dave-1.jpg" style="width:100%">
                <img class="DS-mySlides w3-animate-fading-ds" src="http://www.theklick.net/images/banner-billy-1.jpg" style="width:100%">
            </div>
        </div>

css to fix nav problem

 #ds-slide {position: relative;}

        #bkimg { position: absolute; top:0; left: 0; right:0; bottom:0; z-index: 25; }/* amended by dsonesuk */
        @-webkit-keyframes ds_fading{0%{opacity:0}80%{opacity:1}100%{opacity:1}}
        @keyframes ds_fading{0%{opacity:0}80%{opacity:1}100%{opacity:1}}
        #ds-slide  .DS-mySlides.w3-animate-fading-ds{-webkit-animation:ds_fading 10s infinite;animation:ds_fading 10s infinite;position: relative; z-index: 50;}/* amended by dsonesuk */

        #ds-slide .DS-mySlides, .DS-mySlides, #bkimg{height: auto; width: 100%;}

        .w3-top, .w3-bottom {
            z-index: 100; /* added by dsonesuk */
        }

Remove or comment out original w3css JavaScript, it will throw an error because 'mySlides' class no longer exist and prevent new slideshow from working.

Errors: <center> should not be used, its not supported in HTML5,and the closing tag of center surrounding 'Contact The Kick' is misplaced, it should come after the final paragraph.

No charset meta tag such as

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Goodness · September 24, 2016

That worked!

I fixed the errors and will upload the revised page later today.

You can see how/why I am using the <center> tag.

What would I use in it's place to get the same results?

Thanks!

dsonesuk · September 24, 2016

Use 'w3-center' class instead on parent elements you want child text or child inline elements you want to be centred.

Goodness · September 24, 2016

Thanks again.

I've implemented this on my site now.

Here's an observation:

The cross-fade works perfectly when viewing it on my Mac and using either Safari or Firefox.

However, when viewing the site on my iPhone 6 or my iPad 2, the cross-fades only work for the 1st cycle. Once the images come back around to the top, they just swap - no fading at all.

dsonesuk · September 25, 2016

Did it work with original w3css slide code?

Goodness · September 25, 2016

The original fade worked.

dsonesuk · September 25, 2016

comment out these two lines like so

//DS_x[DS_myIndex - 1].style.animationDuration = duration / 1000 + "s";
// DS_x[DS_myIndex - 1].style.animationIterationCount = "infinite";

Make sure this matches time duration

#ds-slide  .DS-mySlides.w3-animate-fading-ds{-webkit-animation:ds_fading 8s infinite;animation:ds_fading 8s infinite ;position: relative; z-index: 50;}

IF that does not work, try this!

        #bkimg {
            border-bottom: 18px solid #fff;
            margin-bottom: -6px;
            margin-top: -100%;
            position: relative;
            z-index: 25;
        }

Apparently there can be a problem using shorthand animation, so we will have do them long hand, also try smaller images less than or equal to 1024 width, may be problem there to.

W3.CSS Cross-Fade Animation?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in