Antivirus offre spéciale - jusqu'à 60 % de réduction avec 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
Avatar

Depuis le: 18 Jan 2014
Status: Inactif
Points: 3903
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
Status: Inactif
Points: 4373
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?
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros.
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 18 Jan 2014
Status: Inactif
Points: 3903
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
Status: Inactif
Points: 4373
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
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros.
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 18 Jan 2014
Status: Inactif
Points: 3903
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
Status: Inactif
Points: 4373
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
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros.
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 18 Jan 2014
Status: Inactif
Points: 3903
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
Status: Inactif
Points: 4373
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
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros.
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada
Status: Inactif
Points: 4373
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

Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros.
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 31 Mai 2012
Status: Inactif
Points: 14010
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 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,031 secondes.
Acheter votre vélo en ligne