JavaScript/jQuery 当元素进入视口时添加 class?
JavaScript/jQuery add class when element comes into viewport?
有没有办法在我要应用 class 的元素进入视口时添加 class?或者当屏幕底部超过元素顶部一定距离时?
现在我有了我想要的效果:
if ($(document).scrollTop() > 100) {
$(".graph-line.two").addClass("graph-75");
问题在于它是相对于文档高度的,所以当我缩小页面(或在移动设备上查看)并且元素堆叠在彼此之上时,页面变得更高并且 class(动画)不会在元素进入视图时启动。
我看到其他人问过类似的问题,我尝试实施他们得到的答案,但我无法使任何工作正常进行,因此非常感谢您的帮助。
这是我的:
$(document).ready(function() {
$(".graph-line.one").addClass("graph-75");
$(".graph-line-2.one").addClass("opacity");
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$(".graph-line.two").addClass("graph-75");
$(".graph-line-2.two").addClass("opacity");
}
if ($(document).scrollTop() > 450) {
$(".graph-line.three").addClass("graph-75");
$(".graph-line-2.three").addClass("opacity");
}
if ($(document).scrollTop() > 800) {
$(".graph-line.four").addClass("graph-75");
$(".graph-line-2.four").addClass("opacity");
}
if ($(document).scrollTop() > 1150) {
$(".graph-line.five").addClass("graph-75");
$(".graph-line-2.five").addClass("opacity");
}
if ($(document).scrollTop() > 1500) {
$(".graph-line.six").addClass("graph-75");
$(".graph-line-2.six").addClass("opacity");
}
});
});
.graph {
display: block;
margin: 100px auto;
transform: rotate(-90deg);
will-change: transform;
}
.graph-line {
stroke-dasharray: 628px;
stroke-dashoffset: -628px;
transform-origin: center;
}
.graph-75 {
animation: graph-75 1200ms ease forwards;
}
@keyframes graph-75 {
0% {
stroke-dashoffset: 0;
transform: rotate(360deg);
}
100% {
stroke-dashoffset: 471;
transform: rotate(0deg);
}
}
.graph-line-2 {
transition: opacity 700ms;
opacity: 0.1;
}
.opacity {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<h1>Scroll Down</h2>
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 one" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line one" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
<text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text>
</svg>
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 two" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line two" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
<text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text>
</svg>
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 three" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line three" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
<text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text>
</svg>
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 four" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line four" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
<text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text>
</svg>
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 five" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line five" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
<text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text>
</svg>
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 six" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line six" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
<text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text>
</svg>
你走在正确的轨道上,我认为如果你将滚动事件与类似问题的答案这样的函数一起使用:
Check if element is visible after scrolling
希望对您有所帮助:)
你可以这样做:(参见 CodePen 实现)
取自此处的函数:Check if element is visible after scrolling
$(window).on('scroll', function() {
$(".graph").each(function() {
if (isScrolledIntoView($(this))) {
$(this).find(".graph-line").addClass("graph-75");
$(this).find(".graph-line-2").addClass("opacity");
}
});
});
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
虽然这并不完美,但它应该能为您指明正确的方向。
有没有办法在我要应用 class 的元素进入视口时添加 class?或者当屏幕底部超过元素顶部一定距离时?
现在我有了我想要的效果:
if ($(document).scrollTop() > 100) {
$(".graph-line.two").addClass("graph-75");
问题在于它是相对于文档高度的,所以当我缩小页面(或在移动设备上查看)并且元素堆叠在彼此之上时,页面变得更高并且 class(动画)不会在元素进入视图时启动。
我看到其他人问过类似的问题,我尝试实施他们得到的答案,但我无法使任何工作正常进行,因此非常感谢您的帮助。
这是我的:
$(document).ready(function() {
$(".graph-line.one").addClass("graph-75");
$(".graph-line-2.one").addClass("opacity");
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$(".graph-line.two").addClass("graph-75");
$(".graph-line-2.two").addClass("opacity");
}
if ($(document).scrollTop() > 450) {
$(".graph-line.three").addClass("graph-75");
$(".graph-line-2.three").addClass("opacity");
}
if ($(document).scrollTop() > 800) {
$(".graph-line.four").addClass("graph-75");
$(".graph-line-2.four").addClass("opacity");
}
if ($(document).scrollTop() > 1150) {
$(".graph-line.five").addClass("graph-75");
$(".graph-line-2.five").addClass("opacity");
}
if ($(document).scrollTop() > 1500) {
$(".graph-line.six").addClass("graph-75");
$(".graph-line-2.six").addClass("opacity");
}
});
});
.graph {
display: block;
margin: 100px auto;
transform: rotate(-90deg);
will-change: transform;
}
.graph-line {
stroke-dasharray: 628px;
stroke-dashoffset: -628px;
transform-origin: center;
}
.graph-75 {
animation: graph-75 1200ms ease forwards;
}
@keyframes graph-75 {
0% {
stroke-dashoffset: 0;
transform: rotate(360deg);
}
100% {
stroke-dashoffset: 471;
transform: rotate(0deg);
}
}
.graph-line-2 {
transition: opacity 700ms;
opacity: 0.1;
}
.opacity {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<h1>Scroll Down</h2>
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 one" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line one" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
<text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text>
</svg>
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 two" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line two" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
<text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text>
</svg>
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 three" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line three" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
<text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text>
</svg>
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 four" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line four" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
<text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text>
</svg>
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 five" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line five" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
<text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text>
</svg>
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 six" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line six" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
<text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text>
</svg>
你走在正确的轨道上,我认为如果你将滚动事件与类似问题的答案这样的函数一起使用:
Check if element is visible after scrolling
希望对您有所帮助:)
你可以这样做:(参见 CodePen 实现)
取自此处的函数:Check if element is visible after scrolling
$(window).on('scroll', function() {
$(".graph").each(function() {
if (isScrolledIntoView($(this))) {
$(this).find(".graph-line").addClass("graph-75");
$(this).find(".graph-line-2").addClass("opacity");
}
});
});
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
虽然这并不完美,但它应该能为您指明正确的方向。