Imprimer la Page | Fermez la fenêtre

effet gif

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Code (JS, PHP, CSS etc.), techniques etc.
Description du Forum: Discussions concernant le développement Web en général
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=21784
Date: 29 Mar 2024 à 11:03
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com


Sujet: effet gif
Posté par: nico38
Sujet: effet gif
Posté le: 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


-------------
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"



Réponses:
Posté par: Hobby001
Posté le: 30 Jan 2016 à 16:54
Un peu comme un skitter slider?

-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: nico38
Posté le: 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)


-------------
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"


Posté par: Hobby001
Posté le: 30 Jan 2016 à 17:48
Faudrait le faire avec un setTimeout(fonction,3000) dans un while j'imagine

-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: nico38
Posté le: 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


-------------
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"


Posté par: Hobby001
Posté le: 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

-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: nico38
Posté le: 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"


Posté par: Hobby001
Posté le: 31 Jan 2016 à 14:40
Regardez ceci:

http://stackoverflow.com/questions/14795007/simple-fading-image-swap" rel="nofollow - http://stackoverflow.com/questions/14795007/simple-fading-image-swap


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 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



-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Dmit OE
Posté le: 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
  
}
});



Posté par: Hobby001
Posté le: 31 Jan 2016 à 22:44
Fade-In et Fade-Out simultanés

$(document).ready(
function(){
// superposer les panneaux
var PicTop = $('#WEpanneau1').offset().top;
var PicLeft = $('#WEpanneau1').offset().left;
$('#WEpanneau2').animate({top:PicTop, left:PicLeft});
}
);

setInterval(fusion,6000);

function fusion(){
var progres=0;  // variable de mesure du progres
var vitesse=1;  // vitesse du fade 1 est plus lent que 5

// fade in panneau2 et fadeout panneau1
for(progres=100; progres>0; progres=progres-vitesse){
$('#WEpanneau1').fadeTo(1,progres/100);
$('#WEpanneau2').fadeTo(1,(100-progres)/100);
}
// fade in panneau1 et fadeout panneau2
setTimeout(
function(){
for(progres=100; progres>0; progres=progres-vitesse){
$('#WEpanneau2').fadeTo(1,progres/100);
$('#WEpanneau1').fadeTo(1,(100-progres)/100);
}
}
,3000);
}


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: nico38
Posté le: 02 Feb 2016 à 21:40
merci, j'vais tester tout ça


-------------
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net