滚动元素后如何开始动画？

时间：2012-11-17 18:41:24

标签： jquery jquery-animate css-transitions

有人知道在滚动对象后是否有一个JQuery插件来启动动画？

或者如果没有插件，在滚动对象后使用JQuery启动CSS3转换？

我试图复制像http://heymosaic.com/

这样的内容

感谢任何帮助，谢谢！

4 个答案:

答案 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.

，关键是：

https://stackoverflow.com/a/125106/1262700

答案 2 :(得分：0)

我想也许有一个名为waypoints.js的jquery插件可以帮助实现这种效果。

你可以看一下这个演示：http://www.mightymatcha.com/

答案 3 :(得分：0)

我认为这是一个古老的话题，但对于未来的用户而言，这是一个简短的代码片段。

＆＃13;
＆＃13; 
/*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;
  }

}
＆＃13; 
<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>
＆＃13; 
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)
＆＃13;
＆＃13;
＆＃13;

来源：http://www.sitepoint.com/scroll-based-animations-jquery-css3/

相关问题
最新问题