1. 홈
  2. 질의 응답
  3. 플렉스 박스 컨테이너 내부의 이미지를 크로스 페이드 할 수 있습니까?

플렉스 박스 컨테이너 내부의 이미지를 크로스 페이드 할 수 있습니까?

2017-10-23 21 views
0

, 그래서 보통 플렉스 박스 컨테이너 내부의 이미지를 크로스 페이드 할 수 있습니까?

#crossfade img { 
 
    position: absolute; 
 
    left: 0; 
 
    width: 200px; 
 
    transition: opacity 1s ease-in-out; 
 
} 
 
#crossfade img.top:hover { 
 
    opacity: 0; 
 
}
<div id="crossfade"> 
 
    <img class="bottom" src="http://badd.ie./_images/google-logo.png" /> 
 
    <img class="top" src="http://badd.ie./_images/chrome-logo.png" /> 
 
</div>
지금까지 우리가 일반적으로 같은 것을 할 CSS를 사용하여 두 이미지를 크로스 페이드 (전환에 대한 CSS에 존재하는 크로스 브라우저 호환성을 가정)합니다.

이

CSS :

#crossfade { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

그러나 두 가지 문제가 발생 내가 수직 이미지의 중심을하려면

지금, 나는 인 flexbox을 사용하십시오. 첫째로, position: absolute;은 이미지의 왼쪽 상단 픽셀이 중심 픽셀 대신 flexbox에 의해 가운데 맞춤되기 때문에 플렉스 박스의 중심을 끊습니다. 두 번째로, flexbox를 사용하면 이미지가 나란히 있고 더 이상 서로 겹쳐지지 않게됩니다.

이미지 주위에 컨테이너 div를 추가하고 그 안에 이미지를 배치했지만 아무런 차이가 없었습니다. 그들은 여전히 ​​나란히 나란히 서서 떨어져있었습니다.

편집 : 두 번째 문제가 해결되었습니다. 고마워요 Chaz. 내가하려는 일에 대해 더 잘 알고 싶다면 아래의 MCVE를보십시오. 이것은 FontAwesome 물건을 물음표로 바꿨다는 것을 제외하고는 거의 마찬가지입니다.

편집 : 이제 두 가지 문제가 해결되었습니다. 네일 고마워. 아래 스 니펫이 작동하도록 업데이트되었습니다.

var minHeaderHeight = 100; // Height of shrunken header, in pixels 
 
var header = document.querySelector("#header"); // The header object 
 
var maxHeaderHeight = outerHeight(header, true); // Height of expanded header, in pixels 
 

 
document.addEventListener("DOMContentLoaded", initHeader); 
 

 
function initHeader() { 
 
\t var \t landingImage = document.getElementById("landing-image"); 
 
\t if (landingImage !== null) { 
 
\t \t header.classList.add("expanded"); 
 
    window.addEventListener('scroll', scrollCallback); 
 
\t } else { 
 
\t \t header.parentNode.style.paddingTop = minHeaderHeight + "px"; 
 
\t } 
 
} 
 

 
function scrollCallback() { 
 
\t var scrollOffset = windowScrollTop(); 
 
\t var transitionEvent; 
 
\t if (scrollOffset > 10) { 
 
\t \t header.classList.remove("expanding"); 
 
\t \t header.classList.add("shrinking"); 
 
\t \t header.classList.remove("expanded"); 
 
\t } else { 
 
\t \t header.classList.remove("shrinking"); 
 
\t \t header.classList.add("expanding"); 
 
\t \t header.classList.add("expanded"); 
 
\t } 
 
} 
 

 
// THESE TWO FUNCTIONS REPLICATE SIMILAR FUNCTIONS FROM JQUERY 
 
