BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

 > Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS - [Tuto] - Zoom image
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto] - Zoom image
 Répondre Répondre Page  <12
Auteur
Message inverser le tri
  Sujet Recherche Sujet Recherche  Options des sujets Options des sujets
MicroVinc allez vers le bas
Moderator Group
Moderator Group


Depuis le: 21 Août 2012
Pays: Bretagne
Status: Inactif
Points: 4460 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MicroVinc Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Oct 2015 à 15:00
Si on utilise l'ombre dans les propriétés de cadre OE elle reste sur place de la taille d'origine image.
-Éléments pour OpenElement : ICI
-Tutoriels pour OpenElement : ICI


La Bretagne, un État dans l'État
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Oct 2015 à 14:57
je sais pas si j'ai bien compris l'histoire de l'ombre et de la rotation mais si c'est ce que je pense, ça marche :

exemple (ombre + rotation + zoom)

il suffit d'écrire ".zoom, .zoom img" au lieu de juste ".zoom img"

EDIT : exemple de code
.zoom, .zoom img {
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.zoom img:hover
{
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
  transform: scale(2);
}


Edité par nico38 - 11 Oct 2015 à 15:01
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
MicroVinc allez vers le bas
Moderator Group
Moderator Group


Depuis le: 21 Août 2012
Pays: Bretagne
Status: Inactif
Points: 4460 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MicroVinc Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Oct 2015 à 08:47
Message posté par nico38 nico38 a écrit:

j'apporte juste une deuxieme solution avec un code JS et des sélecteurs en moins : (les valeurs sont différentes par rapport à Hobby parce que c'est juste un copier coller d'un de mes sites et que je suis fainéant)

1. mettre élément image (donner class perso : "zoom")
2. Mettre Dépassement --> Masquer (au Contenu de l'élément image)
3. copier coller ce code Bloc Source Header/CSS

<font color="#CC0000">.zoom img {
-webkit-transition: ease-out 0.8s;
-moz-transition: ease-out 0.8s;
-o-transition: ease-out 0.8s;
-ms-transition: ease-out 0.8s;
transition: ease-out 0.8s;
}
.zoom img:hover
{
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
  transform: scale(1.05);
}


<font color="#000000">valeur modifiables (mettre des points et pas des virgules) :
0.8s : durée du zoom (modifiable ex : 2s, 1.8s...)
1.05 : agrandissement (1.05 = 5% plus grand, 1.5 = 50% plus grand, 2 = 2x plus grand etc...)





L'inconvénient de cette méthode est que si l'on applique des effets rotation et d'ombre sur le cadre image le l'ombre ne zoom pas...
-Éléments pour OpenElement : ICI
-Tutoriels pour OpenElement : ICI


La Bretagne, un État dans l'État
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Oct 2015 à 01:38
j'apporte juste une deuxieme solution avec un code JS et des sélecteurs en moins : (les valeurs sont différentes par rapport à Hobby parce que c'est juste un copier coller d'un de mes sites et que je suis fainéant)

1. mettre élément image (donner class perso : "zoom")
2. Mettre Dépassement --> Masquer (au Contenu de l'élément image)
3. copier coller ce code Bloc Source Header/CSS

.zoom img {
-webkit-transition: ease-out 0.8s;
-moz-transition: ease-out 0.8s;
-o-transition: ease-out 0.8s;
-ms-transition: ease-out 0.8s;
transition: ease-out 0.8s;
}
.zoom img:hover
{
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
  transform: scale(1.05);
}


valeur modifiables (mettre des points et pas des virgules) :
0.8s : durée du zoom (modifiable ex : 2s, 1.8s...)
1.05 : agrandissement (1.05 = 5% plus grand, 1.5 = 50% plus grand, 2 = 2x plus grand etc...)

Edité par nico38 - 11 Oct 2015 à 01:47
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Oct 2015 à 01:24
pourquoi ne pas mettre la class loupe_img directement à l'élément image ?

(sinon toutes les images vont avoir cet effet là (exemple : le logo du site, et àa enlèvera un code JS; à moins que quelque chose m'échappe)



à quoi sert l’étape 3 puisqu'elle est réalisée dans l'étape 1 ? ah nan j"ai mal lu

Edité par nico38 - 11 Oct 2015 à 01:34
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
MicroVinc allez vers le bas
Moderator Group
Moderator Group


Depuis le: 21 Août 2012
Pays: Bretagne
Status: Inactif
Points: 4460 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MicroVinc Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 10 Oct 2015 à 21:12
Bonjour, un petit tuto pour un effet sympa... Et surtout sans utiliser un Bloc de code visuel, par conséquent la disposition de vos images seront visuelles et directement dans l'environnement OE.

Difficulté : Débutant (qui connait quand même l'environnement du logiciel OE)
Intégration : Totale avec l’environnement OE

Effet :

ETAPE 1 : 

1-Ajouter l'élément "image" sur votre page 
2-Choisir votre image 
2-Ajouter lui la classes perso : zoom_img 

ETAPE 2 :

Cette étape permet, grâce au CSS3 l'effet zoom lorsque l'on passe la souris dessus.
1-Ajouter l'élément "Bloc de code (source)" sur votre page 
2-Paramétrer le Bloc de code source en Type : "CSS" et Position : "Header" 
3-Copier le code ci-dessous et le coller dans le Bloc de code source :
/* Zoom image sur hover */
.loupe_img {
	overflow: hidden;
}

.loupe_img > img {
	transition: all 2s;
	-moz-transition: all 2s;
	-ms-transition: all 2s;
	-webkit-transition: all 2s;
	-o-transition: all 2s;
}
 
.zoom_img:hover > .loupe_img > img {
	transform: scale(1.35);
	-moz-transform: scale(1.35);
	-ms-transform: scale(1.35);
	-webkit-transform: scale(1.35);
	-o-transform: scale(1.35);
}

ETAPE 3 :

Cette étape permet d'appliquer une class à la balise parent de la balise <img>
1-Ajouter l'élément "Bloc de code (source)" sur votre page 
2-Paramétrer le Bloc de code source en Type : "javascript" et Position : "Header" 
3-Copier le code ci-dessous et le coller dans le Bloc de code source :
// DÉBUT Zoom image
$( document ).ready(function() {
	$( document ).find('img').parent().each(function () {
        $(this).addClass('loupe_img');
});
	});
// FIN Zoom image

Smile Voilà pour le petit effet sympa...



Edité par MicroVinc - 10 Oct 2015 à 21:14
-Éléments pour OpenElement : ICI
-Tutoriels pour OpenElement : ICI


La Bretagne, un État dans l'État
Haut de la page
 Répondre Répondre Page  <12
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.047 secondes.