Ефект фіксованого фону на CSS

16

Від автора: Простий шаблон, в якому використовується CSS властивість background-attachment для створення ефекту фіксованого фону. Іноді вам не потрібно писати якийсь ненормальний JavaScript код, щоб створити креативні і добре виглядають ефекти. Сьогодні в центрі нашої уваги всього одне CSS властивості background-attachment. Ви можете зафіксувати фон у межах області перегляду (background-attachment: fixed;).

Ефект фіксованого фону на CSSЕфект фіксованого фону на CSS

Суть нового трюку полягає в тому, що у нас є один і той же елемент (в даному випадку телефон), який розташований в одному і тому ж місці для всіх фонових зображень. Таким чином, під час прокручування сторінки рухаються всі елементи, за винятком телефону. Все, що вам необхідно, – це різні зображення однакового розміру і один загальний елемент, розташований в одному і тому ж місці.

Ефект фіксованого фону на CSS

Створення структури

HTML структура є досить звичайною: кожен розділ містить елемент з класом .content, в якому знаходяться заголовок з абзацом. Класи .img-1, .img-2 і т. д. використовуються, щоб задавати різні фонові зображення через CSS. Елемент з класом .cd-vertical-nav являє собою стрелочную навігацію (яку видно тільки на великих екранах). Атрибути data використовуються, щоб в jQuery можна було визначити розділи/елементи слайдера.

Title here

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.

  • Next
  • Prev

Додавання стилів

Кілька важливих моментів, про які варто пам’ятати: пристрої на iOS не люблять властивість background-attachment: fixed; Тому на пристроях з маленьким екраном ефект з фіксованим фоном не буде видно. А також на таких пристроях ми не використовуємо фонові зображення, але вставляємо невеликі фотографії телефонів за допомогою псевдо-елементів ::after у елемента .cd-content.

.cd-fixed-background .cd-content::after {
/* зображення телефону на маленьких екранах */
content: «;
display: block;
width: 100%;
padding: 60% 0;
margin: 2em auto 0;
}

Крім цього, оскільки ми використовуємо фонові зображення, у нас немає 100%-го контролю над тим, де буде відображений зафіксований елемент (в даному випадку телефон). З цим важко змиритися, якщо ви схиблені на перфекціонізм, але я поки не можу знайти рішення цього питання. Ось весь код, який вам знадобиться для досягнення заявленого ефекту:

html, body {
height: 100%;
}
.cd-fixed-background {
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.cd-fixed-background.img-1 {
background-image: url(«../img/img-1.jpg»);
}
.cd-fixed-background.img-2 {
background-image: url(«../img/img-2.jpg»);
}
.cd-fixed-background.img-3 {
background-image: url(«../img/img-3.jpg»);
}

Обробка подій

Ми використовували jQuery для реалізації базового функціоналу слайдера, тобто щоб можна було переміщатися між розділами (стрілки вгору/вниз на клавіатурі). Коли відбувається подія scroll у об’єкта window, ми оновлюємо видимість стрілок (функція checkNavigation()) і визначаємо, який розділ є видимим (знаходиться у області перегляду) з допомогою функції checkVisibleSection(), яка додає клас .is-visible для потрібного розділу. Функції nextSection() і prevSection() використовуються для переходу до наступного/попереднього розділу.