1
我一直在试图构建一个键盘动画，在滚动时触发视图中的链接。 jquery选择正确的元素或创建的setinterval对象似乎有问题，导致所有元素键入相同的东西，无论选择的id。我已经尝试了一些使元素独特的setinterval的方法。使setInterval对元素唯一吗？
var typers = {};
var typeElem = $('.typer');
$.each(typeElem, function() {
var tElem = $(this);
var typeText = tElem.text();
tElem.data('output', typeText);
});
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);
//console.log(`window height ${window_height}`);
// console.log(`window top ${window_top_position}`);
// console.log(`window bott ${window_bottom_position}`);
$.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);
// console.log(element_bottom_position);
//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');
//console.log('add');
} else {
$element.removeClass('in-view');
//console.log('remove');
}
});
var $typeTheseElements = $('a.in-view');
$.each($typeTheseElements, function() {
//console.log(this.length);
var ident = $(this).attr('id');
console.log(ident);
if ($(`#${ident}`).data("typing")) {
/// console.log(`already typing ${ident}`);
} else {
var aText = "http://";
$(`#${ident}`).data("typing", true);
// console.log($element.data('output'));
srcText = $(`#${ident}`).data('output');
// console.log(`Type: ${srcText}`);
var counter = 0;
typers[ident] = setInterval(function() {
if (counter < srcText.length) {
aText = aText + srcText.charAt(counter);
$(`#${ident}`).text(aText);
counter++;
} else {
$(`#${ident}`).data("typing", false);
clearInterval(typers[ident]);
//console.log('done typing')
}
}, 300);
//console.log(srcText);
}
// console.log('type this');
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');@keyframes siteFocus {
0% {
width: 25%;
}
25% {
width: 50%;
}
50% {
width: 75%;
}
100% {
width: 100%;
}
}
/* The element to apply the animation to */
.sites:hover {
transition: all 3s
}
.sites {
width: 25%;
height: 15px;
padding-top: 10px;
float: left;
text-align: center;
transition: all 3s
}
.sitelinks {
color: black;
text-decoration: none;
}
.siteDescription {
display: none;
}
.intro {
font-size: 26px;
}
.intro-dot {
font-weight: bold;
font-style: normal;
}
/*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;
top: 0;
}
/*animation element sliding left*/
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 3000ms linear;
-webkit-transition: all 3000ms linear;
-o-transition: all 3000ms linear;
transition: all 3000ms linear;
-moz-transform: translate3d(-300px, 0px, 0px);
-webkit-transform: translate3d(-300px, 0px, 0px);
-o-transform: translate(-300px, 0px);
-ms-transform: translate(-300px, 0px);
transform: translate3d(-300px, 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-element.imagep.in-view {
opacity: 1;
color: black;
white-space: nowrap;
overflow: hidden;
}
.animation-element.typer.in-view {
opacity: 1;
color: black;
white-space: nowrap;
overflow: hidden;
}
.animation-element.imagep:nth-child(2) {}
/*animation slide left styled for testimonials*/
.animation-element.slide-left.testimonial {
float: left;
width: 100%;
margin: 1% 1% 1% 1%;
background: #F5F5F5;
padding: 5px;
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: 100%;
margin: 1% 1% 1% 1%;
}
.animation-element.slide-left.testimonial:nth-of-type(even) {
width: 100%;
margin: 1% 1% 1% 1%;
}
.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 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 0px 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;
}
}
.image {
position: relative;
width: 100%;
/* for IE 6 */
margin-right: 5px;
margin-bottom: 5px;
display: block;
height: 83px;
}
.imagep {
display: block;
position: absolute;
top: 25px;
left: 130px;
width: 100%;
}
.hiddenb {
background: rgb(255, 255, 255);
position: absolute;
top: 20px;
left: 130px;
width: 50px%;
}
.imagepspan {
color: black;
font: bold 20px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(255, 255, 255);
/* fallback color */
background: rgba(255, 255, 255, 1);
padding: 2px;
}
.imagepspan a {
color: black;
font: bold 20px/45px Helvetica, Sans-Serif;
text-decoration: none;
}
p a {
color: black;
text-decoration: none;
}
.spancursor {
animation: blink 1s infinite;
}
@keyframes type {
from {
width: 0;
}
}
@keyframes type2 {
0% {
width: 0;
}
50% {
width: 0;
}
100% {
width: 100;
}
}
@keyframes blink {
to {
opacity: .0;
}
}
::selection {
background: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" type="text/css" href="public/style.css">
<script src="public/jquery.min.js" type="text/javascript"></script>
<script src="public/animations.js" type="text/javascript"></script>
</head>
<body>
<div class="main-container">
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test1.ca" id="a0" class="animation-element typer">test1.ca</a></span><span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test2.ca" id="a1" class="animation-element typer">test2.ca</a>
</span><span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test3.ac" id="a2" class="animation-element typer">test3.ac</a>
</span><span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test4" id="a3" class="animation-element typer">test4</a></span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test5" id="a4" class="animation-element typer">test5</a></span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test6" id="a5" class="animation-element typer">test6</a></span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test7" id="a6" class="animation-element typer">test7</a></span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test8" id="a7" class="animation-element typer">test8</a></span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test9" id="a8" class="animation-element typer">test9</a></span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test10" id="a9" class="animation-element typer">test10</a></span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test11" id="a10" class="animation-element typer">test11</a></span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test12" id="a11" class="animation-element typer">test12</a></span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test13" id="a12" class="animation-element typer">test13</a></span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test14" id="a13" class="animation-element typer">test14</a></span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test15" id="a14" class="animation-element typer">test15</a></span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan"><a href="http://test16" id="a15" class="animation-element typer">test16</a></span>
<span class="spancursor">|</span></p>
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>