Animation d'ouverture vers du contenue
Résolu/Fermé
A voir également:
- Animation d'ouverture vers du contenue
- Windows 7 vers windows 10 - Guide
- Word a trouvé du contenu illisible - Guide
- Transferer photo android vers pc - Guide
- Page d'ouverture google - Guide
- Qwerty vers azerty - Guide
4 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
17 oct. 2017 à 15:48
17 oct. 2017 à 15:48
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,
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
18 oct. 2017 à 15:52
18 oct. 2017 à 15:52
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.
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
19 oct. 2017 à 09:57
19 oct. 2017 à 09:57
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;
}
Utilisateur anonyme
17 oct. 2017 à 22:26
17 oct. 2017 à 22:26
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.
Utilisateur anonyme
18 oct. 2017 à 11:52
18 oct. 2017 à 11:52
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.
17 oct. 2017 à 19:35
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....
18 oct. 2017 à 10:47
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é.
18 oct. 2017 à 11:26
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.