0
有誰知道是否有一個JQuery插件在滾動對象之後啓動動畫？如何在滾動元素後開始動畫？
或者如果沒有插件使用JQuery在我滾動對象之後啓動CSS3轉換？
我想複製這樣的事情http://heymosaic.com/
任何幫助表示感謝，謝謝！
A
回答
1
他們不使用mouseover/mouseout事件來觸發他們的動畫，而是使用窗口的滾動位置。像這樣將工作：
jQuery('div#down_the_page').focus(function() {
// animate when div#down_the_page is visible in the viewport
});
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.
，關鍵的是：
0
我想，也許有一個jQuery插件名爲waypoints.js可以幫助實現這種效果。
，你可以在這個看一看的演示：http://www.mightymatcha.com/
0
我看到它是老話題，但對於未來的用戶在這裏是一個小片段誰做的工作。
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
} else {
$element.removeClass('in-view');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');/*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>來源：http://www.sitepoint.com/scroll-based-animations-jquery-css3/
相關問題
- 1. 從滾動到另一個元素後從頭開始動畫
- 2. 動畫開始時滾動
- 3. 滾動時動畫元素
- 4. jQuery滾動到元素動畫後的元素
- 5. scrollTo不滾動到元素的開始
- 6. 單擊實際元素，開始動畫
- 7. 如何在滾動後淡入元素
- 8. 跨度元素在動畫開始後被裁剪
- 9. 開始動畫時滾動到
- 10. 開始滾動的圖表動畫
- 11. 如何在Android動畫結束後啓動開始活動
- 12. RaphaelJS：如何在另一個元素動畫完成後動畫元素？
- 13. 如何在滾動事件發生之前動畫元素？
- 14. 頁面滾動的動畫元素
- 15. 動畫滾動不起作用元素
- 16. 如何在div元素中的文本完成後停止左滾動動畫？
- 17. 如何在動畫之後重新開始活動？
- 18. 如何在動畫結束後開始新的活動？
- 19. 如何防止滾動到頂部後滾動到元素
- 20. 動畫完成後開始活動
- 21. 通過滾動使動畫元素變得更寬更高動畫元素
- 22. Edge動畫從動畫開始動畫
- 23. 如何使用slideToggle展開後滾動到元素？
- 24. 使用離子滾動移動並滾動畫布元素
- 25. 如何開始動畫結束活動
- 26. 在動態更改動畫後動畫SVG元素
- 27. CSS3動畫 - 如何讓不同的動畫到不同的元素上滾動
- 28. 如何滾動元素以騰出空間來展開元素
- 29. 如何在刪除以前的元素後動畫元素向上移動？
- 30. 如何在浮動元素中創建可滾動元素？
如用戶將鼠標懸停在元素，當他們鼠標移出啓動動畫？ –