Я большой поклонник show.js и использовал его почти для всех выступлений, которые я когда-либо читал. Это полнофункциональная структура представления с множеством изящных функций, таких как заметки докладчиков, полноэкранный режим, подсветка синтаксиса кода и т. Д.
Но иногда мне просто нужно набросать горстку информации на экран на местной встрече или в офисе. Благодаря тому, что я стал веб-разработчиком, мне гораздо удобнее управлять и настраивать макеты с помощью CSS, чем с заостренным щелчком интерфейса.
Я наткнулся на реализацию Ondřej raára для чистых CSS-слайдов и копался в его кодовой базе, чтобы посмотреть, что я мог бы использовать для своих собственных разбавленных HTML-слайдов. Для чистой реализации CSS, она довольно полнофункциональная, и вы должны проверить это независимо.
Содержание статьи
Псевдокласс : target
Мне нужен был хороший способ перехода от слайда к слайду, и я заметил, что Ондржей использовал псевдокласс : target . Это селектор, который соответствует элементу с идентификатором, совпадающим с фрагментом текущего URL, который обозначается знаком # .
Например, если на вашем сайте есть элемент с идентификатором динозавр вы можете перейти к этому элементу из адресной строки, используя URL-адрес, https://www.example.com /index.html#dinosaur. И если это текущий URL, следующее правило CSS будет применяться к элементу #dinosaur :
#dinosaur: target {
цвет фона: зеленый;
}
И с этим мы можем позволить начать махинации.
Структура разметки
Структура HTML может быть довольно простой.
Каждый слайд может быть разделом, который занимает всю высоту области просмотра. И мы можем достичь этого относительно легко, используя единицы просмотра. Единицы видового экрана, как следует из их названия, являются единицами CSS, относящимися к размеру видового экрана.
У нас есть vw vh vmax и vmin . В целях создания HTML-слайдера релевантной единицей здесь является vh или высота области просмотра. Установив высоту 100vh для каждого раздела, они всегда будут высотой области просмотра, независимо от того, как вы изменили размер браузера.
Каждый слайд имеет уникальный идентификатор, на который можно ориентироваться, который будет механизмом управления слайдами.
Так где же во всем этом псевдокласс : target ? Погоди, мы к этому подходим. Ранее мы делали переход браузера в верхнюю часть каждого раздела, вы все равно можете прокручивать вверх и вниз, делая презентацию похожей на веб-страницу, а не на слайд-колоду.
Если вы этого хотите, прекрасно. Честно говоря, вы закончили день. Но допустим, мы не хотим, чтобы эта полоса прокрутки была активирована. Мы хотим, чтобы активный слайд в окне просмотра и на этом все. Тогда в игру вступает псевдокласс : target .
Укладка слайдов
Но прежде чем углубляться в это, давайте представим, как поведет себя слайд-колода.
Мы будем стилизовать секции так, чтобы на них был виден только один слайд каждый раз, накладывая их друг на друга, а затем используйте фрагменты URL, чтобы указать, какой слайд должен быть активным.
Так. Сложив вдоль z-index а? Теперь у нас есть более 1 варианта для достижения чего-то подобного. Давайте рассмотрим проверенную и проверенную технику положения и z-индекса. Свойство z-index применяется только к позиционированным блокам, которые являются блоками, которые имеют значение position отличное от значения по умолчанию static .
В настоящее время существует 4 других значения для позиции а именно относительный абсолютный фиксированный и липкий , Липкий является новым дополнением. Элад Шехтер написал отличную детальную статью о том, как она работает, поэтому прочитайте ее.
Согласно спецификации:
Корневой элемент формирует корневой контекст стека. Другие контексты суммирования генерируются любым позиционированным элементом (включая относительно позиционированные элементы), имеющим вычисленное значение «z-index», кроме «auto».
Поэтому, когда вы применяете свойство позиции к блоку, вы можете использовать свойство z-index для настройки уровня его стека. Установка позиции : абсолютное значение для блока удаляет его из нормального потока и вызывает его явное смещение относительно содержащего его блока.
Содержимое абсолютно позиционированного элемента не обтекает другие блоки, если у них более высокий уровень стека, они просто будут покрывать все, что находится ниже них.
Чтобы сложить их все вместе, примените позицию : абсолютную и ширину: 100% на каждом слайде. Некоторые из вас могут подумать, в чем разница между шириной : 100% для абсолютно позиционированного элемента и настройкой всех значений смещения на 0 ? (например, top: 0; right: 0; bottom: 0; left: 0 ) Хорошо, у кого-то еще был точно такой же вопрос.
Кит Дж. Грант проанализировал разницу между этими двумя подходами и обнаружил, что если вы используете ширину : 100% с дополнительными полями вокруг элемента, он сместится за пределы своего позиционного предка.
Но так как я хочу, чтобы мои слайды заполняли область просмотра, я вообще не использую поля, поэтому я предпочел бы сделать одну строку, а не 4. 🤷
Следующим шагом является настройка z-index для активного слайда так, чтобы он был выше, чем для всех других неактивных слайдов, с помощью нашего селектора : target .
section {
высота: 100vh;
ширина: 100%;
положение: абсолютное;
z-индекс: 0;
}
раздел: цель {
z-индекс: 1;
}
Некоторые люди по-разному обрабатывают z-индексы, используя номиналы 10 или 100, но, честно говоря, между 2 элементами, кто выигрывает с более высоким целочисленным значением, независимо от того, равен он 1 или 1000.
Посыпать анимацией
Чтобы добавить некоторый вид профессионализма к этой работе (я шучу?), Я думаю, что некоторые слайд-переходы в порядке. CSS также предлагает прекрасный набор вариантов анимации для этого. Вы можете вращать, масштабировать, перемещать и вставлять, и все это с помощью CSS-преобразований.
Если вы посмотрели на слайды Ондржея, он использовал эффект поворота, так что давайте попробуем это. Для этого существует 3 состояния положения, до входа в область просмотра активных в окне просмотра и покинули область просмотра .
По умолчанию источник преобразования составляет 50% 50% , что означает, что элемент будет вращаться вокруг своего центра. Чтобы угол поворота был таким, как на рисунке, установите значение 0 0 . Все слайды начинают поворачиваться на 90 градусов по часовой стрелке за пределы области просмотра, в то время как выходящие слайды будут поворачиваться на 90 градусов против часовой стрелки вверх и наружу.
Мы можем использовать селектор брата для нацеливания слайдов, которые следуют за активным слайдом, и добавить некоторые значения перехода, чтобы анимация выглядела более плавной:
section {
высота: 100vh;
ширина: 100%;
положение: абсолютное;
z-индекс: 0;
преобразование: вращение (90 градусов);
источник преобразования: 0 0;
переход: преобразование 1 с, непрозрачность 0,8 с;
}
раздел: цель {
преобразование: вращение (0 градусов);
z-индекс: 1;
}
section: target ~ section {
непрозрачность: 0;
преобразовать: повернуть (-90 градусов);
}
Когда слайд поворачивается из области просмотра, он каким-то образом запускает полосу прокрутки. Я не выяснил точную причину этого, хотя знаю, что решение состоит в том, чтобы добавить переполнение : скрытый к элементу body . Я должен исследовать это еще немного, потому что этого не происходит, когда я использую перевод.
Подведение итогов
Еще одна вещь, на которую следует обратить внимание, это то, что при первой загрузке слайдов не будет сработать ни один фрагмент URL, то есть ни один из ваших слайдов не будет активным. Чтобы обойти эту проблему, добавьте ссылку на первый слайд, который будет отображаться при первой загрузке, убедившись, что это также позиционированный элемент.
Не стесняйтесь пробовать другие CSS-преобразования для большего количества переходов слайдов, если поворот не соответствует вашему стилю. Но если ваши требования к слайдам достаточно просты, почему бы не попробовать что-то подобное? Вы можете даже выбросить его на несколько бесплатных статических хостов сайта, и он будет доступен везде, куда вы идете. 😎
Для живой реализации этого посмотрите слайды, используемые для введения Talk.CSS
Загрузка...
