1
Ich habe versucht, eine Typisierungsanimation zu erstellen, die Auslöser für Links in Sicht beim Scrollen ist. Es scheint ein Problem mit jquery zu geben, das das richtige Element oder die zu erzeugenden setinterval-Objekte auswählt, die bewirken, dass alle Elemente dasselbe eingeben, unabhängig von der ausgewählten ID. Ich habe versucht, das setinterval für das Element einzigartig zu machen.make setInterval einzigartig für element?
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>