Bonjour à tous ! 

Contexte:
J'ai réalisé une animation "loader" pour ma page index (exercice demandé, le loader se lance, ensuite apparait ma page d'accueil) et tout vas bien jusqu'ici. Sur cette page il est possible de cliquer sur une carte qui vous amène à une seconde page. Sur cette seconde page il y a une icône dans l'en-tête qui permet de retourner sur la page index (et arrive mon problème). 
Chaque fois que je reviens sur ma page index mon animation loader se relance, par conséquent je me demande s'il existe un moyen, en html css, de ne charger cette animation qu'une seule et unique fois lorsque l'utilisateur se connecte pour la toute première fois sur le site ? 

j'espère avoir été clair dans mes propos et je remercie  toutes personnes de prendre le temps de répondre.

(PS: peut être en utilisant les conditions Sass ?)  

Bien à vous.

-
Edité par Sarafi 16 septembre 2022 à 16:43:22

Bonjour,

en HTML ou CSS, pas à ma connaissance, non. En posant un cookie ou en utilisant localStorage, ça serait possible, donc en JS ou dans un langage serveur (pour le cookie uniquement).

Bonsoir,

j'utiliserais $_SERVER['HTTP_REFERER']

(donc du PHP)

qui indique l'origine de l'internaute, si l'url d'origine contient mon nom de domaine, on passe l'animation, sinon, on anime

le problème du cookie, c'est combien de temps le laisser actif ? 5 mn ? 24 h ? si l'internaute est allé boire un verre et revient dans 10 mn ?

-
Edité par ChrisLebure 16 septembre 2022 à 20:40:01

Sarafi a écrit:

Bonjour à tous ! 

Contexte:
J'ai réalisé une animation "loader" pour ma page index (exercice demandé, le loader se lance, ensuite apparait ma page d'accueil) et tout vas bien jusqu'ici. Sur cette page il est possible de cliquer sur une carte qui vous amène à une seconde page. Sur cette seconde page il y a une icône dans l'en-tête qui permet de retourner sur la page index (et arrive mon problème). 
Chaque fois que je reviens sur ma page index mon animation loader se relance, par conséquent je me demande s'il existe un moyen, en html css, de ne charger cette animation qu'une seule et unique fois lorsque l'utilisateur se connecte pour la toute première fois sur le site ? 

j'espère avoir été clair dans mes propos et je remercie  toutes personnes de prendre le temps de répondre.

(PS: peut être en utilisant les conditions Sass ?)  

Bien à vous.

-
Edité par Sarafi il y a environ 5 heures

Bonjour/bonsoir,

ce que l'on ne sait pas c'est comment tu fais .(Comment ce loader est initialisé puis retiré une fois ta page chargé).

Est ce 100% CSS, JavaScript, autre ?

En sachant comment tu fais, il serait possible de répondre en fonction des possibilité que ton code existant ou bien t'orienter vers une autre méthode. Sans ton code, il faut deviner ce que tu as et, depuis nos boules de cristal, te proposer une solution éventuelle.

Je t'avoue que ma boule est cassée et qu'elle ne fonctionnait pas en fait

Cdt

Lamecarlate a écrit:

Bonjour,

en HTML ou CSS, pas à ma connaissance, non. En posant un cookie ou en utilisant localStorage, ça serait possible, donc en JS ou dans un langage serveur (pour le cookie uniquement).

Merci pour ta réponse, encore une fois !

gcyrillus a écrit:

Sarafi a écrit:

Bonjour à tous ! 

Contexte:
J'ai réalisé une animation "loader" pour ma page index (exercice demandé, le loader se lance, ensuite apparait ma page d'accueil) et tout vas bien jusqu'ici. Sur cette page il est possible de cliquer sur une carte qui vous amène à une seconde page. Sur cette seconde page il y a une icône dans l'en-tête qui permet de retourner sur la page index (et arrive mon problème). 
Chaque fois que je reviens sur ma page index mon animation loader se relance, par conséquent je me demande s'il existe un moyen, en html css, de ne charger cette animation qu'une seule et unique fois lorsque l'utilisateur se connecte pour la toute première fois sur le site ? 

j'espère avoir été clair dans mes propos et je remercie  toutes personnes de prendre le temps de répondre.

(PS: peut être en utilisant les conditions Sass ?)  

Bien à vous.

-
Edité par Sarafi il y a environ 5 heures

Bonjour/bonsoir,

ce que l'on ne sait pas c'est comment tu fais .(Comment ce loader est initialisé puis retiré une fois ta page chargé).

Est ce 100% CSS, JavaScript, autre ?

En sachant comment tu fais, il serait possible de répondre en fonction des possibilité que ton code existant ou bien t'orienter vers une autre méthode. Sans ton code, il faut deviner ce que tu as et, depuis nos boules de cristal, te proposer une solution éventuelle.

Je t'avoue que ma boule est cassée et qu'elle ne fonctionnait pas en fait

Cdt

Comme écrit, je souhaitais une réponse en HTML CSS, je laissais donc sous entendre que je n'utilisais que CSS, pardonnes moi si cela n'a pas été clair. Mais mon code n'est pas pertinent pour cette demande, ce pourquoi je ne l'ai pas notifié. Mais si jamais je l'inscris ici.

/* Index Loader */
// spin
.loader {
    animation: loader-out 0ms 2950ms forwards;
    &__spinner {
        animation: spin 1000ms 150ms linear 2.5 forwards;
        transform-origin: center;
    }
}


@keyframes spin {
   0% {
    transform: rotate(0deg);
   } 
   100% {
    transform: rotate(360deg);
   }
}

@keyframes loader-out {
    0% {
        transform: scale(0);
    }
    100% {
        transform: translate(-99999px);
    }
}

Bonjour,

j'ai oublié ça quand j'ai répondu la première fois :

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Merci de modifier votre titre. Pour cela, éditez le premier message de votre sujet.

(titre originel : Question animation)