Discussion :

[happyman2201]

Bonjour tout le monde ,

avez-vous une idée concernant pour changer mon code css en javaScript / jquery je vous montre ma partie pour fait l'effet de bounce j'ai essayer les fonctions mais ça marche pas
voila mon code :

Code css :

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

1
2
3
4
5
6
7
8
9
#s1:target ~ #wrap #nav li:first-child +li a { text-shadow: 0 0 5px blue, 0 0 5px blue, 0 0 5px blue, 0 0 5px blue; }
#s1:target ~ #wrap #slide1 { background-position: 50% 10%; 
     -webkit-animation-duration: .75s;
  animation-duration: 2s;
      -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
    }

j'ai essayé aussi dans la partie script :

Code :

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

1
2
3
4
5
6
7
$("#wrap slide1").css('background-position','50% 10%');
              $("#wrap slide1").css('-webkit-animation-duration','.75s');
              $("#wrap slide1").css('animation-duration','2s');
              $("#wrap slide1").css('-webkit-animation-name','bounce');
              $("#wrap slide1").css('animation-name','bounce');
              $("#wrap slide1").css('-webkit-transform-origin','center'+' '+'bottom');
              $("#wrap slide1").css('transform-origin','center'+' '+'bottom');

ça marche pas les effets comme ce que j'ai fait en css :s
merci d'avance pour votre soutien et votre aide
j'espére d'avoir des réponses

[Diablo_22]

Bonjour,

essaye ceci:

Code :

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

1
2
3
4
5
6
7
8
9
$("document").ready(function(){ 
	$("#wrap slide1").css()"background-position","50% 10%");
	$("#wrap slide1").css("-webkit-animation-duration",".75s");
	$("#wrap slide1").css("animation-duration","2s");
	$("#wrap slide1").css("-webkit-animation-name","bounce");
	$("#wrap slide1").css("animation-name","bounce");
	$("#wrap slide1").css("-webkit-transform-origin","center"+" "+"bottom");
	$("#wrap slide1").css("transform-origin","center"+" "+"bottom");
});

[happyman2201]

Merci beaucoup pour ton aide et surtout ta réponse je l'ai essayé je vais te communiqué mon code jquery car j'ai utiliser les SCROLL

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if($window.scrollTop()==0){
                     $("document").ready(function(){ 
 
                     $("#s1").ready(function(){ 
              $("#wrap slide1").css('background-position','50% 10%');
              $("#wrap slide1").css('-webkit-animation-duration','.75s');
              $("#wrap slide1").css('animation-duration','2s');
              $("#wrap slide1").css('-webkit-animation-name','bounce');
              $("#wrap slide1").css('animation-name','bounce');
              $("#wrap slide1").css('-webkit-transform-origin','center'+' '+'bottom');
              $("#wrap slide1").css('transform-origin','center'+' '+'bottom');                     
            $('#clone').css ( 'left', '280px');
               $(' #clone').css ('top', '300px');   
                     });
                     /**********La section 2 ***************/
                 }else if ($window.scrollTop() > 790){

[Diablo_22]

attention j'ai fait la modif dans mon premier post

$("#wrap slide1").css('background-position','50% 10%');

Code :

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

$("#wrap slide1").css("background-position","50% 10%");

[happyman2201]

Mdrrrrr une bonne idée pour chuck norris =D

Code :

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

1
2
3
4
5
6
7
8
9
10
                 if($window.scrollTop()==0){
 
                     $("document").ready(function(){ 
   $("#wrap slide1").css("background-position","50% 10%");
	$("#wrap slide1").css("-webkit-animation-duration",".75s");
	$("#wrap slide1").css("animation-duration","2s");
	$("#wrap slide1").css("-webkit-animation-name","bounce");
	$("#wrap slide1").css("animation-name","bounce");
	$("#wrap slide1").css("-webkit-transform-origin","center"+" "+"bottom");
	$("#wrap slide1").css("transform-origin","center"+" "+"bottom");

Voila mes modifications le problémes avec google j'ai essayé presque tt les différents types de la recherche sinon pour chuck norris en mode
plutot mon objectif je veux que je déscends à la sèction suivante avec le scroll que l'animation apparait seulement à l'arrivé de la page

[Diablo_22]

peux tu coller ton css

[danielhagnoul]

Un ID doit être unique dans toute la page web.

Si "slide1" est un ID, on doit l'utiliser dans le sélecteur jQuery :

Code :

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

1
2
3
4
5
6
7
8
9
$( "#slide1" ).css({
    "background-position" : "50% 10%",
    "-webkit-animation-duration" : ".75s",
    "animation-duration" : "2s",
    "-webkit-animation-name" : "bounce",
    "animation-name" : "bounce",
    "-webkit-transform-origin" : "center bottom",
    "transform-origin" : "center bottom"
});