J'ai construit une page avec quelques sections avec des vidéos en arrière-plan et chaque fois que l'utilisateur fait défiler, il y a un scrollsnap vers chaque section différente.
Cependant, sur mobile, je voudrais que l'utilisateur fasse défiler horizontalement au lieu de verticalement. Je sais que l'astuce pour scrollsnap est de définir le type: x obligatoire, mais pour que cela fonctionne réellement, je dois changer la mise en page de ma page afin qu'au lieu de
corps = 500vh * 100vw sur le bureau (il y a 5 sections de 100vh et 100vw chacune)
il devient :
corps = 100vh * 500vw sur mobile
y a-t-il de toute façon pour changer la mise en page de cette manière avec les requêtes des médias?
<!-- ************************** WHAT I NEED
IN DESKTOP
------
| 100vh|
| 100vw|
| |
| ↓ |
------
Scrollsnap
------
| 100vh|
|100vw |
| |
| ↓ |
------
Scrollsnap
------
|100vh |
|100vw |
| |
| ↓ |
------
IN MOBILE
------ ------ ------
|100vh | |100vh | |100vh |
|100vw | |100vw | |100vw |
| |Scrollsnap| |Scrollsnap| |
| → | → | → | → | → |
| | | | | |
------ ------ ------
***********--!>
<!-- ****************************** FIRST section ********************************* -->
<div class="scroll-container">
<div class="receveur receveur-1"></div>
<div id="wrapper">
<div id="featured">
<video autoplay="true" muted="true" loop>
<source src="style/vid/3_third.mp4" type="video/mp4" />
</video>
<div class="centering_container">
<div class="text_id">
<h1 style="line-height:120%;">Section 1</h1>
</div>
</div>
</div>
</div>
<!-- ****************************** SECOND section ********************************* -->
<div class="receveur receveur-2" id="arrowscroll"></div>
<div id="wrapper2">
<div id="featured2">
<video autoplay="true" muted="true" loop>
<source src="style/vid/1_first.mp4" type="video/mp4" />
</video>
<div class="centering_container2">
<div class="text_id">
<h1 style="line-height:120%;">SECTION<br>2<span class="tim">â„¢</span></h1>
</div>
</div>
</div>
</div>
<!-- ***************************** THIRD sectiom ********************************************* -->
<div class="receveur receveur-3"></div>
<div id="wrapper3">
<div id="featured3">
<video autoplay="true" muted="true" loop>
<source src="style/vid/2_second.mp4" type="video/mp4" />
</video>
<div class="centering_container3">
<div class="text_id">
<h1 style="line-height:120%;">Section <br>3</h1>
</div>
</div>
</div>
</div>
<!-- ***************************** FOURTH VIDEO ********************************************* -->
<div class="receveur receveur-4"></div>
<div id="wrapper4">
<div id="featured4">
<video autoplay="true" muted="true" loop>
<source src="style/vid/5_fifth.mp4" type="video/mp4" />
</video>
<div class="centering_container4">
<div class="text_id">
<h1>Section 4</h1>
</div>
</div>
</div>
</div>
<!-- ***************************** FIFTH VIDEO ********************************************* -->
<div class="receveur receveur-5"></div>
<div id="wrapper5">
<div id="featured5">
<video autoplay="true" muted="true" loop>
<source src="style/vid/4_fourth.mp4" type="video/mp4" />
</video>
<div class="centering_container5">
<div class="text_id">
<h1>Section 5</h1>
</div>
</div>
</div>
</div>
</div>
</div>
html,body{ margin:0; padding:0; background-color: #232323; }
.text_id {
color: #fff;
font-size:calc(12px + 1.8vw);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
text-align: center;
}
.centering_container, .centering_container2, .centering_container3, .centering_container4, .centering_container5 {
z-index: -1;
height:100%;
width:100%;
overflow:hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}
#wrapper{
position: relative;
height: 100vh;
overflow: hidden;
z-index: 3;
}
#featured {
position: absolute;
z-index: 2;
width: calc(100vh * (1920 / 1080)); /* video width / height */
height: calc(100vw * (1080 / 1920)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#wrapper2{
position: relative;
height: 100vh;
overflow: hidden;
z-index: 2;
}
#featured2{
position: absolute;
z-index: 3;
width: calc(100vh * (1620 / 1080)); /* video width / height */
height: calc(100vw * (1080 / 1620)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#wrapper3 {
position: relative;
height: 100vh;
overflow: hidden;
z-index: 2;
}
#featured3 {
position: absolute;
z-index: 2;
width: calc(100vh * (1920 / 1080)); /* video width / height */
height: calc(100vw * (1080 / 1920)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#wrapper4 {
position: relative;
height: 100vh;
overflow: hidden;
z-index: 4;
}
#featured4 {
position: absolute;
z-index: 2;
width: calc(100vh * (1920 / 1080)); /* video width / height */
height: calc(100vw * (1080 / 1920)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#wrapper5 {
position: relative;
height: 100vh;
overflow: hidden;
z-index: 2;
}
#featured5 {
position: absolute;
z-index: 2;
width: calc(100vh * (960 / 506)); /* video width / height */
height: calc(100vw * (506 / 960)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
video {
z-index: -2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/******** smooth scroll scrollsnap********/
.scroll-container {
width: 100%;
height: 100vh;
overflow: auto;
-webkit-scroll-snap-type: y mandatory;
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
.receveur {
scroll-snap-align: start;
scroll-behavior: smooth;
}3 Réponses :
Ce dont vous avez besoin est d'utiliser la règle @media en CSS comme illustré ci-dessous:
@media (max-width: 400px) {
html, body {
// insert code here
}
.text_id {
// insert code here
}
}
Donc, essentiellement, vous trouverez la largeur maximale de tous les appareils mobiles sur lesquels votre site Web peut être utilisé et définissez des règles CSS pour le moment où la condition est remplie (lorsque vous utilisez la condition de max-width , par exemple, elle s'activera pour tout code plus fin que la largeur spécifiée. ). Vous devrez peut-être utiliser !important à la fin de certaines lignes pour vous assurer qu'il n'est pas écrasé par autre chose dans votre code.
Oui, je connais les règles @media :), ce que je demande, c'est le contenu à mettre à l'intérieur. Comment changer la disposition de mon corps pour qu'il ne prenne pas de hauteur mais de largeur lorsque l'utilisateur navigue
Il existe de nombreuses approches différentes. Le plus recommandé par l'industrie serait les boîtes flexibles, j'utilise personnellement float: left sur tous les éléments dont j'ai besoin pour être dans une rangée et / ou display: inline-block pour m'assurer que tous les éléments s'alignent dans une rangée. Je changerais ensuite le html, body pour définir overflow-x: scroll et je pense que cela devrait être la plupart des choses dont vous avez besoin? Le moyen le plus simple est probablement les flex-box, W3schools vous donnera beaucoup de bonnes informations à ce sujet.
Merci pour votre réponse. Cependant, cela n'a pas fonctionné avec le bloc en ligne ni overflow-x: scroll. J'ai essayé avec flexbox mais je n'ai obtenu aucun résultat. Je vais essayer encore une fois
En utilisant flex, nous pouvons réaliser ce dont vous avez besoin:
Je ne sais pas quels sont vos points d'arrêt mais j'ai mis 600px pour la démo:
@media (max-width: 600px) {
/* targeting all wrappers - should probably have some kind of class */
div[id^="wrapper"] {
height: 100vh;
width: 100vw;
flex-basis: 100vw;
flex-shrink: 0;
}
.scroll-container {
width: auto;
height: 100vh;
display: flex;
flex-direction: row;
overflow: auto;
-webkit-scroll-snap-type: x mandatory;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
}
}
Fondamentalement, flex (display: flex) sur le conteneur force tous les wrappers à s'aligner sur une ligne (flex-direction: row). Ensuite, sur les wrappers, nous disons que vous devriez être à 100% de la largeur de la vue (flex-base: 100vw) et que vous ne pouvez pas être plus petit (flex-shrink: 0).
Ensuite, nous commutons simplement le snap de défilement. Cependant, vous voudrez peut-être vérifier que la capture de défilement est prise en charge sur les appareils que vous ciblez https://caniuse.com/?search=scroll-snap
"Tous les héros ne portent pas de capes" Je vous remercie et vous salue Monsieur, pour cette solution entièrement fonctionnelle <3
Bonjour, regardez le css que j'ai créé, cela pourrait vous aider à résoudre votre problème
démo : veuillez noter que cela ne fonctionnerait que sur une largeur mobile inférieure à 1024px. C'est la requête média que j'ai utilisée et vous pouvez la modifier à votre guise.
Code CSS
<meta name="viewport" content="width=device-width, initial-scale=1">
Code HTML
<div class="parent">
<div class="child">1st video</div>
<div class="child">2nd video</div>
<div class="child">3rd video</div>
<div class="child">4th video</div>
<div class="child">5th video</div>
</div>
Balise Meta <-! IMPORTANT
div{
background-color: beige;
border: 1px solid;
}
.child{
height: 100vh;
width: 100%;
}
/* Portrait */
@media only screen
and (max-device-width: 1024px) {
.parent{
display: block;
overflow-x: scroll;
white-space: nowrap;
}
.child{
height: 100%;
width: 100vh;
display:inline-block;
}
}
Merci pour votre réponse, votre temps et vos efforts. J'apprécie vraiment cela ! Cependant, dans votre Repo / Demo, chaque section n'a pas une largeur de 100vw / 100% mais semble être un peu plus
@Mathi haha lol c'est parce que j'ai utilisé border: 1px solid; pour plus de clarté. Je l'ai supprimé. Vous pouvez vérifier maintenant :)
Merci mon pote; D c'est une autre façon cool de le faire, j'aimerais pouvoir donner 2 primes comme vous le méritez également. Cependant, voter contre parce que je n'ai pas validé votre réponse est un peu impoli à mon avis, mais je comprends que vous êtes déçu par la situation de la prime étant donné que vous avez fait des efforts