Menu

Animation d'ouverture vers du contenue [Résolu/Fermé]

Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
- - Dernière réponse : astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
- 19 oct. 2017 à 10:27
Bonjour,

je cherche a faire quelque chose que je ne pensais pas aussi difficile a réaliser ...
peut être que avec votre aide ce problème peut devenir simple, ce ne serais pas la première fois.

je m'explique :
je désire une page avec deux background différent séparé en diagonal.
les deux partie serais cliquable mais afficherais par la suite deux contenue différent.

pour être plus précis :
une fois l'un ou l'autre des deux background cliqué les deux images ce sépare (avec une animation ?) laissant place au contenue désiré et donc définie par la partie cliqué.

le tout étant sur une même page html dans le meilleurs des cas.

voici ce que j'ai déjà fait de mon coté, ce n'est pas grand chose :

.wrap {
  postion: relative;
  width: 100%;
  background-color: #fff;
  /*background-image: url("../img/BCG/Family.jpg");*/
}

.bg:before {
  position: absolute;
  width: 100%;
  height: 1005px;
  content: '';
  background-color: #000;
  /*background-image: url("../img/BCG/Pro.jpg");*/
  transform-origin: left bottom;
  top: 0;
  left: 0;
  -webkit-transform: skew(0deg, -27deg);
  -moz-transform: skew(0deg, -27deg);
  -ms-transform: skew(0deg, -27deg);
  -o-transform: skew(0deg, -27deg);
  transform: skew(0deg, -27deg);
}


et le html ici :

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="css/home.css" />
</head>

<body>
  <div class="wrap">
    <div class="bg"></div>
  </div>
</body>
</html>


il reste un peu "tout" a faire.
pour le moment je me sent capable de resoudre les probléme suivant :
- remplacer les couleurs par des images.
- rendre les deux partie cliquable
- définir les contenues des deux partie

