Besoin d'aide animations CSS

Version imprimable

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:

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:

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 :roll::roll::roll::roll:

Bonjour,

essaye ceci:

Code:

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");
});

diablo_22

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:

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){

19/08/2015, 15h35
Diablo_22

attention j'ai fait la modif dans mon premier post

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

Code:

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

diablo_22

Mdrrrrr une bonne idée pour chuck norris =D
Code:

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 :mur::arf:
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

19/08/2015, 15h44
Diablo_22

peux tu coller ton css

diablo_22

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
@-webkit-keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}
.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
}
#wrap {
	/* position du conteneur pour le préparer à bouger */
	position: relative;
	top: 8px;
 
	/* on prépare la transition à venir */
	-webkit-transition: top 1.4s cubic-bezier(.02,.22,.12,1.80);
	-moz-transition: top 1.4s cubic-bezier(.02,.22,.12,1.80);
	-ms-transition: top 1.4s cubic-bezier(.02,.22,.12,1.80);
	-o-transition: top 1.4s cubic-bezier(.02,.22,.12,1.80);
	transition: top 1.4s cubic-bezier(.02,.22,.12,1.80);
 
}
#slide1,#slide2,#slide3 {
	/* height à adapter avec media queries */
	height: 1100px;
	padding-top: 130px;
	/* préparation des transitions */
	transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
}
/* targeted elements */
 
#s1:target ~ #wrap { top:0px; }
#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;
	}
#s1:target ~ #wrap #slide2 { background-position: 50% 10%; }
#s1:target ~ #wrap #slide3 { background-position: 50% -60%; }
#s1:target ~ #wrap #trooper { left: -180px; top: 300px; -webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg); }
#s1:target ~ #wrap #clone { left: 280px; top: 300px;-webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(20deg); }
#s1:target ~ #wrap .slide_inside{	
	-webkit-animation-duration: 2.4s;
  animation-duration: 2.4s;
	  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
 
#s2:target ~ #wrap { top:-971px; }
#s2:target ~ #wrap #nav li:first-child + li +li a { text-shadow: 0 0 5px orangered, 0 0 5px orangered, 0 0 5px orangered, 0 0 5px orangered }
#s2:target ~ #wrap .slide_inside { background-position: 50% 36%; 
-webkit-animation: bounce 2s ease-out;
	-moz-animation: bounce 2s ease-out;
	-o-animation: bounce 2s ease-out;
	animation: bounce 2s ease-out;
	 }
#s2:target ~ #wrap #slide2 { 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;}
#s2:target ~ #wrap #slide3 { background-position: 50% -30%; }
#s2:target ~ #wrap #trooper { left: -300px; top: 150px; -webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-ms-transform: rotate(-7deg);-o-transform: rotate(-7deg);transform: rotate(-7deg); }
#s2:target ~ #wrap #clone { left: 940px; top: 250px; -webkit-transform: rotate(3deg);-moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(0deg);transform: rotate(3deg); }
#s2:target ~ #wrap #clone:hover{  -webkit-transform:rotate(-360deg);
    -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
    transform:rotate(-360deg);}
#s2:target ~ #wrap #trooper:hover{
	-webkit-transform:scale(2); /* Safari and Chrome */
    -moz-transform:scale(2); /* Firefox */
    -ms-transform:scale(2); /* IE 9 */
    -o-transform:scale(2); /* Opera */
     transform:scale(2);
}
.fb-like { top: -3px; }
.or_follow { display: inline-block; vertical-align:top; margin-left: 135px; margin-right: 5px; }
	</style>

19/08/2015, 16h03
Diablo_22

Jette un oeil à ceci je pense que cela va t'aider:

http://api.jquery.com/css/
19/08/2015, 16h08
happyman2201

diablo_22

Merci beaucoup diablo_22 ça a l'aire intéressant
je suis en mode :aie::aie::aie: mdrr

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:

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"
});