Я борюсь с одним элементом заголовка баннера, мне нужно его получить: когда он отображается на странице, текст должен отображаться на фиолетовом фоне, а на желтом - только кнопка, и она должна быть скрыта подфиолетовый. И поэтому, когда я нажимаю кнопку на желтом фоне (интерактивное по каплям), желтый выходит на передний план, а фиолетовый на втором (они пересекаются в середине, накладываются друг на друга) отображается анимированный текст, который находится нажелтый фон исчезает с фиолетового, а желтая кнопка отображается на фиолетовом фоне.
На мобильном устройстве должно быть так, чтобы желтая кнопка была видна на фиолетовом фоне, а при нажатии - желтый фон с фиолетовымотображается кнопка.
Я надеюсь, что эффект понятен.
Эффект должен выглядеть следующим образом: http://www.marypieroszkiewicz.com/image__files/screen.jpg
HTML
<header id="header" class="header-container js--purple js--yellow">
<div class="header__front">
<div class="header-content header-content--purple" id="purple">
<h1 class="header-content__heading">
<span class="header-content__heading-text">Creative</span>
<span class="header-content__heading-text header-content__heading-text--yellow">Design</span>
<span class="header-content__heading-text">House</span>
<span class="header-content__heading-text"> And </span>
</h1>
<div class="header-content__par header-content__par--1">
<p class="header-content__par-first header-content__par-first--left">projektujemy kreacje <br>do druku i nowych mediów</p>
<p class="header-content__par-second">Tworzymy wizualizacje, które wyróżniają <br>naszych klientów</p>
</div>
</div>
</div>
<div class="header__back">
<div class="header-content header-content--yellow" id="yellow">
<h1 class="header-content__heading">
<span class="header-content__heading-text">Interactive</span>
<span class="header-content__heading-text header-content__heading-text--purple"> Design</span>
<span class="header-content__heading-text"> House</span>
<span class="header-content__heading-text"> And </span>
</h1>
<div class="header-content__par header-content__par--2">
<p class="header-content__par-first header-content__par-first--right">kreatywne podejście <br>do nowych mediów</p>
<p class="header-content__par-second">tworzymy wizualizacje, które wyróżniają <br>naszych klientów</p>
</div>
</div>
</div>
<div class="header__button">
<button class="header__button-box header__button-box--1 js--btn is-active" onclick="focusPurple()"><a href="#purple">Drop by drop creative</a></button>
<button class="header__button-box header__button-box--2 js--btn" onclick="focusYellow()"><a href="#yellow">Drop by drop intereative</a></button>
</div>
</header>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
html {
--scroll-behavior: smooth;
scroll-behavior: smooth;
font-family: "scroll-behavior: smooth";
}
html,
body {
width: 100%;
height: 100%;
}
@media (min-width: 1200px) {
html,
body {
overflow-x: hidden;
}
}
body {
scroll-behavior: smooth;
font-family: "Ubuntu", sans-serif;
height: 100%;
}
a {
text-decoration: none;
}
img {
display: block;
max-width: 100%;
height: auto;
}
li {
list-style: none;
}
h1 {
margin: 0;
}
p {
padding-bottom: 20px;
}
button {
background: none;
border: 0;
}
/* --- CLEARFIX --- */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* --- WEBPAGE CONTAINER --- */
.container {
margin: 0 auto;
width: 100%;
max-width: 1530px;
/* maksymalna szerokość projektu wynosi 1920px */
position: relative;
}
.header-container {
position: relative;
background-size: cover;
min-height: calc(739px / 2);
}
@media (min-width: 768px) {
.header-container {
min-height: calc(800px / 2);
background-size: contain;
}
}
@media (min-width: 1200px) {
.header-container {
min-height: 650px;
background-size: cover;
}
}
@media (min-width: 1920px) {
.header-container {
height: 1048px;
height: 100vh;
}
}
.header-container::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url("http://www.marypieroszkiewicz.com/project_drop__by__drop/images/texture_01.png");
z-index: 3;
pointer-events: none;
}
.header-container::before.js--purple {
}
.header-container::before.js--purple {
}
.header-container::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url("http://www.marypieroszkiewicz.com/project_drop__by__drop/images/texture_02.png");
pointer-events: none;
z-index: 0;
}
.header__front {
margin: 0;
padding: 0;
position: absolute;
top: calc(29% - 24px);
left: 19%;
font-size: 32px;
z-index: 3;
}
@media (min-width: 768px) {
.header__front {
top: calc(25% - 24px);
}
}
@media (min-width: 1200px) {
.header__front {
top: calc(24% - 24px);
}
}
.header__back {
position: absolute;
top: calc(29% - 24px);
right: 11%;
z-index: 1;
}
@media (min-width: 768px) {
.header__back {
top: calc(25% - 24px);
}
}
@media (min-width: 1200px) {
.header__back {
top: calc(24% - 24px);
}
}
.header-content {
display: flex;
flex-direction: column;
}
.header-content--purple {
align-items: start;
left: 12%;
}
@media (min-width: 768px) {
.header-content--purple {
left: 8%;
}
}
@media (min-width: 1200px) {
.header-content--purple {
left: 12%;
}
}
@media (min-width: 1920px) {
.header-content--purple {
left: 19%;
}
}
.header-content--yellow {
align-items: end;
text-align: right;
right: 12%;
}
@media (min-width: 768px) {
.header-content--yellow {
right: 8%;
}
}
@media (min-width: 1200px) {
.header-content--yellow {
right: 12%;
}
}
.header-content__heading {
font-size: 1.875rem;
text-transform: uppercase;
color: #fff;
}
@media (min-width: 768px) {
.header-content__heading {
font-size: 1.5rem;
}
}
@media (min-width: 1200px) {
.header-content__heading {
font-size: 4.375rem;
line-height: 61px;
}
}
@media (min-width: 1920px) {
.header-content__heading {
font-size: 6.75rem;
line-height: 88px;
}
}
.header-content__heading-text:nth-of-type(1) {
display: block;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
white-space: normal;
}
.header-content__heading-text:nth-of-type(2) {
font-weight: 500;
}
.header-content__heading-text--yellow {
color: #fac800;
}
.header-content__heading-text--purple {
color: #311e46;
}
.header-content__heading-text:nth-of-type(3) {
font-weight: 400;
}
.header-content__heading-text:nth-of-type(4) {
font-weight: 300;
display: block;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
white-space: normal;
}
.header-content__heading-text:nth-of-type(4)::after {
content: "AGENCY";
font-weight: 700;
}
.header-content__par {
color: #fff;
}
.header-content__par-first {
font-size: 1rem;
font-weight: 500;
padding: 0.3125rem 0 0;
text-transform: uppercase;
}
@media (min-width: 768px) {
.header-content__par-first {
font-size: 1.125rem;
}
}
@media (min-width: 1200px) {
.header-content__par-first {
font-size: 1.25rem;
padding-top: 1.563rem;
}
}
@media (min-width: 1920px) {
.header-content__par-first {
font-size: 1.5rem;
padding-top: 4.063rem;
}
}
.header-content__par-first--left {
align-self: start;
}
.header-content__par-first--left::after {
margin-left: -0.125rem;
}
.header-content__par-first--right {
align-self: end;
}
.header-content__par-first--right::after {
margin-right: -0.125rem;
transform: translateX(43px);
}
.header-content__par-first::after {
content: "";
border-bottom: 0.0625rem solid #fff;
width: 170px;
display: block;
padding-top: 0.3125rem;
}
@media (min-width: 768px) {
.header-content__par-first::after {
border-bottom: 0.1875rem solid #fff;
width: 288px;
padding-top: 0.5625rem;
}
}
.header-content__par-second {
font-size: 0.75rem;
font-weight: 400;
font-style: italic;
text-transform: lowercase;
padding-top: 0.3125rem;
padding-bottom: 0;
}
@media (min-width: 768px) {
.header-content__par-second {
font-size: 1rem;
padding-top: 1.25rem;
}
}
@media (min-width: 1200px) {
.header-content__par-second {
font-size: 1rem;
padding-top: 1.375rem;
}
}
@media (min-width: 1920px) {
.header-content__par-second {
font-size: 1.125rem;
padding-top: 2.5rem;
}
}
.header-content__par-second::first-letter {
text-transform: uppercase;
}
.header__button {
position: absolute;
bottom: 6%;
width: 100vw;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
}
@media (min-width: 768px) {
.header__button {
flex-direction: row;
justify-content: space-evenly;
bottom: 11%;
}
}
@media (min-width: 1920px) {
.header__button {
bottom: 17%;
}
}
.header__button-box {
padding: 0.9375rem 1.563rem;
font-size: 0.9375rem;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
}
@media (min-width: 1200px) {
.header__button-box {
padding: 1.125rem 1.938rem;
font-size: 1.25rem;
}
}
@media (min-width: 1920px) {
.header__button-box {
padding: 2.313rem 3.875rem;
}
}
.header__button-box--1 {
border: 0.1875rem solid #333;
color: #333;
z-index: -1;
transform: translateY(51px);
}
@media (min-width: 768px) {
.header__button-box--1 {
border: 0.1875rem solid #fac800;
color: #fac800;
transform: translateY(0px);
z-index: 4;
}
}
.header__button-box--2 {
border: 0.125rem solid #fac800;
color: #fac800;
z-index: 4;
}
@media (min-width: 768px) {
.header__button-box--2 {
border: 0.125rem solid #333;
color: #333;
transform: translateY(0px);
}
}
@media (min-width: 1200px) {
.header__button-box--2 {
z-index: 2;
}
}
.header__heading {
font-size: 1.875rem;
text-transform: uppercase;
}
@media (min-width: 768px) {
.header__heading {
font-size: 1.5rem;
}
}
@media (min-width: 1200px) {
.header__heading {
font-size: 5.938rem;
line-height: 88px;
}
}
@media (min-width: 1920px) {
.header__heading {
font-size: 6.75rem;
}
}
.header__heading-text:nth-of-type(1) {
display: block;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
white-space: normal;
}
.header__heading-text:nth-of-type(2) {
font-weight: 500;
}
.header__heading-text--yellow {
color: #fac800;
}
.header__heading-text--purple {
color: #311e46;
}
.header__heading-text:nth-of-type(3) {
font-weight: 400;
}
.header__heading-text:nth-of-type(4) {
font-weight: 300;
display: block;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
white-space: normal;
}
.header__heading-text:nth-of-type(4)::after {
content: "AGENCY";
font-weight: 700;
}
.header-first {
font-size: 1rem;
font-weight: 500;
padding: 0.3125rem 0 0;
text-transform: uppercase;
}
@media (min-width: 768px) {
.header-first {
font-size: 1.125rem;
}
}
@media (min-width: 1200px) {
.header-first {
font-size: 1.375rem;
}
}
@media (min-width: 1920px) {
.header-first {
font-size: 1.5rem;
}
}
.header-first::after {
content: "";
border-bottom: 0.0625rem solid #fff;
width: 170px;
display: block;
padding-top: 0.3125rem;
}
@media (min-width: 768px) {
.header-first::after {
border-bottom: 0.1875rem solid #fff;
width: 288px;
padding-top: 0.75rem;
}
}
.header-first--left {
align-self: start;
}
.header-first--left::after {
margin-left: -0.125rem;
}
.header-first--right {
align-self: end;
}
.header-first--right::after {
margin-right: -0.125rem;
transform: translateX(43px);
}
.header-second {
font-size: 0.75rem;
font-weight: 400;
font-style: italic;
text-transform: lowercase;
padding-top: 0.3125rem;
padding-bottom: 0;
}
@media (min-width: 768px) {
.header-second {
font-size: 1rem;
padding-top: 1.25rem;
}
}
@media (min-width: 1200px) {
.header-second {
font-size: 1rem;
padding-top: 1.5rem;
}
}
@media (min-width: 1920px) {
.header-second {
padding-top: 2.5rem;
font-size: 1.125rem;
}
}
.header-second::first-letter {
text-transform: uppercase;
}
.header-content {
display: none;
}
.header-content.is-active {
display: block;
}
JS
document.addEventListener('DOMContentLoaded', function () {
const btns = document.querySelectorAll('.js--btn');
const headerCont = document.querySelectorAll('.header-content');
function mark(e) {
e.preventDefault();
btns.forEach(el => el.classList.remove('is-active'));
this.classList.add('is-active');
const link = this.querySelector('a');
const href = link.getAttribute('href');
const targetTab = document.querySelector(href);
headerCont.forEach(el => el.classList.remove('is-active'));
targetTab.classList.add('is-active');
}
function unmark() {
btns.forEach(el => el.classList.remove('is-active'));
headerCont.forEach(el => el.classList.remove('is-active'));
}
btns.forEach(el => {
el.addEventListener('click', mark);
});
function focusPurple() {
document.querySelector('.js--purple').style.zIndex = 3;
document.querySelector('.js--yellow').style.zIndex = 0;
}
function focusYellow() {
document.querySelector('.js--purple').style.zIndex = 0;
document.querySelector('.js--yellow').style.zIndex = 3;
}
});
Мой код здесь: https://codepen.io/mary_pieroszkiewicz/pen/rNNVVBy
Всю благодарность за помощь! ❤️