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

openElement

> Web Café > Code (JS, PHP, CSS etc.), techniques etc.
  Nouveaux messages Nouveaux messages Fil RSS  - effet gif
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

effet gif

 Répondre Répondre Page  12>
Auteur
Message
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 Sujet: effet gif
    Envoyé : 30 Jan 2016 à 16:12
Bonjour,

j'ai une image et je veux faire un effet "gif" :

- l'image 1 disparait
- puis 3 secondes plus tard une deuxieme image réapparait en fondu
et le tout se répète en boucle

Je ne peux superposer 2 image il faut que je change le src de l'image.

Est-il possible de faire appararaître en boucle, alternativement, en fondu, deux src en modifiant uniquement le src de l'image en question ?


Pour imager c'est dans ce style :

$(function() {
            $('img').fondu().attr('src', '2.png'); /*changer src*/
            }, 3 secondes);
$(function() {
            $('.img').fondu().attr('src', '1.png'); /*rechanger src*/
            }, 3 secondes);
});
$répéter en boucle


Edité par nico38 - 30 Jan 2016 à 16:12
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Jan 2016 à 16:54
Un peu comme un skitter slider?
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é : 30 Jan 2016 à 17:39
<img src="image1.png">

qui devient par  jq :

<img src="image2.png">
puis re :
<img src="image1.png">

le tout en boucle et fondu a chaque changement d'image

(c'est fait sur notepad pas sur oe)


Edité par nico38 - 30 Jan 2016 à 17:41
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Jan 2016 à 17:48
Faudrait le faire avec un setTimeout(fonction,3000) dans un while j'imagine

Edité par Hobby001 - 30 Jan 2016 à 17:48
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é : 30 Jan 2016 à 20:32
oui j'ai essayé de coder avec setTimeout, setInterval etc... mais sans effet
je vais fouiller


edit : par exemple dans l'idée (mais il manque un "fondu" entre le changement de src)

function boucle() {
    setTimeout(function() {
    $('.img-head img').attr('src', '2.png');
  }, 1000);
   
    setTimeout(function() {
    $('.img-head img').attr('src', '1.png');
  }, 2000);

 };
 
 setInterval(boucle, 3000);


mais il faut un fondu (c'est surtout là où je me pose la question) et une boucle


Edité par nico38 - 30 Jan 2016 à 20:58
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Jan 2016 à 22:14
J'ai utilisé setTimeout dans le tuto pour opencart dans OE.  La syntaxe y est bonne sinon je regarderai ça demain

Edité par Hobby001 - 30 Jan 2016 à 22:14
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é : 30 Jan 2016 à 22:18
ce que j'ai mis :
function boucle() {
    setTimeout(function() {
    $('.img-head img').attr('src', '2.png');
  }, 1000);
   
    setTimeout(function() {
    $('.img-head img').attr('src', '1.png');
  }, 2000);

 };
 
 setInterval(boucle, 3000);

ça fonctionne, mais c'est la transition fondu d'un changement de src qui pose surtout probleme, je vois pas comment faire .
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Jan 2016 à 14:40
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Jan 2016 à 16:40
Vous pouvez essayer:

css

.image1{background-image: url("/Files/Image/Fond01.jpg");}

.image2{background-image: url("/Files/Image/Fond02.png");}

js

setInterval(
function(){
var id=$("#WEcadre")
id.fadeOut(500);
setTimeout(
function (){
if (id.hasClass("image1")) {
id.removeClass('image1');
id.addClass('image2');
} else {
id.removeClass('image2');
id.addClass('image1');
}
setTimeout(function(){id.fadeIn(500);},500);
}
,1000);
}
,3000);

Vous pouvez paramétrer ce qui vous tente comme délais

Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Jan 2016 à 21:52
Voici le code qui je viens de tester. Pour ne pas m'embeter avec les liens vers les images, j'ai ajoute (pas par-dessus, juste a cote) un element-image supplementaire avec l'image alternative et mis le class img-alt dessus.


$(function(){
var $orig = $('.img-head img'); // balise image originale dans l'element
var orig_src = $orig.attr('src'); // image d'origine
var alt_src = $('.img-alt img').attr('src'); // juste pour le test, recuperer l'image d'un autre element-image (peu importe ou il se trouve sur la page)

setInterval(fade, 3000);

function fade() {

  var $clone = $orig.clone()
 .css({position: 'absolute', width: '100%', height: '100%', left: 0, top: 0})
      .insertAfter($orig); // image-clone par dessus, pour l'instant avec la meme image dans src
  
  $orig.attr('src', alt_src); // changer l'image dans l'original
  
  var x = alt_src; alt_src = orig_src; orig_src = x; // echanger les images entre variables

  $clone.fadeOut(1000, function(){ $(this).remove(); }) // fade out puis supprimer l'image-clone
  
}
});

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.125 secondes.