Идеята тук е да се създаде вид на слайдшоу без въртележката. С други думи, правим поредица от изображения, плъзгащи се отляво надясно и повтаряме, след като стигнем края на изображенията. Номерът е, че използваме едно фоново изображение с CSS анимации за (...)
Идеята тук е да се създаде вид на слайдшоу без въртележката. С други думи, правим поредица от изображения, като плъзгаме отляво надясно и повтаряме, след като стигнем края на изображенията.
Номерът е, че използваме едно фоново изображение с CSS анимации, за да го преместим през екрана и да повторим, когато е готово. Това създава илюзията за галерия с изображения, когато наистина използваме едно изображение.
Настройване на HTML
Ето план за това как трябва да бъде структуриран нашият HTML:
Има два елемента, с които работим: този, който извикваме .container, отговарящ на точната ширина на прозореца за гледане, и друг, който извикваме, .sliding-backgroundкойто стои зад .containerи го препълва. По същество използваме .containerкато маска, за да скрием цялата ширина на, .sliding-backgroundдокато се превърта по екрана.
Това означава, че трябва да създадем само два елемента в HTML маркировката:
Позициониране на елементите
Нека да добавим няколко CSS, които ще позиционират правилно двата ни елемента.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Ние .containerизползваме overflowсвойството, което ще скрие всичко, което се съдържа визуално извън него. Мислете за това като за реколта на снимка. Възможно е да има допълнителни неща извън контейнера, но контейнерът ни пречи да го видим.
Това е мястото, където нашето .sliding-backgroundвлиза в игра. Той е настроен на някаква нелепа ширина, която би препълнила повечето прозорци. И това е трикът: трябва да е нещо, което би препълнило контейнера. В този случай използваме донякъде произволно избрана 5076pxширина, която трябва да препълва повечето изгледи на браузъра.
Създаване на фоново изображение
Имаме нужда от изображение, ако създаваме илюзия за галерия със слайдшоу, нали? Това е следващият ни ред на работа.
Спомняте ли си как споменахме, че донякъде произволно избраната 5076pxширина за плъзгащия се фон? Е, това е произволно, но умишлено в смисъл, че се дели добре на 3, което се вписва във времето за една минута, която ще се появи малко по-късно. Това означава, че платното за нашето фоново изображение е 5076 / 3или 1692px. В крайна сметка нашият фон ще се повтори общо три пъти за една минута в безкраен цикъл. Математика за победата!
На 500pxвисочина е наистина произволно. Това може да бъде каквото искате и стига да е и действителният размер на файла на фоновото изображение.
Файлът Photoshop, използван за създаване на фоново изображение за демонстрацията в началото на тази глава, е достъпен за изтегляне, ако търсите начална точка.
След като изображението бъде запазено (и оптимизирано!), Това ще използваме като фоново изображение в CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Страхотен! Това ни дава огромното изображение, което прелива в контейнера и вече може да се използва за превъртане през екрана безкрайно.
Анимиране на фона
Добре, нека накараме това нещо да се движи. Искаме да се движи отляво надясно в цикъл, който се повтаря отново и отново, за да създаде безпроблемен ефект, че изображението продължава вечно.
Първо, нека дефинираме CSS анимацията:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Използваме transformсвойството, за да позиционираме лявото изображение в левия край на контейнера, когато започне анимацията, по следния начин:
По времето, когато анимацията приключи, тя ще трансформира позицията отрицателно (отляво надясно) с количество, което съответства на точната ширина на нашето изображение. И тъй като .sliding-backgrounda е три пъти по-голяма от ширината на действителното изображение, изображението се повтаря три пъти между 0% и 100%, преди да се повтори отново.
Забележка: причината да използваме допълнителна
background-positionна основното transformдвижение, което е много по-ефективно.
Добре, нека закръглим нещата, като извикаме нашата slideанимация в .sliding-backgroundкласа:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )В animationимота инструктира .sliding-backgroundда използвате slideанимация и да го стартирате за една минута в момент, в линейна, безкраен цикъл.
Слагайки всичко заедно
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )