有人知道在滚动对象后是否有一个JQuery插件来启动动画？
或者如果没有插件，在滚动对象后使用JQuery启动CSS3转换？
我试图复制像http://heymosaic.com/
这样的内容感谢任何帮助，谢谢！
答案 0 :(得分：1)
他们不使用mouseover / mouseout事件来触发动画，而是使用窗口的滚动位置。这样的事情会起作用：
jQuery('div#down_the_page').focus(function() {
// animate when div#down_the_page is visible in the viewport
});
答案 1 :(得分：0)
这是你的伪代码：
//on window.scroll
//for every still not animated element in the page
//check if it's top is in the view
//if it is, start the transition.
，关键是：
答案 2 :(得分：0)
我想也许有一个名为waypoints.js的jquery插件可以帮助实现这种效果。
你可以看一下这个演示：http://www.mightymatcha.com/
答案 3 :(得分：0)
我认为这是一个古老的话题，但对于未来的用户而言，这是一个简短的代码片段。
/*These styles contain basic styles for fomatting along with our animation css*/
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
background: #efefef;
line-height: 170%;
}
strong,
b {
font-weight: 600
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
line-height: 150%;
}
i.fa {
color: #333;
}
*,
*:before,
*:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*clearfixes*/
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.main-container {
background: #fff;
max-width: 1000px;
margin: 25px auto 25px auto;
position: relative;
}
.container {
position: relative;
padding: 25px;
}
/*animation element*/
.animation-element {
opacity: 0;
position: relative;
}
/*animation element sliding left*/
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-100px, 0px, 0px);
-webkit-transform: translate3d(-100px, 0px, 0px);
-o-transform: translate(-100px, 0px);
-ms-transform: translate(-100px, 0px);
transform: translate3d(-100px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation slide left styled for testimonials*/
.animation-element.slide-left.testimonial {
float: left;
width: 47%;
margin: 0% 1.5% 3% 1.5%;
background: #F5F5F5;
padding: 15px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}
.animation-element.slide-left.testimonial:nth-of-type(odd) {
width: 48.5%;
margin: 0% 1.5% 3.0% 0%;
}
.animation-element.slide-left.testimonial:nth-of-type(even) {
width: 48.5%;
margin: 0% 0% 3.0% 1.5%;
}
.animation-element.slide-left.testimonial .header{
float: left;
width: 100%;
margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .left{
float: left;
margin-right: 15px;
}
.animation-element.slide-left.testimonial .right{
float: left;
}
.animation-element.slide-left.testimonial img {
width: 65px;
height: 65px;
border-radius: 50%;
box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);
}
.animation-element.slide-left.testimonial h3 {
margin: 0px 0px 5px 0px;
}
.animation-element.slide-left.testimonial h4 {
margin: 0px 0px 5px 0px;
}
.animation-element.slide-left.testimonial .content {
float: left;
width:100%;
margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .rating{}
.animation-element.slide-left.testimonial i {
color: #aaa;
margin-right: 5px;
}
/*media queries for small devices*/
@media screen and (max-width: 678px){
/*testimonials*/
.animation-element.slide-left.testimonial,
.animation-element.slide-left.testimonial:nth-of-type(odd),
.animation-element.slide-left.testimonial:nth-of-type(even){
width: 100%;
margin: 0px 0px 20px 0px;
}
.animation-element.slide-left.testimonial .right,
.animation-element.slide-left.testimonial .left,
.animation-element.slide-left.testimonial .content,
.animation-element.slide-left.testimonial .rating{
text-align: center;
float: none;
}
.animation-element.slide-left.testimonial img{
width: 85px;
height: 85px;
margin-bottom: 5px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--For our animations to look good, the animated elements need to be able to be scrolled to. For this example I've added dummy content to the top -->
<div class="main-container">
<div class="container">
<h1>Slide in from the left </h1>
<p>This animation will focus on sliding an element from the left once it enters the view of the user</p>
</div>
<div class="container">
<h2>
Our Testimonials <i class="fa fa-comment"></i></h2>
<p> We have worked in the industry for 15 years and have provided services to a wide range of clients.</p>
<p>Come and see what our clients are saying about our services. </p>
</div>
<div class="container cf">
<!-- testimonial one -->
<div class="animation-element slide-left testimonial">
<div class="header">
<div class="left">
<img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjVTdZcktRTWhNamM" />
</div>
<div class="right">
<h3>Johnathon Richard Smith</h3>
<h4>CEO / Manager - Auto Incorporated</h4>
</div>
</div>
<div class="content"><i class="fa fa-quote-left"></i> When I started using their service I was skeptical. They promised me a 300% return on my initial investment. However they came through on their word and now my business is flourishing.. <i class="fa fa-quote-right"></i>
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
</div>
<!--testimonial two -->
<div class="animation-element slide-left testimonial">
<div class="header">
<div class="left">
<img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjV3BseTMtcEU1T2M" />
</div>
<div class="right">
<h3>Joanna Hammerlton</h3>
<h4>Marketing Manager - Omega Creative</h4>
</div>
</div>
<div class="content"><i class="fa fa-quote-left"></i> Our company first enlisted their services when we had a down-turn in sales and revene. They outlined a series of steps we could take to improve our position and within a year we are making signifcant improvements..
<i class="fa fa-quote-right"></i>
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
</div>
<!--testimonial three -->
<div class="animation-element slide-left testimonial">
<div class="header">
<div class="left">
<img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjTURta0pyMEtoUmc
" />
</div>
<div class="right">
<h3>Mark Jamerson</h3>
<h4>CEO - Generic Business</h4>
</div>
</div>
<div class="content"><i class="fa fa-quote-left"></i> We entered into a 12 month period of service with this company in the hopes to improve our returns. After this period we have a return of double our initial investment..
<i class="fa fa-quote-right"></i>
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<!--testimonial four -->
<div class="animation-element slide-left testimonial">
<div class="header">
<div class="left">
<img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjb1dxcGZEYUc0Z3M" />
</div>
<div class="right">
<h3>Susan Hilton</h3>
<h4>Financial Officer - People Tech</h4>
</div>
</div>
<div class="content"><i class="fa fa-quote-left"></i> Our involvement in this company has been mutually beneficial. We were hoping for slightly higher returns, however the current level of returns are sufficient..
<i class="fa fa-quote-right"></i>
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
</div>
</div>02-09 13:48:32.063 22171-22538/? D/BtGatt.GattService﹕ Batch record : [0, 0, 0, 0, -8, 108, 92, -85, 0, 0, 0, 0, 2, 1, 6, 18, 9, 65, 108, 108, 105, 101, 45, 49, 49, 49, 53, 53, 51, 48, 51, 54, 52, 48, 2, 10, 0, 5, 3, -30, -1, 10, 24, 0, 100, 23, 107, 0, 0, 8, 0, 0, -85, 4, 0, 31, 2, 1, 6, 18, 9, 65, 108, 108, 105, 101, 45, 50, 48, 49, 53, 52, 51, 48, 48, 48, 52, 57, 2, 10, 0, 5, 3, -30, -1, 10, 24, 0, 109, 3, 96, -32, 27, -52, 0, 0, -78, 2, 0, 31, 2, 1, 6, 18, 9, 65, 108, 108, 105, 101, 45, 49, 49, 49, 53, 53, 49, 48, 49, 56, 51, 51, 2, 10, 0, 5, 3, -30, -1, 10, 24, 0, -46, -56, -92, 0, 0, 8, 0, 0, -69, 5, 0, 31, 2, 1, 6, 18, 9, 65, 108, 108, 105, 101, 45, 50, 48, 49, 53, 52, 51, 48, 48, 48, 52, 49, 2, 10, 0, 5, 3, -30, -1, 10, 24, 0, 49, 1, 96, -32, 27, -52, 0, 0, -67, 5, 0, 31, 2, 1, 6, 18, 9, 65, 108, 108, 105, 101, 45, 50, 48, 49, 53, 52, 51, 48, 48, 48, 49, 53, 2, 10, 0, 5, 3, -30, -1, 10, 24, 0, -19, 1, 96, -32, 27, -52, 0, 0, -73, 88, 0, 31, 2, 1, 6, 18, 9, 65, 108, 108, 105, 101, 45, 49, 54, 49, 53, 52, 57, 48, 48, 48, 53, 52, 2, 10, 0, 5, 3, -30, -1, 10, 24, 0]
02-09 13:48:32.071 22171-22538/? D/BtGatt.GattService﹕ ScanRecord : [1, 6]
02-09 13:48:32.073 22171-22538/? D/BtGatt.GattService﹕ ScanRecord : [53, 51, 48, 51, 54, 52, 48, 2, 10, 0, 5, 3, -30, -1, 10, 24, 0, 100, 23, 107, 0, 0, 8, 0, 0, -85, 4, 0, 31, 2, 1, 6, 18, 9, 65, 108, 108, 105, 101, 45, 50, 48, 49, 53, 52, 51, 48, 48, 48, 52, 57, 2, 10]
02-09 13:48:32.073 22171-22538/? D/BtGatt.GattService﹕ ScanRecord : [-52, 0, 0, -78, 2, 0, 31, 2, 1, 6, 18, 9, 65, 108, 108, 105, 101, 45, 49, 49, 49, 53, 53, 49, 48, 49, 56, 51, 2, 10, 0, 5, 3, -30, -1, 10, 24, 0, -46, -56, -92, 0, 0, 8, 0, 0, -69, 5, 0, 31, 2, 1, 6, 18, 9, 65, 108, 108, 105, 101, 45, 50, 48, 49, 53, 52, 51, 48, 48, 48, 52, 49, 2, 10, 0, 5, 3, -30]
02-09 13:48:32.136 22171-22538/? E/BluetoothServiceJni﹕ An exception was thrown by callback 'btgattc_batchscan_reports_cb'.
02-09 13:48:32.147 22171-22538/? E/BluetoothServiceJni﹕ java.lang.NegativeArraySizeException: -67
at com.android.bluetooth.gatt.GattService.extractBytes(GattService.java:1153)
at com.android.bluetooth.gatt.GattService.parseFullResults(GattService.java:1128)
at com.android.bluetooth.gatt.GattService.parseBatchScanResults(GattService.java:1075)
at com.android.bluetooth.gatt.GattService.onBatchScanReports(GattService.java:1034)
来源：http://www.sitepoint.com/scroll-based-animations-jquery-css3/