3
我想要實現使用jQuery這樣的效果：如何在滾動上獲得「膨脹」效果？
我需要：
- 確定是否
.project在檢視。 - 如果不是這樣，我需要將它從0.3縮放到1，並在對象佔視口25％（從頂部75％）時將不透明度從0更改爲1。
這就是我所擁有的，但是當我滾動時，這些卡似乎一下子倒轉。
$(window).scroll(function() {
var scrollTop = $(window).scrollTop(),
scaleVal = (1/scrollTop),
screenBottom = $(window).scrollTop() + $(window).height(),
offset = $('.project').offset().top;
if(scrollTop > (scrollTop/2)){
$(".project").css('transform', "scale("+scaleVal+")");
$(".project").css('opacity', scaleVal);
}
});
// var screenBottom = $(window).height();
// $(window).scroll(function{
// screenBottom = $(window).height() + $(window).scrollTop();
// if (screenBottom == cardStartsHeight) {
// // magic on the card
// }
// });@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800|Gentium+Book+Basic);
.project--image, .project--description {
float: left;
}
body {
background: #eee;
font-family: "Open Sans", arial, sans-serif;
}
img {
width: 100%;
height: auto;
}
#wrapper {
margin: 0 auto;
max-width: 1024px;
padding: 0 30px;
}
#wrapper::after {
clear: both;
content: "";
display: table;
}
.side-bar {
width: 20%;
position: fixed;
top: 30px;
}
.side-bar .logo {
border-bottom: dashed 1px #ccc;
padding-bottom: 20px;
}
.side-bar .logo .avatar {
height: 90px;
width: 90px;
background-color: #ccc;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/243277/avatar.jpg");
background-size: cover;
border-radius: 50%;
margin-bottom: 10px;
}
.side-bar .logo .name {
font-size: 12px;
display: block;
text-transform: uppercase;
}
.side-bar .logo .title {
font-size: 16px;
}
.side-bar nav a {
color: #4A90E2;
margin-top: 20px;
text-decoration: none;
display: block;
font-size: 12px;
}
.side-bar nav a i {
margin-right: 6px;
opacity: 0.5;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
}
.side-bar nav a:hover i {
opacity: 1;
}
main {
width: 75%;
box-sizing: border-box;
margin-left: 25%;
}
.project {
margin-top: 30px;
box-shadow: 0 8px 20px rgba(50, 50, 50, 0.3);
background: white;
padding: 70px;
border-radius: 9px;
}
.project::after {
clear: both;
content: "";
display: table;
}
.project--image {
display: inline-block;
width: 25%;
}
.project--description {
width: 75%;
box-sizing: border-box;
padding-left: 20px;
}
.project--description .title {
font-size: 30px;
margin-bottom: 10px;
}
.project--description .about {
font-family: "Gentium Book Basic", serif;
font-size: 20px;
line-height: 26px;
margin-bottom: 20px;
}
.project--description .cta {
color: #4A90E2;
text-align: right;
text-decoration: none;
}
.project--description .cta:after {
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
content: "→";
margin-left: 5px;
}
.project--description .cta:hover:after {
margin-left: 10px;
}
footer {
margin-top: 30px;
padding-top: 30px;
border-top: dashed 1px #ccc;
font-size: 12px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="wrapper">
<aside class="side-bar">
<h1 class="logo">
<div class="avatar"></div><span class="name">Aaron Benjamin</span><span class="title">Digital UX Designer</span>
</h1>
<nav><a href="#" target="_blank"><i class="fa fa-dribbble"></i> Dribbble</a><a href="#" target="_blank"><i class="fa fa-twitter"></i> Twitter</a><a href="#" target="_blank"><i class="fa fa-medium"></i> Medium</a><a href="#" target="_blank"><i class="fa fa-codepen"></i> Code Pen</a></nav>
</aside>
<main>
<article class="project">
<div class="project--image"><img src="http://simonpan.com/wp-content/themes/sp_portfolio/assets/prime-music-tile-hero.jpg" alt=""/></div>
<div class="project--description">
<h2 class="title">Hello World</h2>
<p class="about"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima architecto numquam eius dicta mollitia quo consequuntur ducimus eveniet eos modi voluptate quidem saepe aliquid distinctio esse temporibus delectus, repellat facere?</p><a href="#" class="cta">Read more</a>
</div>
</article>
<article class="project">
<div class="project--image"><img src="http://simonpan.com/wp-content/themes/sp_portfolio/assets/prime-music-tile-hero.jpg" alt=""/></div>
<div class="project--description">
<h2 class="title">Hello World</h2>
<p class="about"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima architecto numquam eius dicta mollitia quo consequuntur ducimus eveniet eos modi voluptate quidem saepe aliquid distinctio esse temporibus delectus, repellat facere?</p><a href="#" class="cta">Read more</a>
</div>
</article>
<article class="project">
<div class="project--image"><img src="http://simonpan.com/wp-content/themes/sp_portfolio/assets/prime-music-tile-hero.jpg" alt=""/></div>
<div class="project--description">
<h2 class="title">Hello World</h2>
<p class="about"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima architecto numquam eius dicta mollitia quo consequuntur ducimus eveniet eos modi voluptate quidem saepe aliquid distinctio esse temporibus delectus, repellat facere?</p><a href="#" class="cta">Read more</a>
</div>
</article>
<footer>
<p>Hello</p>
</footer>
</main>
</div>
只是給你的代碼看一眼，你正在編輯的每'.project'元每滾動的CSS。您需要改爲處理單個項目。 – Jhecht
我在[This Code Pen]（http://codepen.io/jhechtf/pen/aNaoJo?editors=0010）上有一件非常粗糙的事情，只是試圖讓最後一點工作。 – Jhecht