Цикл фона с эффектом оверлея текста

Так что я нашел a really cool example для велосипедного фонового изображения с использованием JavaScript и jQuery.Цикл фона с эффектом оверлея текста

Что было бы лучшим подходом к добавлению эффекта описания оверлейного текста для каждого слайда?

Так, например, каждый слайд также будет иметь текстовое описание, наложенное где-то на каждое изображение с его собственным стилем. Было бы возможно, чтобы этот текст также включался в его собственные эффекты. Таким образом, изображение выцветает, а затем текстовое описание задвигает слева, и так далее

HTML

<body> 

    <div id="background_cycler"> 

     <img class="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/View_from_a_ridge_between_Segla_and_Hesten%2C_Senja%2C_Norway%2C_2014_August.jpg/1920px-View_from_a_ridge_between_Segla_and_Hesten%2C_Senja%2C_Norway%2C_2014_August.jpg" width="1000px" height="1000px" alt="" /> 

     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Amanhecer_no_Hercules_--.jpg/1920px-Amanhecer_no_Hercules_--.jpg" alt="" width="1000px" height="1000px" /> 

     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Giant_Manta_AdF.jpg/1920px-Giant_Manta_AdF.jpg" alt="" width="1000px" height="1000px" /> 
    </div>

Jquery

$('#background_cycler').hide(); 

window.cycleImages = function() { 
    var $active = $('#background_cycler .active'); 
    var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first'); 
    $next.css('z-index', 2); //move the next image up the pile 
    $active.fadeOut(1500, function() { //fade out the top image 
     $active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image 
     $next.css('z-index', 3).addClass('active'); //make the next image the top one 
    }); 
} 

$(window).load(function() { 


    $('#background_cycler').fadeIn(1500); //fade the background back in once all the images are loaded 
    // run every 7s 
    setInterval('cycleImages()', 7000); 
})

CSS

#background_cycler { 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -1; 
} 

#background_cycler img { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    z-index: 1; 
} 

#background_cycler img.active { 
    z-index: 3; 
}

источник

2015-08-05 user1019144

Просто он работать на дивы вместо ГИМ. Поместите свой img внутри div с текстовым тегом прямо перед ним и разместите текст абсолютно. – spongessuck

Вот решение, как Энди, но сохраняя img теги:

https://jsfiddle.net/2y8fo13d/

источник

2015-08-05 19:56:24 spongessuck

Скажите, что я хотел, чтобы облегчение вращения было каким-то образом с небольшим эффектом слева или справа. Как я могу это сделать? – user1019144

Проверьте свойство «переход» css. Вот что вам нужно начать: https://jsfiddle.net/x65qbv88/ – spongessuck

Вместо использования img тегов вы можете использовать более общие теги div, чтобы действовать как слайды. После этого вы можете заполнить их с тем, что содержание вы хотите, проверить это в качестве примера:

https://jsfiddle.net/00gow9Lt/1/

Здесь я использовал div теги с некоторым простым текстом и исходные изображения в качестве фона.

Вы можете создавать каждый контент отдельно с помощью css для другого вида, но для скользящих эффектов для самого текста потребуется значительно больше кода. Для этого я бы предложил более подробно прочитать анимацию jQuery.

источник

2015-08-05 19:51:32

Цикл фона с эффектом оверлея текста

ответ

Смежные вопросы