0
私はこのウェブサイト用に作成した自動タイピング機能に問題があります。すべてがうまくいきますが、単語の配列を通って行くとページが上に移動し、ページが再び始まるとページが下がります。私は、単語の配列を終えるときに、そして単語の配列を始めるときに、ページがその場にとどまるようにしたい。JavaScriptオートタイプライター機能
var messages=["Your word is a lamp to my feet and a light to my path.","","Be still, and know that I am God! I will be exalted among the nations, I will be exalted in the earth!","Beauty for ashes"];
var rank=0;
// Code for Chrome, Safari and Opera
document.getElementById("myTypewriter").addEventListener("webkitAnimationEnd", changeTxt);
// Standard syntax
document.getElementById("myTypewriter").addEventListener("animationend", changeTxt);
function changeTxt(e){
_h1 = this.getElementsByTagName("h1")[0];
_h1.style.webkitAnimation = 'none'; // set element animation to none
setTimeout(function() { // you surely want a delay before the next message appears
_h1.innerHTML=messages[rank];
var speed =2.8*messages[rank].length/20; // adjust the speed (3.5 is the original speed, 20 is the original string length
_h1.style.webkitAnimation = 'typing '+speed+'s steps(40, end), blink-caret .75s step-end infinite'; // switch to the original set of animation
(rank===messages.length-1)?rank=0:rank++; // if you have displayed the last message from the array, go back to the first one, else go to next message
}, 1000);
}body{
margin: 0;
padding: 0;
background-color: purple;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/*-------------Header/Nav----------*/
header{
\t width: 100%;
}
#start{
\t width: 90%;
\t margin: 0 auto;
text-align: center;
}
#start h1{
\t color: white;
letter-spacing:6px;
\t font-size: 3em;
\t font-family: 'Anton', sans-serif;
}
nav ul{
\t list-style-type: none;
\t padding: 0;
\t margin-left: 32%;
}
nav a{
float: left;
\t font-size: 1.2em;
\t margin-right: 38px;
}
#wrapper{
width: 100%;
margin: 0 auto;
background-color: Fuchsia;
color:white;
}
#nav{
\t width: 80%;
\t margin: 0 auto;
}
a:nth-child{
\t margin-right: 0;
}
/**************Type writer***********/
.myTypewriter h1 {
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
/* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
#wrapper-two{
background: purple;
color: #fff;
font-family: monospace;
padding-top: 3em;
display: flex;
justify-content: center;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: blue; }
}
/*--------------section two---------------*/
#wrapper-home{
\t width: 90%;
\t margin:0 auto;
\t display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;
}
h2{
\t float: left;
}
img{
\t float: left;
}
/*----------------Media Queries-----------*/
@media only screen and (max-width: 1200px){
nav ul{
\t margin-left: 20%
}
}<!DOCTYPE html>
<html>
<head> \t
\t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t <link rel="stylesheet" href="otkcdim.css">
\t <title>Home</title>
</head>
<body>
<header>
\t <div id="start">
\t \t <h1>Only </h1>
\t </div>
</header>
\t <nav >
\t <div id="wrapper" class="cf">
\t <div id="nav" class="cf">
\t \t <ul class="cf">
\t \t \t <li><a>Home</a></li>
\t \t \t <li><a>About Us</a></li>
\t \t \t <li><a>Events</a></li>
\t \t \t <li><a>Encouragement</a></li>
\t \t \t <li><a>Contact Us</a></li>
\t \t </ul>
</div>
</div>
\t </nav>
<!--*****************Type Writer*************************-->
\t <section>
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
\t <div id="wrapper-two">
\t <div class="myTypewriter" id="myTypewriter">
\t \t <h1> Beauty for Ashes</h1>
\t </div>
\t </div>
\t </section>
<!--**********Home Page***************-->
<div id="wrapper-home">
\t <div class="yes">
<img src="ma.jpg">
<h2>Welcome.</h2> \t
</div>
</div>
\t <script type="text/javascript" src="otkcdim.js"></script>
</body>
</html>
ありがとうございました！ – Ace