Я пытаюсь произвести впечатление.js, но мне интересно, есть ли способ изменить цвет фона для некоторых слайдов. Я бы хотел, чтобы мои первые 3 слайда имели другой фон, а затем остальные.Изменить цвет фона для разных слайдов
В отличие от reveal.js, возможно, это не представляется возможным,
Вы можете использовать jimpress http://jmpressjs.github.com/jmpress.js/#/home
здесь демо, в котором фон меняется
http://tympanus.net/Tutorials/SlideshowJmpress/
настроить его в соответствии с вашими требования для снятия слайдовой структуры
У меня есть несколько иной подход. если вы не боитесь немного jquery! Использование JQuery плагин цвета - (https://github.com/jquery/jquery-color) вы можете сделать следующее:
// keep a list of slide ids and desired background colours
var bgs = {
"main": "#FFF",
"other": "#000"
};
// use the 'stepenter' event (step leave is better but requires
//a modification to impress, more on this below)
$(document).ready(function() {
$(document).on('impress:stepenter', function(e) {
var slide = $(e.target).attr("id");
// the jquery-colour plugin allows animating background colours here
$("body").animate({
backgroundColor: bgs[slide]
}, 500);
});
});
В комментариях, я упоминаю stepleave в качестве лучшего решения, как он может быть использован для перехода цвет фона при переключении между слайдами. Однако stepleave еще не выставил nextSlide.
Если вы игра для изменения ядра, то это pull request - это хорошее место для начала!
Вам не нужно прибегать к javascript, чтобы изменить фоновый цвет тега body, когда определенный слайд находится в фокусе.
Для каждого слайда, который вы делаете, произвести впечатление.js требует, чтобы вы дали слайд id;
impress.js затем принимает id и добавляет его в тег body как часть названия класса «построено на лету».
Так что у вас есть три слайда:
<div id="impress">
<div id="first" class="step slide" data-x="-1500" data-y="1200" data-transition-duration="2000">
<p>First</p>
</div>
<div id="second" class="step slide" data-x="0" data-y="1200" data-transition-duration="2000">
<p>Second</p>
</div>
<div id="third" class="step slide" data-x="1500" data-y="1200" data-transition-duration="3000">
<p>Third</p>
</div>
</div>
Теперь, если вы используете инспектор DOM в вашем современном браузере, вы увидите impress.js изменить один из классов CSS на body тега как каждый слайд становится "живой", что дает вам эти классы для работы с:
.impress-on-first.impress-on-second.impress-on-third... где оттиска-на- это начало, и ваш слайд ID конец имени класса.
Используя этот hook impress.js, вы можете установить свойства css тега body для каждого слайда.
/* add css3 transition properties for smooth transitions */
.impress-on-first {
background-color: yellow;
color: #000;
}
.impress-on-second {
background-color: orange;
color: #fff;
}
.impress-on-third {
background-color: red;
color: #fff;
}
Демонстрация
Работа демо здесь в jsbin:
http://jsbin.com/uWUVufO/1/
Пожалуйста, проверьте этот пример http://franciscomurillo.com/fio/#/credits вам нужно, чтобы получить активный шаг от событий, а также изменить фон самостоятельно, как это:
<script>
var api = impress();
api.init();
//Here you can show any background for current slide/step.
window.addEventListener('impress:stepenter', function(event) {
console.log("::: " + event.target.id);
if (event.target.id == "credits") {
console.log("In credits step");
$("#mc_wallpaper").removeClass("fade-out");
$("#mc_wallpaper").addClass("fade-in");
}
}, false);
//Here you can hide any background you showed for current slide/step.
window.addEventListener('impress:stepleave', function(event) {
console.log("impress:stepleave ");
if (event.target.id == "credits") {
console.log("Out of :: credits");
$("#mc_wallpaper").addClass("fade-out");
$("#mc_wallpaper").removeClass("fade-in");
}
}, false);
</script>
Тогда у меня есть код css в style.css:
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
.fade-out {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeOut ease-in 1; /* call our keyframe named fadeOut, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeOut ease-in 1;
animation:fadeOut ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
#mc_wallpaper{
width: 100%;
height: 100%;
background: #fff url(../images/vUYioU8.jpg) no-repeat center center/cover;
opacity: 0;
}
и, наконец, элемент DIV в вашем index.html
<div id="mc_wallpaper"> </div>
Это не только полезно для цвета, но и для любого фона вы хотите. Надеюсь, это поможет!
Cheers!