我有一个有 5 张并排图片的横幅,其中每张图片都会展开以在悬停时显示更多文本。但是在移动设备上阅读变得非常困难,所以我想知道是否有办法像 Foo Fighters 网站一样添加滚动效果 (https://foofighters.com/)
我试图避免使用滚动条,而是使用左右箭头。
该站点基于 bootstrap 4 构建。
#container-banner {
display: flex;
justify-content: center;
align-items: center;
height: 75vh;
width: 100vw;
}
#container-banner:hover>.section {
-webkit-filter: brightness(22%);
filter: brightness(22%);
}
#container-banner:hover>.section:hover {
-webkit-filter: brightness(100%);
filter: brightness(100%);
}
#container-banner .section {
flex-grow: 1;
position: relative;
height: 100%;
transition: all 0.4s;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-align: center;
flex: 1;
}
#container-banner .section .cont_title {
position: relative;
margin: auto;
width: 100%;
height: auto;
text-align: center;
margin-top: 37vh;
}
#container-banner .section .cont_title h1 {
text-transform: uppercase;
color: white;
font-family: 'Economica', sans-serif;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
font-size: 3.5vw;
margin: 0;
transition: font-size 0.3s;
vertical-align: middle;
}
#container-banner .section .cont_title h3 {
text-transform: uppercase;
font-family: 'Economica', sans-serif;
font-size: 1.3vw;
transition: all 0.3s;
color: white;
letter-spacing: 3px;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
}
#container-banner .section .cont_desc {
position: relative;
display: block;
text-align: center;
width: 12vw;
height: auto;
margin: auto;
opacity: 0;
transition: opacity 0.8s, padding-top 0.9s, -webkit-transform 0.7s;
transition: opacity 0.8s, transform 0.7s, padding-top 0.9s;
transition: opacity 0.8s, transform 0.7s, padding-top 0.9s, -webkit-transform 0.7s;
padding-top: 6vh;
-webkit-transform: scale(1);
transform: scale(1);
}
#container-banner .section .cont_desc p {
margin: 0;
font-family: 'Economica', sans-serif;
color: white;
font-size: 16px;
}
#container-banner .section:hover {
flex-grow: 1.8;
transition: flex 0.2s;
}
#container-banner .section:hover>.cont_title h1 {
font-size: 5.3vw;
transition: font-size 0.4s;
}
#container-banner .section:hover>.cont_title h3 {
font-size: 1.6vw;
transition: all 0.4s;
}
#container-banner .section:hover>.cont_desc {
opacity: 1;
padding-top: 2vh;
-webkit-transform: scale(1.5);
transform: scale(1.5);
transition: opacity 0.7s, padding-top 0.5s, -webkit-transform 0.1s;
transition: opacity 0.7s, padding-top 0.5s, transform 0.1s;
transition: opacity 0.7s, padding-top 0.5s, transform 0.1s, -webkit-transform 0.1s;
transition-delay: 0s, 0.1s, 0s;
}
#container-banner .section:nth-child(1) {
background: url("../img/members/2nd-round.jpg") center;
}
#container-banner .section:nth-child(2) {
background: url("../img/members/3rd-round.jpg") center;
}
#container-banner .section:nth-child(3) {
background: url("../img/HRBAlbumCover.svg") center;
object-fit: cover;
-webkit-background-size: contain;
background-size: contain;
background-color: black;
}
#container-banner .section:nth-child(4) {
background: url("../img/members/3.jpg") center;
}
#container-banner .section:nth-child(5) {
background: url("../img/members/4.jpg") center;
object-fit: cover;
}
<section id="container-banner">
<div class="section first">
<div class="cont_title">
<h1><a href="music.html">Music</a></h1>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1><a href="tour.html">Tour</a></h1>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1 class="font-weight-bold">Members<br>Only</h1>
<h3>Free Song<br>upon Sign-Up</h3>
<button class="btn hoverable">Sign-Up</button>
<button class="btn hoverable">Sign-In</button>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1><a href="https://www.LinkToTheSite.com">Store</a></h1>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1><a href="contact.html">Contact</a></h1>
</div>
</div>
</section>
最佳答案
您是否使用过名为 owl.carousel
的 jquery 库:https://owlcarousel2.github.io/OwlCarousel2 ?这是一个很棒的库,可让您轻松创建支持触摸和拖动的轮播 slider ,这在移动设备中至关重要。
在小型设备上
宽度超过 600 像素
宽度超过 1000 像素
而且您可以完全自定义每个断点要显示的元素数:
$(function(){
$("#banner").owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 2
},
600: {
items: 3
},
1000: {
items: 5
}
}
});
});
导航箭头本来可以被赋予更多的爱,但你完全可以按照你想要的方式设计它们。
fiddle 链接:http://jsfiddle.net/xpvt214o/324749/
关于css - 如何制作一个在悬停时展开的 flexbox,以便在移动设备上有滚动选项?我正在寻找的示例包括,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51029915/