Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Apr 2021
    Posts
    1
    Member #
    62662

    Add fade in and out to background carousel

    Trying to add a soft fade in and out on my simple background carousel. Any ideas please?

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

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

  2.  

  3. #2
    Junior Member
    Join Date
    Apr 2021
    Location
    Toronto
    Posts
    1
    Member #
    62665
    i may be mistaken but I think you need to change the opacity gradually, for example using the ease-in-out CSS prop:

    .fade {
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    }

    .fade:hover {
    opacity: 0.5;
    }

    link

    Otherwise changing from "none" to "block" will be jarring to watch.
    Last edited by knightdesign; Apr 12th, 2021 at 02:10 AM.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 05:29 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com