Блог о веб-разработке > Animation > ScrollMagic инструкция – полноэкранное слайдшоу

ScrollMagic инструкция – полноэкранное слайдшоу

В этом уроке по ScrollMagic мы создадим простое прокручиваемое слайдшоу с полноэкранными секциями.

Вы узнаете как блокировать элементы, когда достигнут определённой точки и познакомитесь с терминами triggerHook, triggerElement, setPin, addIndicators and setClassToggle.

Демо

Вы узнаете:

как фиксировать элементы в нужных местах
как использовать индикаторы для отладки отладки анимации во время прокрутки
как изменять стили элементов во время прокрутки с помощью ScrollMagic
и многое другое

Давайте напишем простой HTML код для наших 4 секций.

1. HTML and CSS для 4 секций

Создайте 4 элемента section и присвойте им уникальные ID. Они будут использованы для моделирования.

HTMl разметка будет выглядеть так:

<section id="one">
      <div class=“inner”>
        <h1>Slide Title</h1>
        <p>Slide description text goes here.</p>
      </div>
    </section>
    <section id="two">…</section>
    <section id="three">…</section>
    <section id="four">…</section>

<h1>Slide Title</h1>

<p>Slide description text goes here.</p>

</div>

</section>

Класс .inner содержит текст и имеет значение max-width (максимальная ширина) 85%, чтобы предотвратить касание текста краев браузера на небольших экранах.

Наш CSS:

/* Sass переменные для цвета */
$blue: #0089cd;
$white: #ffffff;   
 
/* Сделаем элемент body во всю высоту окна */
html, body {
    height: 100%;
    margin: 0;
}
h1 {
    padding: 20% 0 0 0;
    margin: 0;
    text-align: center;
    font-size: 20px;
}
p {
    text-align: center;
    color: transparentize($white, 0.5);
}
strong {
    color: #fff;
}
 
/* Сделаем высоту каждой секции равной высоте окна */
section {
    height: 100%;
    color: white;
    position: relative;
    text-align: center;
 
    /* Разместим контент по центру секций */
    .inner {
        margin: 0 auto;
        max-width: 85%;
    }
}
 
/* Фоновые цвета для каждой секции */
section#one { background-color: $blue; }
section#two { background-color: darken($blue, 10%); }
section#three { background-color: lighten($blue, 5%); }
section#four { background-color:  darken($blue, 10%); }

/* Sass переменные для цвета */

$blue: #0089cd;

$white: #ffffff;

/* Сделаем элемент body во всю высоту окна */

html, body {

height: 100%;

margin: 0;

}

h1 {

padding: 20% 0 0 0;

margin: 0;

text-align: center;

font-size: 20px;

}

p {

text-align: center;

color: transparentize($white, 0.5);

}

strong {

color: #fff;

}

/* Сделаем высоту каждой секции равной высоте окна */

section {

height: 100%;

color: white;

position: relative;

text-align: center;

/* Разместим контент по центру секций */

.inner {

margin: 0 auto;

max-width: 85%;

}

/* Фоновые цвета для каждой секции */

section#one { background-color: $blue; }

section#two { background-color: darken($blue, 10%); }

section#three { background-color: lighten($blue, 5%); }

section#four { background-color: darken($blue, 10%); }

2. Подключаем ScrollMagic

Подключите jQuery и ScrollMagic в низ вашего html документа. Если вы знакомы с Vannila JS, то вам не нужно подключать jQuery. Начиная с версии 2.0 ScrollMagic не требует подключения jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>window.jQuery || document.write(‘<script src="js/vendor/jquery-1.11.0.min.js"><\/script>’)</script>
 
    <!— Include ScrollMagic —>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
    <!— Include main.js for our custom code —>
    <script src="js/main.js"></script>
	</body>
	</html>

<!— Include ScrollMagic —>

<!— Include main.js for our custom code —>

</body>

</html>

main.js – файл, в который будет добавлен код ScrollMagic.

Создайте пустой файл main.js в папке js.

3. Создадим контроллер ScrollMagic

Первая вещь, которую мы должны сделать, создать ScrollMagic контроллер в файле main.js.

Используем jQuery опции:

/* Используем jQuery */
(function($) {
 
    // Init ScrollMagic
    var ctrl = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: 'onLeave'
        }
    });
 
})(jQuery);

