I try to animate objects with the jquery plugin Jquery Transit : http://ricostacruz.com/jquery.transit/ but it not working. so I want to coding like this https://codepen.io/sandrasofia/pen/pvbmNB
Questions are 1.My objects are not in the center and I need a blue color high as red box.
2. Why I can not run the Script?
Thanks
JavaScript
x
23
23
1
var val0 = -10,2
val1 = 0,3
val2 = 5,4
val3 = 10;5
6
$(".fa").transition({ scale:1, opacity:0.5, y:val2 } );7
$("h3").transition({ scale:1.2, opacity:0, y:val3 }, 300);8
9
var bigIcon = $(".actionIcon");10
$.each(bigIcon, function (index, value) {11
12
var fa = $(this).find(".fa"),13
h3 = $(this).find("h3");14
15
$(this).hover(function() { 16
fa.transition({ scale:1.2, opacity:1, y:val0 }, 200 );17
h3.transition({ scale:1, opacity:1, y:val1 }, 150);18
}, function() {19
fa.transition({ scale:1, opacity:0.5, y:val2 });20
h3.transition({ scale:1.2, opacity:0, y:val3 }, 300);21
}22
);23
});JavaScript
1
45
45
1
.content{2
max-width: auto;3
margin: auto;4
padding: 0 30px;5
margin-left: 10%;6
margin-right: 10%;7
}8
.iconPlay {9
text-align:center;10
display: flex;11
justify-content: center;12
}13
.fa{14
font-size: 35px;15
display: block;16
}17
.iconPlay ul {18
list-style-type: none;19
width: 400px;20
}21
.iconPlay li {22
float: left;23
padding: 10px;24
min-width: 100px;25
}26
.iconPlay h3 {27
font-size: 0.8em;28
color: rgb(51, 3, 3); 29
}30
31
span {32
color: rgb(230, 24, 24);33
}34
35
.footer-basic {36
margin-top: 10px;37
padding:30px 0;38
}39
.footer-basic .copyright {40
margin-top:15px;41
text-align:center;42
font-size:13px;43
color:#aaa;44
margin-bottom:0;45
}JavaScript
1
33
33
1
<div class="content">2
<div class=" iconPlay">3
<ul>4
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>5
<h3>Love</h3>6
</li>7
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>8
<h3>Love</h3>9
</li>10
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>11
<h3>Love</h3>12
</li>13
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>14
<h3>Love</h3>15
</li>16
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>17
<h3>Love</h3>18
</li>19
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>20
<h3>Love</h3>21
</li>22
</ul>23
</div>24
</div>25
26
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.js"></script>27
28
29
<div class="footer-basic">30
<footer>31
<p class="copyright">2021</p>32
</footer>33
</div>Advertisement
Answer
Looks like you are not including jQuery library, which is necessary to use this plugin.
You should however try and accomplish this with css only.
This one is just with css, you should probably tweak it where necessary, but it should give you a good start.
JavaScript
1
60
60
1
.content{2
max-width: auto;3
margin: auto;4
padding: 0 30px;5
margin-left: 10%;6
margin-right: 10%;7
}8
.iconPlay {9
text-align:center;10
display: flex;11
justify-content: center;12
}13
.iconPlay .fa{14
font-size: 35px;15
display: block;16
opacity: .5;17
transition: all .3s ease;18
}19
20
.iconPlay li:hover .fa {21
opacity: 1;22
transform: translateY(-10px) scale(1.2);23
}24
.iconPlay ul {25
list-style-type: none;26
width: 400px;27
}28
.iconPlay li {29
float: left;30
padding: 10px;31
min-width: 100px;32
}33
.iconPlay h3 {34
font-size: 0.8em;35
color: rgb(51, 3, 3); 36
opacity: 0;37
transform: translateY(10px);38
transition: all .3s ease;39
}40
41
.iconPlay li:hover h3 {42
transform: translateY(0) scale(1.2);43
opacity: 1;44
}45
46
span {47
color: rgb(230, 24, 24);48
}49
50
.footer-basic {51
margin-top: 10px;52
padding:30px 0;53
}54
.footer-basic .copyright {55
margin-top:15px;56
text-align:center;57
font-size:13px;58
color:#aaa;59
margin-bottom:0;60
}JavaScript
1
32
32
1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />2
<div class="content">3
<div class=" iconPlay">4
<ul>5
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>6
<h3>Love</h3>7
</li>8
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>9
<h3>Love</h3>10
</li>11
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>12
<h3>Love</h3>13
</li>14
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>15
<h3>Love</h3>16
</li>17
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>18
<h3>Love</h3>19
</li>20
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>21
<h3>Love</h3>22
</li>23
</ul>24
</div>25
</div>26
27
28
<div class="footer-basic">29
<footer>30
<p class="copyright">2021</p>31
</footer>32
</div>This example includes your jQuery code.
JavaScript
1
23
23
1
var val0 = -10,2
val1 = 0,3
val2 = 5,4
val3 = 10;5
6
$(".fa").transition({ scale:1, opacity:0.5, y:val2 } );7
$("h3").transition({ scale:1.2, opacity:0, y:val3 }, 300);8
9
var bigIcon = $(".actionIcon");10
$.each(bigIcon, function (index, value) {11
12
var fa = $(this).find(".fa"),13
h3 = $(this).find("h3");14
15
$(this).hover(function() { 16
fa.transition({ scale:1.2, opacity:1, y:val0 }, 200 );17
h3.transition({ scale:1, opacity:1, y:val1 }, 150);18
}, function() {19
fa.transition({ scale:1, opacity:0.5, y:val2 });20
h3.transition({ scale:1.2, opacity:0, y:val3 }, 300);21
}22
);23
});JavaScript
1
45
45
1
.content{2
max-width: auto;3
margin: auto;4
padding: 0 30px;5
margin-left: 10%;6
margin-right: 10%;7
}8
.iconPlay {9
text-align:center;10
display: flex;11
justify-content: center;12
}13
.fa{14
font-size: 35px;15
display: block;16
}17
.iconPlay ul {18
list-style-type: none;19
width: 400px;20
}21
.iconPlay li {22
float: left;23
padding: 10px;24
min-width: 100px;25
}26
.iconPlay h3 {27
font-size: 0.8em;28
color: rgb(51, 3, 3); 29
}30
31
span {32
color: rgb(230, 24, 24);33
}34
35
.footer-basic {36
margin-top: 10px;37
padding:30px 0;38
}39
.footer-basic .copyright {40
margin-top:15px;41
text-align:center;42
font-size:13px;43
color:#aaa;44
margin-bottom:0;45
}JavaScript
1
37
37
1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />2
<div class="content">3
<div class=" iconPlay">4
<ul>5
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>6
<h3>Love</h3>7
</li>8
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>9
<h3>Love</h3>10
</li>11
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>12
<h3>Love</h3>13
</li>14
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>15
<h3>Love</h3>16
</li>17
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>18
<h3>Love</h3>19
</li>20
<li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>21
<h3>Love</h3>22
</li>23
</ul>24
</div>25
</div>26
27
28
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>29
30
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.js"></script>31
32
33
<div class="footer-basic">34
<footer>35
<p class="copyright">2021</p>36
</footer>37
</div>