Discussion :

[Gilles_73]

Bonjour à tous,

Designer graphiste dans la vie, je viens de finaliser une nouvelle version de mon site internet pour présenter une sélection de mes travaux.

www.gillesnolorgues.com

Mais je rencontre deux problèmes que je n'arrive pas du tout à résoudre.
Le premier est au niveau de mes animations CSS.

Pour les transitions CSS fade de mes pages, j'utilise le plug Animsition et pour les effets CSS Fadeup sur mes images, j'utilise le plug Wow et la bibliothèque Animate CSS.

Mon souci, c'est lorsque la page se charge pour la première fois, mes animations Fadeup sur les images se sont déjà déclenchées.
Par contre, une fois ces mêmes pages dans le cache, cela marche nickel.
Cela doit être un problème javascript ?

Mon second problème est sur IOS, c'est le fait d'avoir à effectuer un double Touch sur les images (situées sur la homepage) pour déclencher le lien....Dois-je ajouter un script JS ? Modifier mes CSS ?

Merci d'avance à tous pour votre aide.

[01001111]

Bonjour Gilles,

à priori il faut travailler sur des évènements onload en javascript pour éviter ce genre de problème.
soit window.onload, soit $(document).ready en jquery, ou équivalent dans d'autre librairies, soit des évènements onload pour chaque image en vérifiant bien que chacune est chargée avant de lancer l'animation.

ceci dit je ne vois pas ce problème maintenant au premier visionnage sur chrome, sur quel navigateur ce problème a-t-il lieu?
ha, iOS safari le fait entre autre, je viens de le voir.
pour iOS, comment ces changements dans le site sont ils programmés?
un bout de code js à voir?

dans jquery.animsition.js je vois ceci:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
          $(options.linkElement).on('click.' + namespace, function(event) {
            event.preventDefault();
            var $self = $(this);
            var url = $self.attr('href');
 
            // middle mouse button issue #24
            // if(middle mouse button || command key || shift key || win control key)
            if (event.which === 2 || event.metaKey || event.shiftKey || navigator.platform.toUpperCase().indexOf('WIN') !== -1 && event.ctrlKey) {
              window.open(url, '_blank');
            } else {
              methods.pageOut.call(_this,$self,url);
            }
 
          });

ce code fait sûrement conflit avec un onmouseover quelquepart, ce qui amène iOS à exécuter d'abord le mouseover puis le click,
seule solution dans ce cas, faire une règle alternative qui désactive le mouseover si safari iOS
Mais j'opterai pour étendre cette annulation de comportement à tout périphérique tactile.
Donc pour détection de tactile:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function is_touch_device() { 
        try { 
              document.createEvent("TouchEvent"); 
              return true; 
        } catch (e) {
              return false; 
        } 
}

Enfin petite note:
la tétière est en chevauchement avec le corps de la page quand on scrolle, ça engendre des problèmes de lisibilité.