function outerHeight(el, withMargins) { 
 
\t withMargins = withMargins || false; 
 
\t if (withMargins) { 
 
\t var height = el.offsetHeight; 
 
\t var style = getComputedStyle(el); 
 
\t height += parseInt(style.marginTop) + parseInt(style.marginBottom); 
 
\t return height; 
 
\t } else { 
 
\t \t return el.offsetHeight; 
 
\t } 
 
} 
 

 
function windowScrollTop(pos) { 
 
\t if (typeof pos === 'undefined') { 
 
\t \t if (window.pageYOffset !== undefined) { 
 
\t \t \t return window.pageYOffset; 
 
\t \t } else { 
 
\t \t \t return (document.documentElement || document.body.parentNode || document.body).scrollTop; 
 
\t \t } 
 
\t } else { 
 
\t \t document.documentElement.scrollTop = pos; 
 
\t \t document.body.parentNode.scrollTop = pos; 
 
\t \t document.body.scrollTop = pos; 
 
\t \t window.pageYOffset = pos; 
 
\t } 
 
}
#header { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    background-color: #000; 
 
    height: 100px; 
 
    text-transform: uppercase; 
 
    font-size: 2em; 
 
    color: white; 
 
} 
 

 
#header a { 
 
\t color: white; 
 
    text-decoration: none; 
 
} 
 

 
#header-inner { 
 
\t width: 100%; 
 
    z-index: 1; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
} 
 
    
 
#header.expanded { 
 
\t height: 100vh; 
 
\t background-color: transparent; 
 
} 
 

 
#header.expanding { 
 
\t -webkit-transition: height 300ms ease-in-out, background 300ms ease-in; 
 
\t -moz-transition: height 300ms ease-in-out, background 300ms ease-in; 
 
\t -ms-transition: height 300ms ease-in-out, background 300ms ease-in; 
 
\t -o-transition: height 300ms ease-in-out, background 300ms ease-in; 
 
    transition: height 300ms ease-in-out, background 300ms ease-in; 
 
} 
 

 
#header.shrinking { 
 
\t -webkit-transition: height 300ms ease-in-out, background 300ms ease-in; 
 
\t -moz-transition: height 300ms ease-in-out, background 300ms ease-in; 
 
\t -ms-transition: height 300ms ease-in-out, background 300ms ease-in; 
 
\t -o-transition: height 300ms ease-in-out, background 300ms ease-in; 
 
    transition: height 300ms ease-in-out, background 300ms ease-in; 
 
} 
 

 
#header-logos { 
 
\t position: relative; 
 
} 
 

 
#header-logos img { 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
    transform: translate(-50%, -50%); 
 
\t max-height: 100px; 
 
} 
 

 
#header.shrinking img { 
 
\t -webkit-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out; 
 
    -moz-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out; 
 
    -ms-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out; 
 
    -o-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out; 
 
    transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out; 
 
} 
 

 
#header.expanding img { 
 
\t -webkit-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out; 
 
    -moz-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out; 
 
    -ms-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out; 
 
    -o-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out; 
 
    transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out; 
 
} 
 

 
#header-logo-top { 
 
\t opacity: 0; 
 
} 
 

 
#header.expanded #header-logo-top { 
 
\t opacity: 1; 
 
} 
 

 
#header.expanded img { 
 
    max-height: 500px; 
 
} 
 

 
#landing-image { 
 
\t height: 100vh; 
 
\t background-position: center; 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
} 
 

 
#landing-image.home-page { 
 
\t background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/2f/KANTHALLOOR%2CEruvikulam%26Anamalais_in_the_background.jpg"); 
 
} 
 

 
#page-content { 
 
    max-width: 750px; 
 
}
<div id="header"> 
 
    <div id="header-inner"> 
 
\t <div class="header-button menu-bars"> 
 
\t  <a href="#">?</a> 
 
\t </div> 
 
    <div id="header-link-1" class="header-button"> 
 
     <a href="#" class="btn">Link 1</a> 
 
    </div> 
 
    <div id="header-link-2" class="header-button"> 
 
     <a href="#" class="btn">Link 2</a> 
 
    </div> 
 
    <div id ="header-logos" class="header-button"> 
 
\t \t \t <a href="#"><img id="header-logo-bottom" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1000px-Google_%22G%22_Logo.svg.png"></a> 
 
\t \t \t <a href="#"><img id="header-logo-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Google_Chrome_icon_%282011%29.svg/2000px-Google_Chrome_icon_%282011%29.svg.png"></a> 
 
