écrêtage des étiquettes avec z-index

J'ai l'étiquette verticale "PINK" alignée au milieu d'une section. Lorsque je passe à la section suivante, le "PINK" est couvert par la section suivante qui a un indice z plus élevé.écrêtage des étiquettes avec z-index

div.back1 { 
 
    background-color: #FF00FF; 
 
    position: relative; 
 
    width: 100%; 
 
    height: 2000px; 
 
    z-index: 10; 
 
} 
 
div.text1 { 
 
\t transform: rotate(-90deg); 
 
    position: fixed; 
 
    top: 50%; 
 
    background-color: #FFFFFF; 
 
    z-index: 20; 
 
} 
 
div.back2 { 
 
    background-color: #0000FF; 
 
    position: relative; 
 
    width: 100%; 
 
    height: 2000px; 
 
    z-index: 30; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<div class="text1">PINK</div> 
 
<div class="back1"></div> 
 
<div class="back2"></div> 
 

 
</body> 
 
</html>

Je voudrais avoir un deuxième titre « BLUE » dans la deuxième section apparaisse comme indiqué dans le mockup suivant.

Est-il possible d'organiser les z-index pour obtenir ce résultat? Y a-t-il une autre meilleure façon de découper les étiquettes, en gardant leur alignement à 50% de la fenêtre?

Merci beaucoup d'avance pour toute contribution!

Source

2017-06-09 Claudio Sinopoli

Intéressant. Je n'en ai absolument aucune idée, mais j'aimerais aussi le savoir. –

pourquoi ne pas simplement augmenter l'index z donc c'est toujours sur le dessus et ensuite utiliser JS pour changer le libellé. – Seabizkit

Essayez ce code

depuis que vous avez taguée jquery, je l'ai utilisé pour ajouter la classe fixed

$(document).ready(function(){ 
 
$('.blue-text').hide(); 
 
$(window).scroll(function() { 
 
if ($('.blue').offset().top <= $('.pink-text').offset().top + 40) 
 
{ 
 
    $('.blue-text').show(); 
 
    if($('.blue').offset().top <= $('.pink-text').offset().top){ 
 
    $('.blue-text').addClass('fixed'); 
 
    } 
 
} 
 
else{ 
 
    $('.blue-text').removeClass('fixed'); 
 
    $('.blue-text').hide(); 
 
} 
 
}); 
 
});

div.back1 { 
 
    background-color: #FF00FF; 
 
    position: relative; 
 
    width: 100%; 
 
    height: 2000px; 
 
    z-index: 10; 
 
} 
 
div.text1.fixed { 
 
\t transform: rotate(-90deg); 
 
    position: fixed; 
 
    top: 50%; 
 
    background-color: #FFFFFF; 
 
    z-index: 20; 
 
} 
 
div.back2 { 
 
    background-color: #0000FF; 
 
    position: relative; 
 
    width: 100%; 
 
    height: 2000px; 
 
    z-index: 30; 
 
} 
 
.blue,.pink { 
 
    position: relative; 
 
} 
 
.text1 { 
 
    position: absolute; 
 
    top: 10px; 
 
    z-index: 31; 
 
    transform: rotate(-90deg); 
 
    background-color: #FFFFFF; 
 
} 
 
.text1.blue-text.fixed{ 
 
    z-index: 31; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="color"> 
 
<div class="pink"> 
 
<div class="text1 pink-text fixed">PINK</div> 
 
<div class="back1"></div> 
 
</div> 
 
<div class="blue"> 
 
<div class="text1 blue-text">BLUE</div> 
 
<div class="back2"></div> 
 
</div> 
 
</div>

Source

2017-06-09 09:59:25 Amal

l'étiquette bleue défile avec le fond bleu si –

@KarlusdaWakoko voir mon code mis à jour – Amal

@Amal l'effet visuel est que, bien que - cite KarlusdaWakoko - l'étiquette bleue défile avec le fond bleu. –

écrêtage des étiquettes avec z-index

Répondre

Questions connexes