/* Используем jQuery */

(function($) {

// Init ScrollMagic

var ctrl = new ScrollMagic.Controller({

globalSceneOptions: {

triggerHook: 'onLeave'

}

});

})(jQuery);

Выражаясь просто, этот код означает: Эй скроллбар, анимируй, что я скажу, и когда скажу.

Для triggerHook существуют другие установки: onEnter, onCenter (default), onLeave.

4. Создадим ScrollMagic сцену и фиксируемые секции

Мы хотим, чтобы каждая секция фиксировалась достигая верха окна. Для этого мы используем функцию jQuery .each().

// Создаем сцену
	$("section").each(function() {
 
    new ScrollMagic.Scene({
        triggerElement: this
    })
    .setPin(this)
    .addTo(ctrl);
 
	});

// Создаем сцену

$("section").each(function() {

new ScrollMagic.Scene({

triggerElement: this

})

.setPin(this)

.addTo(ctrl);

});

По умолчанию, триггер ScrollMagic позиционируется в середине окна, но мы установили параметр triggerHook: onLeave, поэтому секции будут фиксироваться достигая верха окна.

this ссылается на каждую секцию в отдельности.

triggerElement: this говорит скроллбару: Эй скроллбар, когда секция достигнет верха страницы зафиксируй ее.

Если вы всё сделали правильно, то вы должны увидеть, что каждая секция фиксируется вверху страницы перекрывая предыдущую при прокрутке страницы.

5. Используем ScrollMagic индикаторы для простой отладки

Наш пример очень простой, но давайте посмотрим, как подключить и настроить индикаторы для отладки более сложных анимаций.

Подключите файл debug.addIndicators.min.js ниже ScrollMagic.js.

Добавим в файл main.js функцию .addIndicators

$("section").each(function() {
 
		    var name = $(this).attr('id');
		 
		    new ScrollMagic.Scene({
		        triggerElement: this
		    })
		    .setPin(this)
		    .addIndicators()
		    .addTo(ctrl);
		 
		});

$("section").each(function() {

var name = $(this).attr('id');

new ScrollMagic.Scene({

triggerElement: this

})

.setPin(this)

.addIndicators()

.addTo(ctrl);

});

Вы должны увидеть, что справой стороны окна появились индикаторы позиций.

Вы можете изменить цвет этих элементов:

.addIndicators({
		    colorStart: "rgba(255,255,255,0.5)",
		    colorEnd: "rgba(255,255,255,0.5)", 
		    colorTrigger : "rgba(255,255,255,1)",
		    name:name
		})

.addIndicators({

colorStart: "rgba(255,255,255,0.5)",

colorEnd: "rgba(255,255,255,0.5)",

colorTrigger : "rgba(255,255,255,1)",

name:name

})

Этот код изменит цвет индикаторов на белый.

6. Используем loglevel() для более детальной отладки

Если индикаторов недостаточно, вы можете получить более подробную информацию через консоль.

Добавьте .loglevel в main.js:

.setPin(this)
.addIndicators()
.loglevel(3)
.addTo(ctrl);

.setPin(this)

.addIndicators()

.loglevel(3)

.addTo(ctrl);

Когда вы откроете консоль, то увидите подробную информацию о состоянии анимации во время прокрутки.

7. Изменяем стиль тега body во время прокрутки страницы

Последняя вещь, которую мы рассмотрим – как изменить класс любого элемента во время прокрутки страницы.

Давайте используем метод .setClassToggle:

// получаем высоту окна
		var wh = window.innerHeight;
		 
		new ScrollMagic.Scene({
		  offset: wh*3
		})
		.setClassToggle("section#four", "is-active")
		.addTo(ctrl);

		Это означает, что section#four получает класс .is-active, когда 
		Если вам необходимо присвоить несколько классов, просто впишите их через пробел.
		section#four {
		  background-color:  darken($blue, 10%);
		  transition: all 0.4s linear;
		  &.is-active {
		    background-color: #222222;
		  }
		}