mais les partie suivante me pose de gros soucis :
- page pas responsive
- animation de séparation des background (js j'imagine)
- définir que tel background fait apparaître tel contenue.

voila tout, j’espère avoir était suffisamment claire pour vous donner envie de me venir en aide. merci de votre aide.

Afficher la suite 

4 réponses

Meilleure réponse
Messages postés
2378
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
2 février 2018
391
1
Merci
Salut,

Un début de piste :
<div class="cadre">
  <div class="volet volet-gauche" data-content="1"></div>
  <div class="volet volet-droite" data-content="2"></div>
  <div class="content"></div>
</div>


.cadre {
  padding-top: 100%;
  position: relative;
  overflow: hidden;
}

.volet {
  position: absolute;
  z-index: 10;
  width: calc(1.414 * 100%);
  height: calc(1.414 * 100%);
  transition: all 2s ease;
}

.volet-gauche {
  background-color: black;
  top: -70.5%;
  left: -70.5%;
  transform: rotate(-45deg);
}

.volet-droite {
  background-color: blue;
  top: 29.5%;
  right: -70.5%;
  transform: rotate(-45deg);
}

.cadre.open .volet-gauche {
  transform: translateY(-100%);
}

.cadre.open .volet-droite {
  transform: translateY(100%);
}

.content {
  background: #ccc;
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}


/* require jQuery */
$(function() {
	$('.volet').on('click', function() {
  	var idContent = $(this).attr('data-content');
  	console.log('clic ' + idContent);
    
    var cadre = $(this).parent('.cadre');
    cadre.addClass('open');
    
    $('.content', cadre).html(idContent);
  });
});


Bonne journée,

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 43884 internautes nous ont dit merci ce mois-ci

astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
bonsoir Pitet,

merci de ta réponse elle m'intrigue pas mal.
j'essaie de tout comprendre en faisant des tests dessus.

saurais tu comment faire pour que il n'y est pas d’ascenseur sur ma page ?
j'essaie de redresser les deux blocs et donc l'angle de la séparation mais c'est pas simple....
Pitet
Messages postés
2378
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
2 février 2018
391 -
Le positionnement css des volets sur la solution que j'ai proposé est vraiment bancale.
Puisque tu as trouvé une solution plus propre dans ton dernier message, je te conseil d'utiliser celle-ci.

Pour tout de même répondre à ta question, je n'ai pas défini de largeur sur mon div principale (.cadre), et puisqu'un div occupe toute la largeur disponible, celui-ci s'adapte automatiquement à la largeur de la page (donc pas de scroll/ascenseur horizontal).
Pour la hauteur du cadre principal, j'ai utilisé la technique du padding-top: 100%; pour que le cadre est toujours la forme d'un carré. Tu as donc un ascenseur vertical si la hauteur de la page est plus petite que la hauteur de ce carré.
astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 > Pitet
Messages postés
2378
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
2 février 2018
-
je suis en train d'avancé sur mon problème, je suis tombé sur une explication assez propre de cette problématique.
Mais ta réponse m'aura quand même servie, je m'en suis inspiré pour bon nombre de modification.

je poste mon code quand j'ai quelque chose de concret et de satisfaisant.
je vais tout de même avoir besoin de votre aide pour certaines choses.
Messages postés
2378
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
2 février 2018
391
1
Merci
Pour ajouter une image non incliné dans les "triangles", une solution simple est d'ajouter un div permettant d'afficher l'image via background puis d'appliquer une rotation inverse au triangle.

Par exemple :
<div class="wrap">
  <a class="link-first" rel="nofollow noopener noreferrer" target="_blank"><div class="image"></div></a>
  <a class="link-second" rel="nofollow noopener noreferrer" target="_blank"><span>second background</span></a>
</div>


.wrap .link-first .image {
  height: 100%;
  background: url('https://www.w3schools.com/css/img_fjords.jpg');
  background-size: cover;
  background-position: center;
  transform: rotate(-27deg);
  transform-origin: 0 0;
}


Petit conseil au passage : évite l'utilisation des balises html dans ton css (a, span) et préfère l'utilisation de classe. Cela permet de ne pas avoir à modifier ton code css si jamais tu veux modifier ta structure html (par exemple remplacer les balises a par button).

Pour les autres points (animation et contenu) mon premier message propose un début de solution. N'hésite pas si tu as des questions à ce sujet.

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 43884 internautes nous ont dit merci ce mois-ci

astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
waouw, ca marche super du premier coup, mais uniquement pour un seul des deux triangle du coup.

j'essai de suivre tes explication pour le second .
merci beaucoup
astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
bon j'ai bien du mal enfaîte ...
j'arrive a descendre ma seconde image, avec la bonne inclinaison mais pas a lui restituer la bonne forme ("triangle") du coup elle ce superpose a la premier image.

peu tu me donner de nouveau de l'aide ?
Pitet
Messages postés
2378
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
2 février 2018
391 -
Ne pas oublier de reprendre le même "transform-origin" que le triangle pour incliner l'image. Il faut également ajouter un overflow: hidden; pour que l'image ne dépasse pas du triangle :
<div class="wrap">
<a href="#" rel="nofollow noopener noreferrer" target="_blank" class="link-first"><div class="image"></div></a>
    <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="link-second"><div class="image"></div></a>
  </div>

.wrap .link-first .image {
  height: 100%;
  background: url('https://www.w3schools.com/css/img_fjords.jpg');
  background-size: cover;
  background-position: center;
  transform: rotate(-27deg);
  transform-origin: 0 0;
}

.wrap .link-second .image {
  height: 100%;
  background: url('https://www.w3schools.com/css/img_lights.jpg');
  background-size: cover;
  background-position: center;
  transform: rotate(-27deg);
  transform-origin: 100% 100%;
}

.link-first, .link-second {
  overflow: hidden;
}
astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
merci pitet pour ton aide !
commencé la journée avec du code fonctionnel c'est le top !

je me penche donc sur ta première réponse pour parvenir a crée l’animation.
je vous tiens au courant dans la journée !
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2
0
Merci
j'ai continué de recherché des solutions.
et j'ai fini par trouvé quelque chose de très similaire a ce que je recherche avec quelque truc en moins quand même :
https://codepen.io/dusigner/pen/NqmXzX

histoire d'illustrer mes propos donné plus haut.
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2
0
Merci
voici ou j'en suis :

- responsive : OK
- full screen : OK
- diagonal : OK
- 2 blocs : OK
- cliquable : OK

- background : KO (avoir 2 images en fond non incliné)
- animation : KO (animation d'ouverture après un clique)
- contenue : KO (modification du contenue en arrière plan celons le bloc choisie)

.wrap {
    position: relative;
    width: 99.5vw;
    height: 51.5vw;
    border: 1px solid #999;
    overflow: hidden;
}
.wrap a {
    position: absolute;
    width: 112vw;
    height: 51vw;
}
.wrap a:hover {
  filter: opacity(0.8);
}
.wrap a span {
    position: absolute;
    font-size: 2em;
}

.wrap a:nth-child(1) {
    transform-origin: 0 0;
    transform: rotate(27deg);
    background: #ccc;
}
.wrap a:nth-child(1) span {
    top: 25%;
    left: 25%;
    transform: rotate(-27deg);
    color: #036;
}

.wrap a:nth-child(2) {
    right: 0;
    transform-origin: 100% 100%;
    transform: rotate(27deg);
    background: #036;
}
.wrap a:nth-child(2) span {
    top: 55%;
    right: 25%;
    transform: rotate(-27deg);
    color: #fff;
}


<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="css/home.css" />
  <script src="js/onclic.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
  <div class="wrap">
    <a href="#" rel="nofollow noopener noreferrer" target="_blank"><span>first background</span></a>
    <a href="#" rel="nofollow noopener noreferrer" target="_blank"><span>second background</span></a>
  </div>
</body>
</html>


des idées pour me venir en aide ?
merci de votre aide.