\t </div> 
 
    <div id="header-dates" class="header-button"> 
 
     1 | 2 | 3 JAN 2018 
 
    </div> 
 
    <div id="header-socials" class="header-button"> 
 
\t \t \t <a href="#">?</a> 
 
\t \t \t <span>|</span> 
 
\t \t \t <a href="#">?</a> 
 
\t \t \t <span>|</span> 
 
\t \t \t <a href="#">?</a> 
 
\t \t \t <span>|</span> 
 
\t \t \t <a href="#">?</a> 
 
\t \t \t <span>|</span> 
 
\t \t \t <a href="#">?</a> 
 
    </div> 
 
\t <div class="header-button spacer"> 
 
\t </div> 
 
    </div> 
 
</div> 
 
<div id="landing-image" class="home-page"></div> 
 
<div id="page-content"> 
 
LOREM IPSUM DOLOR SIT AMET, consectetur adipiscing elit. Nullam scelerisque magna non dui auctor placerat. Vestibulum cursus placerat mauris eget luctus. Maecenas sollicitudin mauris id erat porttitor, in dapibus ligula commodo. Donec sagittis sagittis felis non elementum. Nam facilisis non sapien non ultrices. Morbi cursus molestie nibh non tincidunt. Sed sagittis erat eu enim condimentum, ut lobortis nisi faucibus. Cras orci felis, molestie in ligula sit amet, vestibulum malesuada augue. Nullam id aliquam enim, eu vestibulum massa. Mauris ultricies ante sit amet leo ullamcorper, a lacinia nulla hendrerit. Aenean eros dolor, semper non nisi eu, maximus accumsan felis. Donec facilisis pellentesque lacus, quis vestibulum ipsum pretium tempus. 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut ultrices quam quis augue scelerisque, vitae hendrerit nunc iaculis. Morbi lobortis, arcu non luctus scelerisque, quam libero ullamcorper neque, eget rhoncus nulla enim sit amet metus. Praesent eget risus euismod, posuere turpis in, lobortis dui. Aliquam mattis leo elit, a accumsan urna maximus a. Duis lacinia ex hendrerit, lobortis massa volutpat, lacinia mi. Vivamus ullamcorper mauris libero, a semper justo vulputate ut. In eget semper nibh. Fusce venenatis maximus nisi. Integer vel suscipit risus. Nulla mollis est a velit molestie pharetra. Donec sed imperdiet dui, id ultricies massa. Aliquam dictum arcu ac viverra fringilla. In placerat lorem in egestas cursus. Sed eleifend tortor quis augue accumsan, eget rhoncus turpis finibus. 
 
Fusce aliquet finibus lectus, bibendum ornare ex aliquam nec. Fusce efficitur felis luctus fermentum ullamcorper. Maecenas eget urna nibh. Nulla luctus sit amet sem eget interdum. Aenean placerat fermentum metus, a tempus purus imperdiet quis. Aliquam ac quam a dui volutpat sagittis. Duis mollis scelerisque tristique. Quisque lacinia consectetur metus, non vulputate tortor malesuada sed. Curabitur dictum ac risus in elementum. 
 
Vivamus ultricies lacinia tempus. Donec eu mi arcu. Ut porttitor nulla vel elit faucibus condimentum. Mauris volutpat orci non libero tristique, vel euismod nisi aliquam. Phasellus fermentum euismod erat vitae feugiat. Nulla venenatis auctor venenatis. Praesent ullamcorper eget odio ac blandit. Aliquam non lacus a risus aliquet ornare eget id justo. Donec quis elementum orci, non dapibus lectus. Mauris sodales tortor id leo posuere feugiat. Cras congue commodo justo, a commodo dolor luctus ut. Quisque fringilla rhoncus nunc, eget tincidunt justo pharetra quis. Donec condimentum dapibus ex, non condimentum ex varius eu. Maecenas a lectus ut ipsum interdum vulputate. Morbi ac lorem a turpis sollicitudin bibendum non eu lectus. Quisque pretium lacus eu ipsum eleifend efficitur. 
 
