Gradually blend the section of the picture with an image banner after 20 seconds

Question

Gradually blend the section of the picture with an image banner after 20 seconds

I have a background image that rotates every 20 seconds, fading in and out. The images consist of a logo at the top-left corner and a person image at the right side from top to bottom. However, I want only the person image to fade in and out while keeping the logo fixed without any fading effect.

My question is how can I apply fadeIn and fadeOut effects only to a portion of the background image?

Here's my current jQuery code:

    $("DIV#background IMG").eq(0).fadeIn(1000, function(){
        setTimeout("changeBackground(0)",20000);
    });

    changeBackground = function (i){
        curr_index = i;
        nex_index = ((i + 1) > 3 ) ? 0 : i + 1;
        
        $("DIV#background IMG").fadeOut(1000)
        $("DIV#background IMG").eq(nex_index).fadeIn(1000, function(){
            setTimeout("changeBackground(nex_index)",20000);
        });
    }

Note: The above code is correct and working successfully.

Thanks.

jquery html css slideshow fade

Answer 1

Answer №1

If you're looking to create a slideshow of images using jQuery, the jQuery Cycle plugin is a great option. You can find more information about it here. Simply place all your images in a single container element and then apply the cycle() function to start the cycling effect.

This plugin smoothly transitions from one image to another, making it appear as though they are fading on top of each other. This makes it ideal for displaying images with consistent logo placement.

Alternatively, you can have your logo in a separate transparent .png file and position it using position:absolute over your rotating images for a more customized look.

Answer 2

If you're looking to create a slideshow of images using jQuery, the jQuery Cycle plugin is a great option. You can find more information about it here. Simply place all your images in a single container element and then apply the cycle() function to start the cycling effect.

This plugin smoothly transitions from one image to another, making it appear as though they are fading on top of each other. This makes it ideal for displaying images with consistent logo placement.

Alternatively, you can have your logo in a separate transparent .png file and position it using position:absolute over your rotating images for a more customized look.

Answer 3

Answer №2

Integrate the jQuery plugin jquery-rotate. Once you have it set up, you can utilize the following functions:

.rotate(angle,[whence=relative])
.rotateLeft([angle=90])
.rotateRight([angle=90])

Here is an example implementation in your code:

$("DIV#background IMG").fadeOut(1000).rotateRight([angle=360]);

Please note that there should be a semicolon at the end of the second line.

If you are looking for a rotation effect like a Banner Rotator, then use this code:

$("DIV#background IMG").fadeOut(1000).attr('src', 'newimage.png').fadeIn(1000);

You may consider defining the time as a variable for flexibility between slides:

var time = 500; // Set to 500 for a smooth transition (500ms fadeIn + 500ms fadeOut)
$("DIV#background IMG").fadeOut(time).attr('src', 'newimage.png').fadeIn(time);

Complete Code Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Banner Rotate</title>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
        <script type="text/javascript">
            function changeBG()
            {
                var d = new Date();
                $(".background img").fadeOut(500).attr('src', 'http://lorempixel.com/100/100/?' + d.getMilliseconds()).fadeIn(500);
            }
            $(document).ready(function(){
                setInterval('changeBG()', 1500);
            });
        </script>
    </head>
    <body>
        <div class="background">
            <img src="http://lorempixel.com/100/100/" alt="" />
        </div>
        <a href="#" onclick="changeBG(); return false;">Change</a>
    </body>
</html>

I trust this information proves beneficial! :)

Answer 4

Integrate the jQuery plugin jquery-rotate. Once you have it set up, you can utilize the following functions:

.rotate(angle,[whence=relative])
.rotateLeft([angle=90])
.rotateRight([angle=90])

Here is an example implementation in your code:

$("DIV#background IMG").fadeOut(1000).rotateRight([angle=360]);

Please note that there should be a semicolon at the end of the second line.

If you are looking for a rotation effect like a Banner Rotator, then use this code:

$("DIV#background IMG").fadeOut(1000).attr('src', 'newimage.png').fadeIn(1000);

You may consider defining the time as a variable for flexibility between slides:

var time = 500; // Set to 500 for a smooth transition (500ms fadeIn + 500ms fadeOut)
$("DIV#background IMG").fadeOut(time).attr('src', 'newimage.png').fadeIn(time);

Complete Code Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Banner Rotate</title>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
        <script type="text/javascript">
            function changeBG()
            {
                var d = new Date();
                $(".background img").fadeOut(500).attr('src', 'http://lorempixel.com/100/100/?' + d.getMilliseconds()).fadeIn(500);
            }
            $(document).ready(function(){
                setInterval('changeBG()', 1500);
            });
        </script>
    </head>
    <body>
        <div class="background">
            <img src="http://lorempixel.com/100/100/" alt="" />
        </div>
        <a href="#" onclick="changeBG(); return false;">Change</a>
    </body>
</html>

I trust this information proves beneficial! :)

Gradually blend the section of the picture with an image banner after 20 seconds

Here's my current jQuery code:

Answer №1

Answer №2

Complete Code Example

Similar questions

Tips for preloading an ENTIRE webpage

Encountering Empty Output When Trying to Save HTML Form Data to Database

`On mobile devices, the Bootstrap button no longer displays focus changes once clicked.`

Is there a way to display a foundation.css drop-down menu using jQuery?

Transmit an echo using AJAX

Arranging Check Boxes Side by Side

Customize Material-UI Icons styles in React app

Accessing Angular templates scope after the document is ready using angular.element()

Using Bootstrap's card component, design a grid layout for your website

IE browser transparency effect on canvas

Should we avoid using 'RedirectToAction' with AJAX POST requests in ASP.NET?

Scrolling with jQuery to create a fixed navigation bar

Stay tuned for Quasar's input validation event notifications

Choose the first element of its type and disregard any elements nested within it

Retrieving JSON data and transforming it into HTML

difficulty with parsing JSON in jQuery when referencing an external file containing the same data

Steps for displaying an HTML table in Excel by clicking on a button

Is it possible in PHP to automatically retrieve all data posted through POST and uncheck multiple checkboxes simultaneously?

Setting the image source for each image in a table using VB.net

Exploring the implementation of the jquery .counterUp function within Angular 5