Animation d'ouverture vers du contenue
Résolu
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
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 :
et le html ici :
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.
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.
A voir également:
- Animation d'ouverture vers du contenue
- Page d'ouverture google - Guide
- Windows 7 vers windows 10 - Accueil - Mise à jour
- Clavier qwerty vers azerty - Guide
- Word a trouvé du contenu illisible - Guide
- Mise a jour android 4.4.2 vers 5 - Forum Téléphones & tablettes Android
4 réponses
Salut,
Un début de piste :
Bonne journée,
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,
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 :
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.
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.
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;
}
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.
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.
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)
des idées pour me venir en aide ?
merci de votre aide.
- 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.
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....
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é.
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.