Nulla fermentum enim quis sapien accumsan, sit amet consectetur justo laoreet. Integer tortor nibh, dapibus quis nisi nec, euismod sagittis arcu. Ut vehicula nisi vitae ante efficitur congue. Vivamus malesuada facilisis tortor. Maecenas maximus felis at justo finibus volutpat vitae sed dolor. Suspendisse quis nulla massa. Aliquam dignissim leo ut arcu viverra fringilla. Morbi convallis dignissim augue, at pharetra purus. Cras neque elit, dictum et eros eget, faucibus varius ligula. In tincidunt dolor quis accumsan ornare. Ut eget efficitur sapien. Maecenas nunc justo, malesuada quis porta quis, dignissim ac enim. Nulla vestibulum odio ac sem egestas, et lobortis metus aliquam. Mauris at tincidunt erat. Fusce ut dictum diam. 
 
Sed luctus sem vel euismod imperdiet. Fusce non tincidunt elit, id aliquet ipsum. Aliquam quam libero, tincidunt id diam eu, pretium porta velit. Mauris placerat efficitur ipsum non fringilla. In suscipit ipsum quis leo faucibus, ut porttitor diam porta. Donec luctus, mauris non posuere aliquam, neque velit euismod ipsum, vitae ornare erat sapien in nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consequat tortor sed dui placerat lacinia. Vivamus tempus ultrices massa, vitae sagittis enim convallis sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
Phasellus volutpat, dolor vel laoreet efficitur, nunc mauris tempus velit, at rhoncus orci magna ut eros. Proin elementum, nibh vitae eleifend venenatis, ante lacus iaculis arcu, nec varius justo nunc nec lorem. In faucibus ligula dui, vitae tincidunt libero ullamcorper sit amet. In in consectetur velit. Proin non elit ut purus ullamcorper ultricies sed pharetra ex. Proin neque elit, suscipit quis dui id, varius consequat libero. Aenean pharetra massa vel tortor hendrerit bibendum. Phasellus aliquam vulputate neque eu interdum. Quisque commodo faucibus ullamcorper. Morbi accumsan, nisl id porta bibendum, metus tortor faucibus leo, in volutpat arcu enim a nunc. Vestibulum hendrerit, mi vel bibendum tincidunt, nibh sem sagittis purus, quis tincidunt nibh magna in sem. Nunc placerat mollis dolor, at volutpat libero commodo id. Suspendisse suscipit mattis libero, suscipit iaculis nibh rhoncus et. 
 
Quisque vitae metus diam. Cras at tempus ipsum. Etiam gravida ornare ante, vitae facilisis lacus maximus vitae. Donec gravida interdum ante, quis euismod urna vulputate id. Suspendisse diam nunc, interdum nec elementum vel, dapibus at risus. Phasellus varius scelerisque mi. Duis scelerisque neque sit amet ligula gravida pharetra. Duis pretium id lectus id viverra. Sed pellentesque, sem in rhoncus euismod, justo libero tincidunt erat, id pellentesque ex sapien gravida quam. Duis urna nisl, accumsan quis mi molestie, finibus pellentesque metus. Aenean semper velit id neque dignissim, eget gravida lacus interdum. Nullam a tincidunt justo, et fermentum eros. Nunc eget dolor erat. Integer id lorem finibus, sodales nunc ut, vulputate est. 
 
Donec varius nulla eros, quis accumsan velit euismod nec. Sed tempus nulla sed faucibus sodales. Mauris at ligula arcu. Integer vulputate tincidunt arcu sit amet lacinia. Integer placerat quis lectus lobortis sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ac pretium enim. Donec libero turpis, pellentesque non sagittis quis, vehicula at ex. Maecenas semper purus sed blandit tincidunt. Ut in scelerisque mi. Vivamus erat nunc, sagittis non augue blandit, molestie porttitor nunc. Aliquam laoreet non dolor vitae varius. Proin lorem dui, maximus ac tortor in, faucibus tristique ex. 
 
</div>

출처

2017-10-23 Baddie

답변

0

감사합니다. 아래의 Neil과 Chaz에게 감사드립니다. 대답은 다음과 같습니다 :

flexbox 항목 안에는 이미지 용 컨테이너가 있습니다. 그러면 다음 스타일링이 컨테이너 및 이미지에 적용됩니다.

