animation
とtransition
エフェクトを追加したい場合は、ページがスクロールされ、ビューポートが画面に表示されるようにします。 私は特定のブロックは、ビューポートに来ているが、それはうまくいきませんでしたかどうかを確認するには、以下のいずれかを試してみました:ビューポートに応じてトランジション効果を与えるには?
js
(function($) {
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
var win = $(window);
var allMods = $(".module");
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("already-visible");
}
});
win.scroll(function(event) {
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-in");
}
});
});
Html
<section>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
</section>
css
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
section {
background: #eee;
max-width: 600px;
margin: 0 auto;
padding: 20px;
overflow: hidden;
}
.module {
width: 48%;
min-height: 200px;
background: white;
position: relative;
float: left;
padding: 20px;
margin-right: 4%;
margin-bottom: 4%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.module:nth-child(even) {
margin-right: 0;
}
.come-in {
transform: translateY(150px);
animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
animation-duration: 0.6s;
}
.already-visible {
transform: translateY(0);
animation: none;
}
@keyframes come-in {
to {
transform: translateY(0);
}
}
してくださいそれを行うjqueryと私elp私。
あなたもあなたのHTMLとCSSを投稿してくださいだろうか? – vijayP
私はあなたのコードを実行しようとしましたが、アニメーション、つまりブロックが下から来ているのを見ることができます。あなたは何が正しく動作していないと思いますか? – vijayP
ページをスクロールするとブロックが表示されますが、jqueryが機能していない、つまりトランジションエフェクトが適用されていません。それをマゼンタフレームワークで使用しています。 – Ramya