ScrollMagic — Создание анимации при прокрутке страницы
Что вы узнаете:
- Как создавать анимацию с помощью GreenSock TweenMax;
- Как использовать GreenSock TimelineMax;
- Как создавать несколько анимаций с помощью ScrollMagic;
- Как точно контролировать продолжительность и тайминги анимации.
See the Pen Simple ScrollMagic Tutorial by Alexey (@CreativeSeo33) on CodePen.
1. HTML и CSS
Перед созданием анимации напишем HTML и CSS для нашей страницы.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <section id="one"> <div class="inner innerS1"> <h1>Simple ScrollMagic Tutorial</h1> <p>Learn how to create a <strong>simple scrolling website</strong> using ScrollMagic</p> </div> </section> <section id="two"> <div class="innerText innerS2"> <h2>Why to learn ScrollMagic?</h2> <ul class="features"> <li>It's great for <strong>story telling websites</strong></li> <li>It gives you <strong>endless creative power</strong></li> <li>It's <strong>easy to use</strong> once you get it</li> </ul> </div> </section> <section id="three"> <div class="innerText innerS3"> <h2>When to use ScrollMagic?</h2> <ul class="features"> <li>When building <strong>interactive infographics</strong></li> <li>When introducing your <strong>product or service</strong></li> <li>When sharing your <strong>unique story or timeline</strong></li> </ul> </div> </section> <section id="four"> <div class="innerText innerS4"> <h2>Want to learn more?</h2> </div> <div class="iphone"> <p class="screen screenHat"><img src="img/img_scrollMagic.png" /></p> <p class="screen screenA">A</p> <p class="screen screenB">B</p> <p class="screen screenC">C</p> </div> </section> </body> </html> |
Код содержит 4 секции с уникальными ID.
CSS:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | body { font: 16px/1.5 'Open Sans', Helvetica, Helvetica Neue, Arial, sans-serif; color: rgba(0, 0, 0, 0.9); } html, body { height: 100%; margin: 0; } h1 { padding: 20% 0 0 0; margin: 0; text-align: center; font-size: 36px; color: rgba(0, 0, 0, 0.9); position: relative; } h1:before { content: '❤'; display: block; position: absolute; bottom: 50px; left: 50%; text-align: center; width: 100px; margin-left: -50px; color: #ff466a; font-size: 30px; } p { text-align: center; color: rgba(0, 0, 0, 0.5); } strong { color: rgba(0, 0, 0, 0.9); } section { height: 100%; position: relative; text-align: center; } /* Center aligned first section */ section .inner { margin: 0 auto; max-width: 85%; } /* Content of the following sections aligned next to the iphone */ section .innerText { position: absolute; top: 50%; left: 50%; transform: translate(-100px, -50%); text-align: left; } /* iPhone/Card positioned to the left - this is a default position */ .iphone { width: 290px; height: 600px; border-radius: 10px; position: fixed; top: 50%; left: 50%; transform: translate(-150%, -50%); background-color: #3757D0; background-image: -webkit-radial-gradient(#81bcff, #5d7fce); background-image: radial-gradient(#81bcff, #5d7fce); } /* Centered content of the ScrollMagic card */ .iphone p { font-size: 140px; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.9); } /* Letters hidden by default */ .iphone p.screenA, .iphone p.screenB, .iphone p.screenC { opacity: 0; visibility: hidden; } /* ScrollMagic hat on top of letters */ .iphone p.screenHat { z-index: 2; } .iphone p.screenHat img { max-width: 130px; } /* Bullet list */ .features { list-style: none; margin: 0; padding: 0; color: rgba(0, 0, 0, 0.6); } .features li { position: relative; padding-left: 17px; } /* A heart instead of a bullet */ .features li:before { content: '❤'; font-size: 11px; position: absolute; left: 0; top: 5px; display: block; color: #ff466a; } |
Позиционируем блок .iphone вертикально посередине окна и горизонтально со смещением на 150% на лево. .innerText тоже позиционируется посередине, но смещением на 100px на лево.
Буквы A, B and C (.screenA, .screenB, .screenC) по умолчанию скрыты, анимируем их с помощью ScrollMagic позже.
2. Подключаем ScrollMagic и GSAP плагины
Мы подключаем jQuery, GSAP TweenMax, ScrollMagic and GSAP плагины внизу страницы.
| 1 2 3 4 5 6 7 8 9 10 11 12 | <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 and GSAP plugin --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script> <script src="js/main.js"></script> </body> </html> |
3. Определяем переменные
Сначала мы должны объявить переменные:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | (function($) { var wh = window.innerHeight, $iphone = $('.iphone'), $innerS1 = $('.innerS1'), $innerS2 = $('.innerS2'), $innerS3 = $('.innerS3'), $innerS4 = $('.innerS4'), $screenHat = $('.screenHat'), $screenA = $('.screenA'), $screenB = $('.screenB'), $screenC = $('.screenC'); // Размещайте код здесь })(jQuery); |
Это все элементы, которые мы будем анимировать.
4. Создадим ScrollMagic контроллер
Создаем контроллер и фиксируем элементы, когда они достигают верха экрана.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // инициализация var ctrl = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: 'onLeave' } }); // Создаем сцену $("section").each(function() { new ScrollMagic.Scene({ triggerElement: this, duration: '50%' }) .setPin(this) .addTo(ctrl); }); |
Параметр duration: ‘50%’ определяет, что секция будет фиксироваться, когда достигнет половины высоты экрана.
5. Создадим GreenSock Tween
Создадим GreenSock Tween, чтобы сдвинуть блок .iphone с центра экрана в позицию определенную css стилями.
| 1 2 3 4 5 6 | new ScrollMagic.Scene({ duration: '70%' }) .setTween(iphoneIntro) .triggerElement($('body')[0]) .addTo(ctrl); |
Мы создали iphoneIntro tween, который сдвинет $iphone из позиции yPercent: 50, xPercent: 100 в позицию определенную css.
Вы увидите, что блок .iphone сдвинется из центра на лево.
Далее необходимо настроить запуск анимации перемещения блока при скролле страницы.
Создадим объект ScrollMagic:
[crayon-6478bcd07b37d398867970 ] new ScrollMagic.Scene({ duration: '70%' }) .setTween(iphoneIntro) .triggerElement($('body')[0]) .addTo(ctrl);
[/crayon]
Используя .setTween(iphoneIntro) привяжем tween контроллеру прокрутки.
Теперь вы увидите, что блок .iphone перемещается при прокрутке страницы.
Это простейшая GSAP – ScrollMagic анимация.
Далее нужно анимировать эффект исчезновения текста в заголовке. Для этого необходимо использовать timeline.
6. Создадим простой GreenSock Timeline
Если надо анимировать два элемента одновременно или в последовательности, то необходимо использовать TimelineMax().
var iphoneIntroTl = new TimelineMax();
| 1 2 3 | iphoneIntroTl .from($iphone, 1, {yPercent: 50,xPercent: 100, ease: Power4.easeInOut}) .to($innerS1, 0.5, {opacity: 0, yPercent: -5, scale: 0.98}, '0'); |
Чтобы убедиться, что оба твина работают одновременно разместим ‘0’ в конце.
7. Анимируем шляпу
Создадим несколько таймлайнов и ScrollMagic сцен.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | var iphoneContentHat = new TimelineMax(); iphoneContentHat .to($screenHat, 1, {yPercent: -50, ease: Power4.easeOut}) .fromTo($screenA, 1, {yPercent: 20, autoAlpha: 0, scale: 0.8}, {yPercent: 0, autoAlpha: 1, scale: 1, ease: Power4.easeOut}, '0') .from($innerS2, 1, {autoAlpha: 0}, '-=0.3'); new ScrollMagic.Scene({ offset: wh*0.6, triggerElement: $('body')[0], duration: '80%' }) .setTween(iphoneContentHat) .addTo(ctrl); |
Шляпа будет двигаться вверх и одновременно будет появляться буква А.
Первые для элемента в таймлайне будет анимироваться одновременно. Третий элемент начнет анимироваться с задержкой 0.3 с.
Благодаря элегантному синтаксису GreenSock вы можете точно настроить даже самые сложные последовательности анимациий.
Смещение этой анимации составляет 60% от высоты экрана (offset: wh*0.6). Это означает, что шляпа начнет анимироваться только после того как элемент .iphone достигнет своего положения слева (смещение этой анимации 50%).
8. Анимируем буквы A, B, C
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | var iphoneContent1Tl = new TimelineMax(); iphoneContent1Tl .to($screenA, 0.3, {yPercent: -30, autoAlpha: 0, ease: Power4.easeInOut}) .fromTo($screenB, 1, {yPercent: 20, autoAlpha: 0}, {yPercent: 0, autoAlpha: 1, ease: Power4.easeInOut}) .from($innerS3, 1, {autoAlpha: 0}, '-=0.7'); new ScrollMagic.Scene({ triggerElement: $('.innerS2 h2')[0], duration: '50%' }) .setTween(iphoneContent1Tl) .addTo(ctrl); var iphoneContent2Tl = new TimelineMax(); iphoneContent2Tl .to($screenB, 0.3, {yPercent: -30, autoAlpha: 0, ease: Power4.easeInOut}) .fromTo($screenC, 1, {yPercent: 20, autoAlpha: 0}, {yPercent: 0, autoAlpha: 1, ease: Power4.easeInOut}) .from($innerS4, 1, {autoAlpha: 0}, '-=0.7'); new ScrollMagic.Scene({ triggerElement: $('.innerS3 h2')[0], duration: '50%' }) .setTween(iphoneContent2Tl) .addTo(ctrl); |
iphoneContent1Tl таймлайн сначала анимирует букву А ($screenA), которая исчезает, затем анимируется буква B ($screenB), которая появляется.
Второй таймлайн iphoneContent2Tl анимирует букву B, которая исчезает и затем появляется буква C.
See the Pen Simple ScrollMagic Tutorial by Alexey (@CreativeSeo33) on CodePen.
(4 votes, average: 5,00 out of 5)
Загрузка...