.image-container { 
    position: relative; 
} 

.image-container img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

그런 다음 이미지 컨테이너를 flexbox 항목 컨테이너에 배치 할 수 있습니다.

나는 위 코드를 업데이트하여 작동하는 것으로 나타났습니다.

출처

2017-10-25 10:23:37 Baddie

0

, 이미지를 중심으로 왼쪽 상단의 조합을 사용하고, 변환 인 flexbox를 사용하지 마십시오 : 번역;

#crossfade { 
position:relative; 
} 
#crossfade img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transfrom: translate(-50%, -50%); 
}

출처

2017-10-23 14:01:44 NeilWkz

+0

이것은 나에게 거꾸로 한 발자국처럼 보입니다. Flexbox는 (즉각적인?) 미래의 CSS 레이아웃과 나는 Flexbox와 함께 작동하는 솔루션을 찾고 있습니다. 네일에게 고마워. – Baddie

+0

Flexbox는 요소를 유연하게 배포하고 배치하기위한 것으로 부모 요소를 기준으로 요소를 동일한 위치에 배치하려고합니다. 그래서 당신의 목표는 말 그대로 두 요소를 절대적으로 배치하는 것입니다. 내 의견으로는 당신은 일에 대해 잘못된 도구를 사용하려고 시도하고있다. 절대 위치 지정이 CSS 사양에서 폐기 될 것 같지 않다. flexbox를 사용하여 래퍼 요소를 배치하고 두 이미지를 절대적으로 안에 배치 할 수 있지만 그렇게 할 필요는 없습니다. – NeilWkz

+0

감사합니다. 당연히 당신 말이 맞습니다, 나는 그 일에 맞는 도구를 사용해야하며 flexbox를 통한 직책에 대한 당신의 근거는 건전합니다. Flexbox를 사용하고 싶었던 이유는 중간에있는 이미지가 커지고 축소 될 때 헤더의 메뉴 옵션 사이의 간격을 자동으로 조정하기를 원했기 때문입니다. 위의 코드 스 니펫은 절대적으로 배치 된 요소 주위에 flexbox 래퍼를 가지고 있지만 컨테이너 내부의 이미지를 중앙에 배치하지 않습니다. 거기에 어떤 아이디어? – Baddie

0

다른 컨테이너를 사용하여 두 번째 시도를위한 코드를 제공하지 않았으므로 수행 한 것으로 가정합니다. 그러나, 여기에 인 flexbox으로 중첩 된 용기를 사용하여 동작 예이다 :

.box { 
 
    width: 700px; 
 
    height: 400px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background: lightblue; 
 
} 
 

 
.images { 
 
    width: 350px; 
 
    height: 150px; 
 
    position: relative; 
 
} 
 

 
.images img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    transition: opacity 1s ease 0s; 
 
} 
 

 
.img2 { 
 
    filter: sepia(50%); 
 
    opacity: 0; 
 
} 
 

 
.images:hover img.img2 { 
 
    opacity: 1; 
 
}
<div class="box"> 
 
    <div class="images"> 
 
    <img src="http://via.placeholder.com/350x150"> 
 
    <img class="img2" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
</div>

외측 인 flexbox 용기 센터 상대적 이미지 absolute 수 있도록 위치되어 내측 용기. 이미지의 앞부분을 알고있는 경우이 방법이 효과적입니다.

출처

2017-10-23 14:04:21 chazsolo

+0

감사합니다. 이전에 컨테이너의 상대적/절대적인 순서를 오해하고 이미지가 서로 중첩되어 있다고 생각합니다. 큰 엄지 손가락! 그래도 나는 여전히 중심 문제를 해결하고 있습니다. 나는 이미지의 크기를 알 수있다. quaideo.com으로 가서 스크롤하면 헤더로 무엇을하려고하는지 알게 될 것입니다. – Baddie

+0

@Baddie가 지금 그렇게 할 수 없습니다. 아마도 사이트의 구조/스타일을 사용하여 MVCE로 질문을 업데이트 할 수 있습니까? – chazsolo

관련 문제

 관련 문제