В този урок ще ви покажем как да създадете много фонови изображения, които ще се заменят едно с друго, докато превъртате страницата.
Днес в интернет можете да видите много сайтове с паралакс ефект. Подобен ефект може да се постигне чрез CSS. На теория просто трябва да приложите ефекта на паралакса към фоновите изображения. За да направите това, проверете CSSИмот фон-прикачен файл.
Създаване на структура
HTMLмного просто: редуващи се елементи
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
Стилове
Стойността по подразбиране за свойството background-attachment е scroll, което означава, че фонът се превърта по протежение на елемента. Ако зададете стойността на фиксирана, тогава позицията ще бъде фиксирана.
Body, html, main ( /* важно */ височина: 100%; ) .cd-fixed-bg ( min-height: 100%; background-size: cover; background-attachment: fixed; background-repeat: no-repeat ; фонова позиция: център център; ) .cd-fixed-bg.cd-bg-1 (background-image: url("../img/cd-background-1.jpg"); bg.cd-bg-2 ( фоново изображение: url("../img/cd-background-2.jpg"); ) .cd-fixed-bg.cd-bg-3 ( фоново изображение: url( "../img/cd-background-3.jpg" ) .cd-fixed-bg.cd-bg-4 ( фоново изображение: url("../img/cd-background-4.jpg" ); .cd-scrolling-bg ( min-height: 100%; )
Този кратък урок ще бъде за това как да създадете красив фиксиран фон на вашия уебсайт (или на страница от една страница), който плавно ще преминава от едно изображение към друго, докато потребителят превърта страницата. CSS има свойството background-attachment: fixed, което ви позволява да коригирате фоновото изображение. Тоест, когато превъртате страницата, тя няма да се превърта със страницата. Но в CSS няма свойство, което да ни позволи да променяме изображения при превъртане, така че ще използваме Javascript.
Фиксиран фон за сайта
Може да не разбирате за какво пиша, така че гледайте демонстрацията и сами ще видите този красив ефект:
Изтегли
Как да направите променящ се фон за уебсайт?
HTML
Ще започнем с дефиниране на HTML структурата на страницата, за която правим този ефект:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id = "cbp-fbscroller" class = "cbp-fbscroller" > |
В етикета дефинирахме блокова навигация с различни изображения. На това с HTML маркиранезавършен. Нека да преминем към стиловете.
CSS
Що се отнася до стиловете, тук няма много от тях.
Ние правим височината на блока възможно най-висока. Това е височината на прозореца на браузъра на потребителя.
| 1 2 3 4 5 6 | html, тяло, .container, .cbp-fbscroller, .cbp-fbscroller раздел (височина: 100%;) |
| 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 | .cbp-fbscroller > nav (позиция: фиксирана; /* менюто е винаги на едно и също място */ z-индекс: 9999; /* нищо не трябва да припокрива менюто */дясно: 100px; /* това е 100 пиксела от десния край */отгоре: 50%; /* и вертикално в средата на страницата */ширина: 26px; /* ширина на менюто */ -webkit-transform : translateY(-50% ) ; -moz-трансформиране: translateY(-50%); -ms-трансформация: translateY(-50%); трансформиране: translateY(-50%); ) /* по-долу са стиловете за всеки елемент (връзка) в менюто */.cbp-fbscroller > nav a (дисплей: блок; позиция: относителна; z-индекс: 9999; цвят: прозрачен; ширина: 26px; височина: 26px; контур: няма; марж: 25px 0; border-radius: 50%; рамка: 4px плътен #fff ; |
Коментирах някои свойства, мисля, че е ясно кое свойство за какво отговаря. Ако не съвсем, пишете в коментарите! 🙂
В резултат на това ще получим следното меню:
| 1 2 3 4 5 6 7 8 9 10 | .cbp-fbscroller секция (позиция: относителна; фонова позиция: горен център; фоново повторение: без повторение; фонов размер: корица;) .no-touch .cbp-fbscroller секция (фоново прикачване: фиксирано;) |
Остава да зададете необходимите изображения за съответните блокове:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #fbsection1 (фоново изображение: url (../images/1 .jpg) ;) #fbsection2 (фоново изображение: url (../images/2 .jpg) ;) #fbsection3 (фоново изображение: url (. ./images/3 .jpg) ;) #fbsection4 (background-image: url (../images/4 .jpg) ;) #fbsection5 (background-image: url (../images/5 .jpg) ;) |
Javascript остава!/скрипт ><скрипт >$(функция() (cbpFixedScrollLayout.init(); ));</скрипт>
Заключение
Това е всичко. Това е красив ефект и мисля, че няма да е трудно да го вмъкнете в уебсайта си! Желая ви успех, ако имате проблеми с инсталацията, пишете в коментарите :)
P.S.: Промених дизайна на сайта. Според мен е по-модерно и удобно.
В този урок ще проучим подробно технологията за създаване на адаптивно фоново изображение, което ще заема цялата зона за гледане в браузъра при всяка разделителна способност. И ние ще използваме CSS - свойството background-size. Без JavaScript:
ПРИМЕР
ИЗТЕГЛЯНЕ НА ИЗТОЧНИЦИ
Примери за използване на адаптивни фонови изображения
Днес сайтовете, в които фоновото изображение покрива цялата показана област на страницата, са много популярни.
По-долу са някои от тези уебсайтове:
Ветроходен колектив
Дигитална телепатия
Ресторант Мариан
Ако искате да постигнете подобен „изглед“ във вашия проект, вие сте на прав път.
Основни понятия
Ето нашия план за игра.
Използвайте свойството background-size, за да покриете целия прозорец
Свойството CSS background-size може да приеме стойността cover. Стойността на покритието инструктира браузъра автоматично и пропорционално да мащабира фоновото изображение по дължина и ширина, така че да остане равно или по-голямо от ширината/височината на прозореца за изглед.
Използване на медийна заявка за получаване на по-малка версия на фоново изображение за мобилни устройства
За да намалим времето за зареждане на страницата при малки резолюции на екрана, ще използваме медийна заявка, за да получим по-малка версия на фоновото изображение. Но това не е необходимо и може да се пропусне. Тази технологияработи чудесно и без него.
Но все пак използването на по-малки версии на фона за мобилни устройства не е лоша идея и ще обясня защо.
Изображението, което ще се използва в примера, е с размер около 5500 на 3600px.
С тази разделителна способност имаме предимството, че постигаме покритие на цялата област на гледане на повечето широкоформатни монитори, произвеждани в момента, но имаме недостатъка на размера на изображението. Това е около 1,7 MB.
Оставянето на толкова много място за зареждане само на фоново изображение не е добра идея в никакъв случай, а в случай на мобилни устройства е много лоша идея. В допълнение, такава резолюция е просто ненужна на екрани с ниска разделителна способност ( Ще ви разкажа повече за това по-късно).
Така. Да започваме.
HTML
По-долу е всичко необходимо от маркирането:
...Съдържанието на вашата страница...
Ще присвоим фоново изображение на елемента body и по този начин ще постигнем пълно покритиезаден план.
Тази техника обаче ще работи върху всеки блоков елемент (като div или form). В случай, че ширината-височината на вашия блок контейнер е подвижна, фоновото изображение също ще се преоразмери, за да запълни цялата област на контейнера.
CSS
Ние декларираме свойствата на елемента body, както следва:
body ( /* Местоположение на фоновото изображение */ background-image: url(images/background-photo.jpg); /* Фоновото изображение е центрирано хоризонтално и вертикално */ background-position: center center; /* Фонът не се повтаря */ background-repeat: no-repeat; /* Фонът е фиксиран в прозореца за изглед и следователно не се движи, когато височината на съдържанието надвишава височината на изображението */ background-attachment: fixed; /* Това свойство причинява фон за промяна на мащаба, когато размерът на съдържащия се контейнер се промени */ background-size: cover /* Цвят на фона, който ще се показва при зареждане на фоново изображение */ background-color: #464646 )
Най-важното свойство на стойността в този списък е:
размер на фона: корица;
Струва си да му обърнете внимание. Тук се случва чудото. Тази двойка стойност-свойство инструктира браузъра да мащабира фоновото изображение в такива пропорции, че височината-ширина да остане равна или по-голяма от височината-ширина на самия елемент. ( В нашия случай този елемент- тяло.)
И тук възниква неприятна ситуация с двойката имот-стойност. В случай, че фоновото изображение ще има по-ниска разделителна способност от размерите на елемента body и това може да се случи или когато страницата се показва на екрани с висока резолюция, или когато имате тонове съдържание на страницата, браузърът ще разтегне изображението.
И както знаете, когато разтегнем изображение над реалния му размер, губим качество на изображението ( с други думи, появява се пикселизация):
Когато изображението се мащабира към оригиналния си размер, качеството на изображението се влошава.
Не забравяйте за това, когато избирате фона. В демонстрационния пример използваме снимка с размери 5500 на 3600px за големи екрани, и следователно в този случай нещо подобно едва ли ще се случи.
За да гарантираме, че нашият фон е централно подравнен, ние декларирахме следното:
позиция на фона: център център;
Това ще настрои осите на мащабиране в центъра на прозореца за изглед.
Ето какво ще направим. Нека зададем свойството background-attachment на фиксирано, за да сме сигурни, че изображението остава на мястото си, дори ако превъртим страницата надолу:
фоново прикачване: фиксирано;
В демонстрационния пример включих опцията „ изтеглете малко съдържание“, за да можете да наблюдавате поведението на фона при превъртане на страницата.
Всичко, което трябва да направите, е да изтеглите демонстрацията и да експериментирате малко със свойствата за позициониране (background-attachment и background-position), за да видите как те влияят на поведението на превъртане на страницата и фона.
Следните стойности на свойствата се обясняват сами по себе си.
CSS стенограма
По-горе, за яснота, дефинирах изцяло свойствата на CSS.
А ето как изглежда кратката версия:
тяло ( фон: url(background-photo.jpg) централна корица без повторение; )
Всичко, което трябва да направите, е да промените url стойността на пътя към вашето изображение.
По избор: медийна заявка за получаване на по-малка версия на фоновото изображение
За екрани с по-ниска разделителна способност ще ни трябва Photoshop, за да намалим пропорционално разделителната способност на изображението до 768 на 505px. Пуснах го и през Smush.it, за да намаля размера на файла. Това направи възможно намаляването на размера от 1741 на 114 килобайта. Това намали размера на файла с 93%.
Не ме разбирайте погрешно, но 114 килобайта все още са доста за използване за някои видове уеб дизайн. И ние ще заредим тези 114 килобайта само ако е необходимо, защото като погледнем статистиката, има компромиси, които трябва да се направят между десктоп и мобилен дизайн.
А ето и самата медийна заявка:
Ключовата част от медийната заявка е свойството max-width: 767px, което в нашия случай означава, че ако прозорецът на браузъра е по-голям от 767px, се използва голямо изображение.
Недостатъкът на този метод е, че ако преоразмерите прозореца на браузъра от, да речем, 1200px на 640px (или обратното), ще видите трептене на екрана, докато по-малкото или по-голямото изображение се зарежда.
И в допълнение, поради факта, че някои мобилни устройстваможе да работи с по-висока разделителна способност - например iPhone 5 с Retina дисплей с разделителна способност 1136 на 640px, по-малко изображение ще изглежда грозно.
Всяка стая ще изглежда много по-добре, ако подът й е покрит със скъп персийски килим. Така че защо вашият уебсайт е по-лош? Може би е време да „покриете“ пода му със скъп, елегантен ръчно изработен килим. Нека да разгледаме по-отблизо как да направите фон за уебсайт:
Фон за сайта
Случва се старият дизайн на уебсайта да е станал скучен. И искам нещо ново и вкусно. А нов дизайнще бъде така, ако го приготвите със собствените си ръце.
Но пълната промяна на целия дизайн на даден ресурс сами е неблагодарна задача. И не всички ръце са правилно обучени за тази задача. Ето защо най-лесният начин да обновите стар шаблон е да промените цвета на фона на ресурса или неговото фоново изображение.
Има няколко начина за промяна на фона на уебсайт. За това се използват възможностите на CSS или html. Но много от свойствата за работа с фона имат същото име и метод на приложение в тези уеб технологии.
Основи на работа с фонове в html
Като фон могат да се използват няколко елемента:
- цвят;
- Фоново изображение;
- Изображение на текстура.
Нека разгледаме по-подробно използването на всеки от тях.
За да зададете фонов цвят за сайт, използвайте свойството background-color на атрибута style. Тоест, за да зададете основния цвят за уеб страница, трябва да го напишете вътре в тага
. Например:Фон на уебсайт #55D52B
В допълнение към шестнадесетичния цветен код се поддържа стойност в ключова дума или RGB формат. Примери:
RGB фон на уебсайта (23,113,44)
Зелен фон на уебсайта
Задайте цвета на фона с помощта на ключови думиима редица ограничения в сравнение с другите два метода.
HTML поддържа само 16 ключови думи за задаване на цветове. Ето няколко от тях: бяло, червено, синьо, черно, жълтои други.
Следователно, за да зададете фон за html сайт, е по-добре да използвате шестнадесетичен или RGB формат.
В допълнение към избора на цвят са налични и други опции за персонализиране. Ако свойството background-color е зададено на transparent, фонът на страницата ще стане прозрачен. Тази стойност е присвоена на това свойство по подразбиране.
Сега нека да разгледаме възможностите на хипертекстовия език за задаване на фоново изображение за сайт. Това може да стане с помощта на свойството background-image.
Както можете да видите от кода, изображението е свързано чрез url пътя, посочен в скоби. Но не всички картини са толкова големи, че размерът им да запълни цялата площ на екрана. Да видим как ще се покаже по-малката картинка.
Да предположим, че разработваме уебсайт за поезия и трябва да използваме изображение на Пегас като фон. Крилатият кон ще олицетворява свободата на творческата мисъл на поета!
Трябва изображението да се покаже в средата на екрана веднъж. Но, за съжаление, браузърът не разбира нашите възвишени желания. И показва по-малко изображение за фона на сайта толкова пъти, колкото площта на екрана може да побере:
Може би четири усмихнати коня с крила ще бъдат твърде много вдъхновение за поетите. Затова забраняваме клонирането на нашия Пегас. Правим това с помощта на свойството background-repeat. Възможни стойности:
- repeat-x – повторете фоновото изображение хоризонтално;
- repeat-y – вертикално;
- повторение – по двете оси;
- no-repeat – повторението е забранено.
Сред изброените опции, ние се интересуваме от последната. Преди да променим фона на сайта, ние го използваме в нашия код:
Но, разбира се, би било по-добре нашата листовка да се намира в средата на екрана. Свойството background-position е предназначено точно за позициониране на фоновото изображение на страницата. Можете да зададете координати на местоположението по няколко начина:
- ключова дума ( горе, долу, център, ляво, дясно);
- Процент – броенето започва от горния ляв ъгъл;
- В мерни единици (пиксели).
Нека се възползваме от най-много прост вариантцентриране:
Случва се да трябва да фиксирате позицията на картина при превъртане. Ето защо, преди да направите изображение като фон на сайта, използвайте специалното свойство background-attachment. Стойностите, които приема са:
- свитък;
- фиксирани.
Имаме нужда от последната стойност. Сега нашият примерен код ще изглежда така:
Текстурен фон на уебсайта
В първия пример използвахме голям и красив пустинен пейзаж за фон. Но трябва да платите напълно за такава красота. Тегло на изображението, направено в високо качество, може да достигне няколко мегабайта.
Този обем по никакъв начин не влияе върху скоростта на зареждане на страницата на браузъра с високоскоростна интернет връзка. Но какво ще кажете за мобилен интернет, което ще отнеме много време за зареждане на няколко „метра“?
Всички тези проблеми се решават с помощта на текстуриран фон. Той използва малко изображение като модел на текстура. Дори да се повтаря многократно, чертежът се зарежда само веднъж.
По подразбиране, когато превъртате уеб страница с фон, фонът се превърта заедно с другите елементи. Понякога това е подходящо, но понякога искате изображението, зададено чрез фоново изображение, винаги да остава видимо. За да се контролира това състояние, има свойство за прикачване на фона.
фонови прикачени стойности
Свойството може да приема три стойности, за да персонализира фоновото поведение:
- превъртане (по подразбиране) - фоновото изображение се движи заедно с други елементи, когато уеб страницата се превърта.
- fixed - стойността фиксира фоновото изображение, което го прави нечувствителен към скролиране. Докато превъртате страницата, фонът ще остане неподвижен.
- local - тази стойност е добавена, защото в случай на локално превъртане, фонът със стойността превъртанеДръж се като фиксирани. Когато стойност местенфонът се превърта заедно със съдържанието на елемента и не се превърта, освен ако съдържанието не се превърта (но се превърта заедно със самия елемент).
За да разберете по-добре как работи собствеността, разгледайте примерите по-долу. Така че можете да ги сравните, вашите фонови стойности на прикачени файлове са и трите (надяваме се, че използвате модерен настолен браузър, когато изучавате CSS!).
фон-прикачен файл: превъртане
фоново прикачване: фиксирано
фон-прикачен файл: локален
Поддръжка на браузър
Десктоп браузърите IE9+, Edge 12+, Firefox 25+, Chrome (всички версии), Safari 5+, Opera 11.5+ имат пълна поддръжка за всички стойности на свойството background-attachment. от мобилни браузъривсички значения се разбират от Opera Mobile, Firefox за Android, IE Mobile и QQ Browser. Други браузъри имат частична или никаква поддръжка.
По-нататък в урока: background-origin и background-clip свойства за позициониране на фонови изображения и контролиране на изрязване.
Избор
