Cookie pour aniamtion GSAP (javascript)

gintoxic Messages postés 566 Statut Membre -
mr_demonicon Messages postés 921 Statut Membre - 14 sept. 2014 à 12:39

Bonjour,
j'ai créé une animation de preload avec GSAP (qui utilise javascript) et je voudrais qu cette animation ne fonctionne qu'une seule fois (lorsque le visiteur n'a pas les images et le css en cache)
malheureusement et j'ai essayé, je ne comprends pas comment attribué un cookie pour cette aniamion...

Pourriez-vous m'aider svp ?

merci à vous par avance

--
Si Dieu a créé l'homme, qui a créé Dieu, l'homme non ?

Afficher la suite

1 réponse

mr_demonicon Messages postés 921 Statut Membre 126

Montre ton code
merci
Bonne journée

gintoxic Messages postés 566 Statut Membre 10

$(document).ready(function(){
var wrapper = $('#wrapper');
var loader = $('#preloader');
var loader2 = $('#preloader2');
var loader3 = $('#preloader3');
var sentence = $('#annonce');
sentence.html(sentence.text().replace(/()\w/g, '<span>$&</span>'));
var spans  = $('#annonce > span');
var tableLoder = [loader,loader2,loader3];
var wrapperWdth = (document.body.clientWidth);
var wrapperheight = (document.body.clientHeight);
var tl = new TimelineMax();
$(wrapper).width(wrapperWdth);
$(wrapper).height(wrapperheight);
$('body').css({padding:0,margin:0,backgroundColor:'#000'});
$('#annonce > span').css('display','inline-block');
var finish = $(wrapper).css('z-index','0');

tl.set(wrapper,{css:{position:'fixed',width:'100%',height:'100%',backgroundColor:'#000',zIndex:'4500',opacity:'0.9'}})
.set(loader,{css:{borderTop:'5px solid #c0b688',width:'150px',height:'150px',position:'absolute',left:'50%',marginLeft:'-75px',top:'50%',marginTop:'-75px',borderRadius:'50%',zIndex:'5000'}})
.set(loader2,{css:{borderTop:'4px solid #a7a8aa',width:'130px',height:'130px',position:'absolute',left:'50%',marginLeft:'-65px',top:'50%',marginTop:'-65px',borderRadius:'50%',zIndex:'5000'}})
.set(loader3,{css:{borderTop:'3px solid #dfd49d',width:'110px',height:'110px',position:'absolute',left:'50%',marginLeft:'-55px',top:'50%',marginTop:'-55px',borderRadius:'50%',zIndex:'5000'}})
.set(sentence,{css:{width:'900px',height:'50px',textAlign:'center',position:'absolute',left:'50%',marginLeft:'-450px',top:'50%',marginTop:'-125px',zIndex:'5000',textTransform:'uppercase',fontSize:'42px',color:'#c0b688'}});


	tl.to(tableLoder,2,{rotation:360,repeat:1,opacity:1,delay:0},'here')
	.staggerFrom(spans, 0.3,{autoAlpha:0,rotationX:-90,rotationY:360},0.1,'here')
	.staggerTo([tableLoder,wrapper],2,{opacity:0,zIndex:0},0.2);
	
})

mr_demonicon Messages postés 921 Statut Membre 126

ben pour mettre un cookie

function setCookie(sName, sValue) {
        var today = new Date(), expires = new Date();
        expires.setTime(today.getTime() + (365*24*60*60*1000));
        document.cookie = sName + "=" + encodeURIComponent(sValue) + ";expires=" + expires.toGMTString();
}

apres pour le lire

function getCookie(sName) {
        var cookContent = document.cookie, cookEnd, i, j;
        var sName = sName + "=";
 
        for (i=0, c=cookContent.length; i<c; i++) {
                j = i + sName.length;
                if (cookContent.substring(i, j) == sName) {
                        cookEnd = cookContent.indexOf(";", j);
                        if (cookEnd == -1) {
                                cookEnd = cookContent.length;
                        }
                        return decodeURIComponent(cookContent.substring(j, cookEnd));
                }
        }       
        return null;
}if (navigator.cookieEnabled) {
        // Cookies acceptés
} else {
        alert("Activez vos cookies !");
}

(ou alors

function getCookie(sName) {
        var oRegex = new RegExp("(?:; )?" + sName + "=([^;]*);?");
 
        if (oRegex.test(document.cookie)) {
                return decodeURIComponent(RegExp["$1"]);
        } else {
                return null;
        }
}
if (navigator.cookieEnabled) {
        // Cookies acceptés
} else {
        alert("Activez vos cookies !");
}

)
apres tu met un nom a ce cookie et si il y a ce cookie tu laisse le code css ne pas se precharger (utilise le code qui lis le cookie pour mettre ton prechargement d'image et css)

gintoxic Messages postés 566 Statut Membre 10
Merci à toi, j'ai du mal à saisir ta dernière phrase... en fait je ne comprends pas ce que je dois faire (c'est ce moment là que je ne comprends pas dans les cookie)
```
apres tu met un nom a ce cookie et si il y a ce cookie tu laisse le code css ne pas se precharger (utilise le code qui lis le cookie pour mettre ton prechargement d'image et css)
```
0
gintoxic Messages postés 566 Statut Membre 10

en fait comment attribuer à mon code (animation) ce cookie, à quelmoment je sais qu'il s'agit de mon code qui est concerné par ce cookie ?

je suis navré, je n'arrive pas à comprendre ce système très pratique pourtant..
0
mr_demonicon Messages postés 921 Statut Membre 126

en fait c'est simple la fonction qui lis les cookies retourne la variable $1 donc tu verifie si sName==$1 (ou le nom de ton cookie de base ici c'est une variable universelle a ne pas utilisr car risque de se perdre dans le code) et si oui alors tu n'execute pas le css et tes animations par contre si elle retourne NULL alors tu execute les Css

par exemple
if (sName.$1) { /*do nothing*/;} else {/*tes css*/;}
0

Cookie pour aniamtion GSAP (javascript)

1 réponse

Discussions similaires

Newsletters