Besoin d'aide animations CSS

**happyman2201** · 19/08/2015, 15h20

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** · 19/08/2015, 15h28

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** · 19/08/2015, 15h33

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** · 19/08/2015, 15h35

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** · 19/08/2015, 15h40

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** · 19/08/2015, 15h44

peux tu coller ton css

**happyman2201** · 19/08/2015, 15h49

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

**Diablo_22** · 19/08/2015, 16h03

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

http://api.jquery.com/css/

**happyman2201** · 19/08/2015, 16h08

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

mdrr

**danielhagnoul** · 19/08/2015, 16h42

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

Besoin d'aide animations CSS

JavaScript

Discussions similaires

Partager

Partager