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

How can I arrange images vertically instead of placing them side by side?

What is the best way to target the shadow DOM host element specifically when it is the last child in the selection?

Issue with jQuery fadeIn() and fadeOut() functions on IE versions 7 and 8

a table in HTML with cells positioned in the center

Determine the total hours and minutes elapsed between two specific dates and times

Check if the data-indices of several div elements are in sequential order using a jQuery function

Tips for including subjects in JSON data

Organize jQuery ajaxComplete event stacks

When a HTML table is generated from imported XML, DataTables will be applied

Send a vanilla JavaScript ajaxForm submission by completing the form

Using app.js in a blade file can cause jQuery functions and libraries to malfunction

When clicked, elevate the element to the top of the window with an offset

Verifying completed fields before submitting

Is it possible to load a route first, and then proceed to load the static files from the public folder in a Node.js application?

Determining the scrollWidth of a div with an absolutely positioned child div

Challenge with scroll function in Internet Explorer JavaScript

Troubleshooting mat-accordion title problem on mobile devices

Is it possible to modify the size of a bullet image in Javascript?

Applying a CSS class to multiple instances of a control in ASP.NET

The JQuery error encountered was due to a missing colon after the property ID