3
私はjQueryのを使用してこの効果を実現しようとしている：に私は必要スクロールで「バルーン効果」をどうやって得ることができますか？
：
.projectがビューポートであるかどうかを判断します。- オブジェクトがビューポートに25％（上から75％）になるまでに、0.3から1の範囲でスケールし、不透明度を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