Идеја овде је створити изглед презентације без рингишпила. Другим речима, правимо низ слика које се превлаче слева удесно и понављамо када се дође до краја слика. Трик је у томе што користимо једну позадинску слику са ЦСС анимацијама да бисмо (...)
Идеја овде је створити изглед презентације без рингишпила. Другим речима, правимо низ слика које се превлаче слева удесно и понављамо када се дође до краја слика.
Трик је у томе што користимо једну позадинску слику са ЦСС анимацијама да бисмо је премештали по екрану и понављали када је то готово. Ово ствара илузију галерије слика када заиста користимо једну слику.
Постављање ХТМЛ-а
Ево плана за структурирање нашег ХТМЛ-а:
Постоје два елемента с којима радимо: онај који зовемо .containerодговара тачној ширини оквира за приказ и други који зовемо .sliding-backgroundналази се иза .containerи прелива га. У суштини користимо .containerмаску као маску како бисмо сакрили пуну ширину слике .sliding-backgroundдок се креће по екрану.
То значи да у ХТМЛ ознаци треба да креирамо само два елемента:
Позиционирање елемената
Хајде да додамо неки ЦСС који ће правилно поставити наша два елемента.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Ми .containerкористимо overflowсвојство које ће сакрити све што је визуелно садржано изван њега. Замислите то као усев на фотографији. Можда има додатних ствари изван контејнера, али контејнер нас спречава да то видимо.
Ту наши .sliding-backgroundнаступају. Постављена је на неку смешну ширину која би преплавила већину приказа. И у томе је трик: требало би да буде нешто што би преплавило контејнер. У овом случају користимо донекле произвољно изабрану 5076pxширину која би требало да преплави већину приказа претраживача.
Креирање слике у позадини
Слика нам треба ако стварамо илузију галерије слајдова, зар не? То је наш следећи редослед пословања.
Сећате се како смо споменули да је помало произвољно изабрана 5076pxширина клизне позадине? Па, произвољно је, али намерно у смислу да је лепо дељиво са 3, што се уклапа у време за минутну петљу која ће се појавити мало касније. То значи да је платно за нашу позадинску слику 5076 / 3или 1692px. На крају, наша позадина ће се поновити укупно три пута у једном минуту у бесконачној петљи. Математика за победу!
500pxВисина је заиста произвољна. То може бити све што желите и док год је то и стварна величина датотеке позадинске слике.
Датотека Пхотосхоп која се користи за стварање позадинске слике за демонстрацију на почетку овог поглавља доступна је за преузимање ако тражите полазну тачку.
Једном када је слика сачувана (и оптимизована!), Ово ћемо користити као позадинску слику у ЦСС-у:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Сјајно! То нам даје сјајну слику која преплављује контејнер и сада може да се користи за бескрајно померање по екрану.
Анимирање позадине
Добро, хајде да покренемо ову ствар. Желимо да иде с лева на десно у петљи која се понавља изнова и изнова како би се створио бешаван ефекат да слика траје заувек.
Прво, дефинишемо ЦСС анимацију:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )transformСвојство користимо за позиционирање леве слике на леву ивицу контејнера када започне анимација, на следећи начин:
Док се анимација заврши, положај ће трансформисати негативно (с лева на десно) за износ који одговара тачној ширини наше слике. А, пошто .sliding-backgroundје три пута већа ширина стварне слике, слика се понавља три пута између 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); ) )