It's another question on animation in JS / CSS.
I'd like to ask how should I correct the code in JavaScript, in order to achieve the visual effect that, after a screen full of random characters, all the lines of random characters will disappear, with only the black background, while a new line of random characters starts generating at the top of the screen? I thought it would be a solution that, after the characters in the div element fill up the whole screen, the height can be a reference to trigger the function of .removeChild(), in order to remove the appended p elements. After that, by .appendChild() it will start the generation process again at the top of the screen. If not so, Is there any other ways to do it?
Thank you very much!
Code:
function create_random_string(string_length) {
var random_string = '';
var characters = 'ABCDEFGabcdefg';
for (var i, i = 0; i < string_length; i++) {
random_string += characters.charAt(Math.floor(Math.random() * characters.length));
}
return random_string;
}
let divElem = document.getElementById('container');
NewLine();
var MyInterval = setInterval(NewLine, 11000);
function NewLine() {
let text = document.createElement("p");
text.setAttribute("id", "text");
text.innerHTML = create_random_string(15);
divElem.appendChild(text);
}
function RemoveChild() {
if (divElem.clientHeight > window.innerHeight) {
while (divElem.firstChild) {
divElem.removeChild(divElem.firstChild)
};
}
}
body {
background-color: #000000;
margin: 0;
padding: 0;
overflow: hidden;
display: grid;
height: 100vh;
width: 100vw;
}
#container {
place-content: center;
text-align: center;
line-height: 7.5vh;
}
#text {
font-family: 'Courier New', Courier, monospace;
font-size: 4vw;
letter-spacing: 3vw;
font-weight: bold;
color: #ffffff;
position: relative;
}
#text::before,
#text::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#text::before {
background: #000000;
animation: typewriter 10s steps(15) forwards;
}
#text::after {
width: 0.125em;
bottom: 0vh;
Top: 0vh;
background: #ffffff;
animation: TypingBar 10s steps(15) forwards, blink 750ms steps(15) infinite;
}
#keyframes typewriter {
0% {
left: 0;
}
6.7% {
left: 7vw;
}
100% {
left: 90vw;
}
}
#keyframes TypingBar {
0%,
6.7% {
left: 8vw;
}
99.99% {
left: 89.5vw;
opacity: 1;
}
/* escape fade-in effect */
100% {
opacity: 0;
}
/* hide trailing cursor */
}
#keyframes blink {
to {
background: transparent;
}
}
<body>
<div id="container">
<p id="text"></p>
</div>
</body>
function create_random_string(string_length) {
var random_string = '';
var characters = 'ABCDEFGabcdefg';
for (var i, i = 0; i < string_length; i++) {
random_string += characters.charAt(Math.floor(Math.random() * characters.length));
}
return random_string;
}
let divElem = document.getElementById('container');
NewLine();
var MyInterval = setInterval(NewLine, 11000);
function NewLine() {
RemoveChild();
let text = document.createElement("p");
text.setAttribute("id", "text");
text.innerHTML = create_random_string(15);
divElem.appendChild(text);
}
function RemoveChild() {
if (divElem.clientHeight > window.innerHeight) {
divElem.innerHTML ="";
}
}
body {
background-color: #000000;
margin: 0;
padding: 0;
overflow: hidden;
display: grid;
height: 100vh;
width: 100vw;
}
#container {
place-content: center;
text-align: center;
line-height: 7.5vh;
}
#text {
font-family: 'Courier New', Courier, monospace;
font-size: 4vw;
letter-spacing: 3vw;
font-weight: bold;
color: #ffffff;
position: relative;
}
#text::before,
#text::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#text::before {
background: #000000;
animation: typewriter 10s steps(15) forwards;
}
#text::after {
width: 0.125em;
bottom: 0vh;
Top: 0vh;
background: #ffffff;
animation: TypingBar 10s steps(15) forwards, blink 750ms steps(15) infinite;
}
#keyframes typewriter {
0% {
left: 0;
}
6.7% {
left: 7vw;
}
100% {
left: 90vw;
}
}
#keyframes TypingBar {
0%,
6.7% {
left: 8vw;
}
99.99% {
left: 89.5vw;
opacity: 1;
}
/* escape fade-in effect */
100% {
opacity: 0;
}
/* hide trailing cursor */
}
#keyframes blink {
to {
background: transparent;
}
}
<body>
<div id="container">
<p id="text"></p>
</div>
</body>
Related
I want to create a popup that shows after 10 sec delay after customer land of product page and if they click outside popup should get closed
Here is my html and css. Can you help me with the JS?
css -.overlay_flight_traveldil {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 5;
}
.overlay_flight_traveldil:target {
visibility: visible;
opacity: 100;
z-index: 5;
}
.popup_flight_travlDil {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
position: relative;
transition: all 2s ease-in-out;
z-index: 5;
}
.popup_flight_travlDil .close_flight_travelDl {
position: absolute;
top: 25px;
right: 20px;
transition: all 200ms;
font-size: 80px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
.popup_flight_travlDil .content_flightht_travel_dil {
max-height: 60%;
overflow: auto;
}
#media screen and (min-width: 480px) {
.popup_flight_travlDil {
width: 33%;
z-index: 5;
}
}
#media screen and (max-width: 480px) {
.popup_flight_travlDil {
width: 90%;
z-index: 5;
}
<div id="popup_flight_travlDil3" class="overlay_flight_traveldil">
<div class="popup_flight_travlDil">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/Mcaffeine-5.jpg?v=1664169142" alt="gh" width="100%" height="80%" />
<a class="close_flight_travelDl" href="#">×</a>
<div class="content_flightht_travel_dil">
</div>
</div>
</div>
Start with the div hidden
Then check what is clicked
I changed the X to a button since there is no need to make it a link. It is not going anywhere. And your framework registers it as a navigation so the back button is affected
window.addEventListener("DOMContentLoaded", () => {
const pop = document.getElementById("popup_flight_travlDil3");
setTimeout(() => pop.hidden = false, 1000); // show after 1 second - change to 10000 to get 10 secs
document.addEventListener("click", (e) => { // what did you click?
const tgt = e.target;
if (tgt.matches(".close_flight_travelDl") || // the close button
!e.target.closest(".popup_flight_travlDil")) { // or something else not the advert
pop.hidden = true;
}
})
})
css -.overlay_flight_traveldil {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 5;
}
.overlay_flight_traveldil:target {
visibility: visible;
opacity: 100;
z-index: 5;
}
.popup_flight_travlDil {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
position: relative;
transition: all 2s ease-in-out;
z-index: 5;
}
.popup_flight_travlDil .close_flight_travelDl {
position: absolute;
top: 25px;
right: 20px;
transition: all 200ms;
font-size: 80px;
font-weight: bold;
color: #000000;
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
.popup_flight_travlDil .content_flightht_travel_dil {
max-height: 60%;
overflow: auto;
}
#media screen and (min-width: 480px) {
.popup_flight_travlDil {
width: 33%;
z-index: 5;
}
}
#media screen and (max-width: 480px) {
.popup_flight_travlDil {
width: 90%;
z-index: 5;
}
<div id="popup_flight_travlDil3" class="overlay_flight_traveldil" hidden>
<div class="popup_flight_travlDil">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/Mcaffeine-5.jpg?v=1664169142" alt="gh" width="100%" height="80%" />
<button type="button" class="close_flight_travelDl">×</button>
<div class="content_flightht_travel_dil">
</div>
</div>
</div>
setting timeout for 10 seconds & adding class of .popup which is defined in css with visiblity:visible & opacity:1 & adding click event on close Button and if user clicks it removes the .popup class making it hidden again
setTimeout(function() {
document.querySelector(".overlay_flight_traveldil").classList.add("popup");
}, 10000);
let closebtn = document.querySelector(".close_flight_travelDl");
closebtn.addEventListener("click", (event) => {
document.querySelector(".overlay_flight_traveldil").classList.remove("popup");
})
.overlay_flight_traveldil {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 5;
animation: popup 2s 1;
}
.popup {
visibility: visible;
opacity: 1
}
.overlay_flight_traveldil:target {
visibility: visible;
opacity: 100;
z-index: 5;
}
.popup_flight_travlDil {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
position: relative;
transition: all 2s ease-in-out;
z-index: 5;
}
.popup_flight_travlDil .close_flight_travelDl {
position: absolute;
top: 25px;
right: 20px;
transition: all 200ms;
font-size: 80px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
.popup_flight_travlDil .content_flightht_travel_dil {
max-height: 60%;
overflow: auto;
}
#media screen and (min-width: 480px) {
.popup_flight_travlDil {
width: 33%;
z-index: 5;
}
}
#media screen and (max-width: 480px) {
.popup_flight_travlDil {
width: 90%;
z-index: 5;
}
<div id="popup_flight_travlDil3" class="overlay_flight_traveldil">
<div class="popup_flight_travlDil">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/Mcaffeine-5.jpg?v=1664169142" alt="gh" width="100%" height="80%" />
<a class="close_flight_travelDl" href="#">×</a>
<div class="content_flightht_travel_dil">
</div>
</div>
</div>
You can do that just by making the popup invisible by adding the following lines
.popup_flight_travlDil {
visibility: hidden;
opacity: 0;
}
And then, you would need some JavaScript to make the popup visible after 10 seconds. For that,
const showPopup = () => {
const popup = document.getElementsByClassName("popup_flight_travlDil")[0];
popup.style.opacity = 1;
popup.style.visibility = "visible";
};
setTimeout(showPopup, 10000);
Here, the function showPopup finds the div that was made invisible by using CSS, and then makes it visible. Whereas, the line setTimeout(showPopup, 10000); calls the showPopup function after 10 seconds. Note that the setTimeout function takes 2 parameters, the function to call and time interval(in milliseconds) to wait before calling that function.
I'm trying to follow this IVS sample, the only difference is using the JW player, I following this documentation
The problem is that this snippet
jwplayer(videoPlayer).addEventListener(
PlayerEventType.TEXT_METADATA_CUE,
function (cue) {
const metadataText = cue.text;
const position = player.getPosition().toFixed(2);
console.log(
`Player Event - TEXT_METADATA_CUE: "${metadataText}". Observed ${position}s after playback started.`
);
triggerQuiz(metadataText);
}
);
is giving this error
script.js:60 Uncaught TypeError: Cannot read properties of undefined (reading 'TEXT_METADATA_CUE')
I'm either not adding an event listener to the jw player correctly or I'm doing something wrong while working with IVS.
My full code is below
const playbackUrl =
"https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.xhP3ExfcX8ON.m3u8";
const videoPlayer = document.getElementById("video-player");
const quizEl = document.getElementById("quiz");
const waitMessage = document.getElementById("waiting");
const questionEl = document.getElementById("question");
const answersEl = document.getElementById("answers");
const cardInnerEl = document.getElementById("card-inner");
var ivsPlayer = {};
var ivsEvents = {};
const ivsConfig = {
playlist: [
{
file: playbackUrl,
type: "ivs",
},
],
};
(function (ivsPlayer) {
jwplayer(videoPlayer)
.setup(ivsConfig)
.on("providerPlayer", function (player) {
console.log("Amazon IVS Player: ", player.ivsPlayer);
console.log("Amazon IVS Player Events: ", player.ivsEvents);
// store the reference to the Amazon IVS Player
ivsPlayer = player.ivsPlayer;
// store the reference to the Amazon IVS Player Events
ivsEvents = player.ivsEvents;
});
const PlayerState = ivsPlayer.PlayerState;
const PlayerEventType = ivsPlayer.PlayerEventType;
jwplayer(videoPlayer).addEventListener(
PlayerEventType.TEXT_METADATA_CUE,
function (cue) {
const metadataText = cue.text;
const position = player.getPosition().toFixed(2);
console.log(
`Player Event - TEXT_METADATA_CUE: "${metadataText}". Observed ${position}s after playback started.`
);
triggerQuiz(metadataText);
}
);
// Setup stream and play
// Remove card
function removeCard() {
quizEl.classList.toggle("drop");
}
// Trigger quiz
function triggerQuiz(metadataText) {
let obj = JSON.parse(metadataText);
quizEl.style.display = "";
quizEl.classList.remove("drop");
waitMessage.style.display = "none";
cardInnerEl.style.display = "none";
cardInnerEl.style.pointerEvents = "auto";
while (answersEl.firstChild) answersEl.removeChild(answersEl.firstChild);
questionEl.textContent = obj.question;
let createAnswers = function (obj, i) {
let q = document.createElement("a");
let qText = document.createTextNode(obj.answers[i]);
answersEl.appendChild(q);
q.classList.add("answer");
q.appendChild(qText);
q.addEventListener("click", (event) => {
cardInnerEl.style.pointerEvents = "none";
if (q.textContent === obj.answers[obj.correctIndex]) {
q.classList.toggle("correct");
} else {
q.classList.toggle("wrong");
}
setTimeout(function () {
removeCard();
waitMessage.style.display = "";
}, 1050);
return false;
});
};
for (var i = 0; i < obj.answers.length; i++) {
createAnswers(obj, i);
}
cardInnerEl.style.display = "";
}
waitMessage.style.display = "";
})(window.ivsPlayer);
Edit see the snippet
const playbackUrl =
"https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.xhP3ExfcX8ON.m3u8";
const ivsConfig = {
playlist: [
{
file: playbackUrl,
type: "ivs",
},
],
};
const videoPlayer = document.getElementById("video-player");
const quizEl = document.getElementById("quiz");
const waitMessage = document.getElementById("waiting");
const questionEl = document.getElementById("question");
const answersEl = document.getElementById("answers");
const cardInnerEl = document.getElementById("card-inner");
(async (IVSPlayer) => {
try {
const playerInstance = jwplayer(videoPlayer).setup(ivsConfig);
playerInstance.on("providerPlayer", function (player) {
console.log("Amazon IVS Player: ", player.ivsPlayer);
console.log("Amazon IVS Player Events: ", player.ivsEvents);
const PlayerEventType = player.ivsEvents;
playerInstance.addEventListener(
PlayerEventType.TEXT_METADATA_CUE,
function (cue) {
const metadataText = cue.text;
const position = player.getPosition().toFixed(2);
console.log(metadataText);
//console.log(
// `Player Event - TEXT_METADATA_CUE: "${metadataText}". Observed ${position}s after playback started.`
//);
//onsole.log(cue);
//triggerQuiz(metadataText);
}
);
});
} catch (e) {
console.error(e);
}
function triggerQuiz(metadataText) {
let obj = JSON.parse(metadataText);
quizEl.style.display = "";
quizEl.classList.remove("drop");
waitMessage.style.display = "none";
cardInnerEl.style.display = "none";
cardInnerEl.style.pointerEvents = "auto";
while (answersEl.firstChild) answersEl.removeChild(answersEl.firstChild);
questionEl.textContent = obj.question;
let createAnswers = function (obj, i) {
let q = document.createElement("a");
let qText = document.createTextNode(obj.answers[i]);
answersEl.appendChild(q);
q.classList.add("answer");
q.appendChild(qText);
q.addEventListener("click", (event) => {
cardInnerEl.style.pointerEvents = "none";
if (q.textContent === obj.answers[obj.correctIndex]) {
q.classList.toggle("correct");
} else {
q.classList.toggle("wrong");
}
setTimeout(function () {
removeCard();
waitMessage.style.display = "";
}, 1050);
return false;
});
};
for (var i = 0; i < obj.answers.length; i++) {
createAnswers(obj, i);
}
cardInnerEl.style.display = "";
}
waitMessage.style.display = "";
})(window.IVSPlayer);
/* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. */
/* SPDX-License-Identifier: MIT-0 */
/* Reset */
*,*::before,*::after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],figure,blockquote,dl,dd{margin:0}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}#media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}
/* Variables */
:root {
--radius: 12px;
}
/* Style */
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
overflow: hidden;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
user-select: none;
}
#app {
background: #334273;
height: 100%;
}
.inner {
max-width: 1080px;
display: flex;
flex-direction: column;
position: relative;
align-items: stretch;
margin: 0 auto;
padding: 40px;
}
.player-wrapper {
width: 100%;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
border-radius: var(--radius);
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.aspect-spacer {
padding-bottom: 56.25%;
}
.el-player {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: #000;
border-radius: var(--radius);
}
video {
width: 100%;
border-radius: var(--radius);
background: #000;
}
.quiz-wrap {
min-height: 460px;
position: relative;
transition: all 0.25s ease-in;
}
.card {
margin: 0 20px;
padding: 20px;
position: absolute;
left: 0;
right: 0;
background: #fff;
border-radius: 20px;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
transition: all 1s cubic-bezier(1, -0.56, 0, 1);
transform: translate3d(0, 0, 0) scale(1);
backface-visibility: hidden;
z-index: 1;
}
.card.drop {
opacity: 0;
transform: translate3d(0, 200px, -20px) scale(0.92);
}
h2 {
font-size: 25px;
text-align: center;
padding-bottom: 20px;
}
.answer {
height: 50px;
line-height: 50px;
font-size: 20px;
display: flex;
text-decoration: none;
border: 1px solid #d5dbdb;
border-radius: 50px;
padding: 0 24px;
margin: 10px 0;
background: #fafafa;
color: #545b64;
transition: all 0.05s ease-in-out;
}
.answer:hover {
background: #ebebebe0;
}
.answer:active {
background: #ff9900;
border: 1px solid #eb5f07;
color: #fff;
}
.answer.correct {
background: #25a702;
border: 1px solid #1d8102;
color: #fff;
animation: blink 0.45s infinite;
}
.answer.wrong {
background: #d13212;
border: 1px solid #b7290d;
color: #fff;
animation: blink 0.45s infinite;
}
#waiting {
top: 100px;
left: 0;
right: 0;
position: absolute;
display: flex;
align-items: center;
}
.waiting-text {
width: 100%;
display: block;
text-align: center;
font-size: 18px;
color: #d5dbdb;
}
.float {
transform: translateY(0px);
animation: float 6s ease-in-out infinite;
}
/* Utility - Position */
.pos-absolute {
position: absolute !important;
}
.pos-fixed {
position: fixed !important;
}
.pos-relative {
position: relative !important;
}
.top-0 {
top: 0 !important;
}
.bottom-0 {
bottom: 0 !important;
}
/* Utility - Width/Height */
.full-width {
width: 100%;
}
.full-height {
height: 100%;
}
/* Animations */
#keyframes blink {
50% {
opacity: 0.8;
}
}
#keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
/* Mediaqueries */
#media (max-width: 767px) {
h2 {
font-size: 20px;
}
.card {
top: -20px;
}
}
#media (min-width: 767px) {
.card {
top: -25%;
}
}
<head>
<script src="https://content.jwplatform.com/libraries/oH2wJDod.js"></script>
<script src="https://player.live-video.net/1.11.0/amazon-ivs-jw-provider.min.js"></script>
</head>
<body>
<div id="app">
<div class="inner">
<!-- Player wrapper, forcing 16:9 aspect ratio -->
<div class="player-wrapper">
<div class="aspect-spacer"></div>
<div class="pos-absolute full-width full-height top-0">
<div id="video-player"></div>
</div>
</div>
<!-- Quiz UI -->
<div class="quiz-wrap">
<div id="waiting">
<span class="waiting-text float"
>Waiting for the next question</span
>
</div>
<div id="quiz" class="card drop">
<div id="card-inner">
<h2 id="question"></h2>
<div id="answers"></div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
You are inside IIFE you can't declare outside of scope IIFE's are anonymous
Please read docume
const playbackUrl =
"https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.xhP3ExfcX8ON.m3u8";
const ivsConfig = {
playlist: [
{
file: playbackUrl,
type: "ivs"
}
]
};
const videoPlayer = document.getElementById("video-player");
const quizEl = document.getElementById("quiz");
const waitMessage = document.getElementById("waiting");
const questionEl = document.getElementById("question");
const answersEl = document.getElementById("answers");
const cardInnerEl = document.getElementById("card-inner");
(async (IVSPlayer) => {
try {
const playerInstance = jwplayer(videoPlayer).setup(ivsConfig);
playerInstance.on("providerPlayer", function (player) {
if (player) {
const { ivsEvents, ivsPlayer } = player;
ivsPlayer.addEventListener(
ivsEvents.PlayerEventType.TEXT_METADATA_CUE,
function (cue) {
const metadataText = cue.text;
// const position = player.getPosition().toFixed(2);
// position is under state.
const position = ivsPlayer.core.state.position.toFixed(2);
console.log(
`Player Event - TEXT_METADATA_CUE: "${metadataText}". Observed ${position}s after playback started.`
);
triggerQuiz(metadataText);
}
);
}
});
} catch (e) {
console.error(e);
}
function triggerQuiz(metadataText) {
let obj = JSON.parse(metadataText);
quizEl.style.display = "";
quizEl.classList.remove("drop");
waitMessage.style.display = "none";
cardInnerEl.style.display = "none";
cardInnerEl.style.pointerEvents = "auto";
while (answersEl.firstChild) answersEl.removeChild(answersEl.firstChild);
questionEl.textContent = obj.question;
let createAnswers = function (obj, i) {
let q = document.createElement("a");
let qText = document.createTextNode(obj.answers[i]);
answersEl.appendChild(q);
q.classList.add("answer");
q.appendChild(qText);
q.addEventListener("click", (event) => {
cardInnerEl.style.pointerEvents = "none";
if (q.textContent === obj.answers[obj.correctIndex]) {
q.classList.toggle("correct");
} else {
q.classList.toggle("wrong");
}
setTimeout(function () {
// removeCard(); is not defined. you must
// create it first
waitMessage.style.display = "";
}, 1050);
return false;
});
};
for (var i = 0; i < obj.answers.length; i++) {
createAnswers(obj, i);
}
cardInnerEl.style.display = "";
}
waitMessage.style.display = "";
})(window.IVSPlayer);
/* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. */
/* SPDX-License-Identifier: MIT-0 */
/* Reset */
*,
*::before,
*::after {
box-sizing: border-box;
}
ul[class],
ol[class] {
padding: 0;
}
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
margin: 0;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
ul[class],
ol[class] {
list-style: none;
}
a:not([class]) {
text-decoration-skip-ink: auto;
}
img {
max-width: 100%;
display: block;
}
article > * + * {
margin-top: 1em;
}
input,
button,
textarea,
select {
font: inherit;
}
#media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Variables */
:root {
--radius: 12px;
}
/* Style */
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
overflow: hidden;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Ubuntu, "Helvetica Neue", sans-serif;
user-select: none;
}
#app {
background: #334273;
height: 100%;
}
.inner {
max-width: 1080px;
display: flex;
flex-direction: column;
position: relative;
align-items: stretch;
margin: 0 auto;
padding: 40px;
}
.player-wrapper {
width: 100%;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
border-radius: var(--radius);
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.aspect-spacer {
padding-bottom: 56.25%;
}
.el-player {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: #000;
border-radius: var(--radius);
}
video {
width: 100%;
border-radius: var(--radius);
background: #000;
}
.quiz-wrap {
min-height: 460px;
position: relative;
transition: all 0.25s ease-in;
}
.card {
margin: 0 20px;
padding: 20px;
position: absolute;
left: 0;
right: 0;
background: #fff;
border-radius: 20px;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
transition: all 1s cubic-bezier(1, -0.56, 0, 1);
transform: translate3d(0, 0, 0) scale(1);
backface-visibility: hidden;
z-index: 1;
}
.card.drop {
opacity: 0;
transform: translate3d(0, 200px, -20px) scale(0.92);
}
h2 {
font-size: 25px;
text-align: center;
padding-bottom: 20px;
}
.answer {
height: 50px;
line-height: 50px;
font-size: 20px;
display: flex;
text-decoration: none;
border: 1px solid #d5dbdb;
border-radius: 50px;
padding: 0 24px;
margin: 10px 0;
background: #fafafa;
color: #545b64;
transition: all 0.05s ease-in-out;
}
.answer:hover {
background: #ebebebe0;
}
.answer:active {
background: #ff9900;
border: 1px solid #eb5f07;
color: #fff;
}
.answer.correct {
background: #25a702;
border: 1px solid #1d8102;
color: #fff;
animation: blink 0.45s infinite;
}
.answer.wrong {
background: #d13212;
border: 1px solid #b7290d;
color: #fff;
animation: blink 0.45s infinite;
}
#waiting {
top: 100px;
left: 0;
right: 0;
position: absolute;
display: flex;
align-items: center;
}
.waiting-text {
width: 100%;
display: block;
text-align: center;
font-size: 18px;
color: #d5dbdb;
}
.float {
transform: translateY(0px);
animation: float 6s ease-in-out infinite;
}
/* Utility - Position */
.pos-absolute {
position: absolute !important;
}
.pos-fixed {
position: fixed !important;
}
.pos-relative {
position: relative !important;
}
.top-0 {
top: 0 !important;
}
.bottom-0 {
bottom: 0 !important;
}
/* Utility - Width/Height */
.full-width {
width: 100%;
}
.full-height {
height: 100%;
}
/* Animations */
#keyframes blink {
50% {
opacity: 0.8;
}
}
#keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
/* Mediaqueries */
#media (max-width: 767px) {
h2 {
font-size: 20px;
}
.card {
top: -20px;
}
}
#media (min-width: 767px) {
.card {
top: -25%;
}
}
<head>
<script src="https://content.jwplatform.com/libraries/oH2wJDod.js"></script>
<script src="https://player.live-video.net/1.11.0/amazon-ivs-jw-provider.min.js"></script>
</head>
<body>
<div id="app">
<div class="inner">
<!-- Player wrapper, forcing 16:9 aspect ratio -->
<div class="player-wrapper">
<div class="aspect-spacer"></div>
<div class="pos-absolute full-width full-height top-0">
<div id="video-player"></div>
</div>
</div>
<!-- Quiz UI -->
<div class="quiz-wrap">
<div id="waiting">
<span class="waiting-text float">Waiting for the next question</span>
</div>
<div id="quiz" class="card drop">
<div id="card-inner">
<h2 id="question"></h2>
<div id="answers"></div>
</div>
</div>
</div>
</div>
</div>
</body>
So I have an issue with my code where when my JavaScript types of a word (eg. Gamer) it limits to a certain width and ends up going vertical instead of horizontal.
Here are all the classes and code for the text:
// TYPEWRITER //
const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");
const textArray = ["YouTuber", "Writer", "Designer", "Creator", "Programmer", "Gamer"]
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000;
let textArrayIndex = 0;
let charIndex = 0;
function type() {
if(charIndex < textArray[textArrayIndex].length) {
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
charIndex++;
setTimeout(type, typingDelay);
}
else {
cursorSpan.classList.remove("typing");
setTimeout(erase, newTextDelay);
}
}
function erase() {
if(charIndex > 0) {
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
typedTextSpan.textContent = textArray[textArrayIndex].substring(0,charIndex-1);
charIndex--;
setTimeout(erase, erasingDelay)
}
else {
cursorSpan.classList.remove("typing");
textArrayIndex++;
if(textArrayIndex>=textArray.length) textArrayIndex=0;
setTimeout(type, typingDelay + 800);
}
}
document.addEventListener("DOMContentLoaded", function() {
if(textArray.length) setTimeout(type, newTextDelay + 250);
});
/* CUSTOMIZATION */
body {
margin: 0;
padding: 0;
background-color: #494949;
}
h1 {
position: relative;
font-size: 10vw;
}
/* TYPEWRITER */
.textbody {
margin-top: 10vh;
font-family: "Source Sans Pro", sans-serif;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
color: white;
}
.typed-text {
font-weight: normal;
color: #dd7732;
}
.cursor {
display: inline-block;
width: 3px;
background-color: #ccc;
margin-left: 0.1rem;
animation: blink 1s infinite;
}
.cursor.typing {
animation: none;
}
<body>
<div class="textbody">
<h1>
I am a <span class="typed-text"></span><span class="cursor typing"> </span>
</h1>
</div>
</body>
I had a flexbox in it and it fixed it adding 3 lines and making it look very weird, so that's a start.
I noticed none of the classes under the TYPEWRITER comment in CSS do anything to the problem. I believe it has to do something with the other two or the JavaScript.
Change max-width to width : 100%; into the .textbody and to put it in center add display: flex;
.textbody {
margin-top: 10vh;
font-family: "Source Sans Pro", sans-serif;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
display: flex;
justify-content: center;
color: white;
}
I'm trying to make a typing speed test counter. The goal is to move the blinking cursor throughout the text only if the correct character is entered. I'm unable to understand how to move through the text. I shall then count the number of minutes taken and calculate wpm.
function timer() {
var seconds = 3;
var element = document.getElementById('timer');
var timerId = setInterval(countdown, 1000);
function countdown() {
if (seconds == -1) {
clearTimeout(timerId);
element.innerHTML = "Time Up";
var value = 1;
wpm();
} else {
element.innerHTML = "Time Left: " + seconds + " " + "seconds";
seconds--;
}
}
}
body {
font-family: monospace;
}
.title-of-page>h1 {
text-align: center;
font-family: monospace;
}
.title-of-page {
background-color: #414a4c;
color: #ced3db;
}
.jumbotron {
margin: 0;
}
.navigation-bar {
background-color: #46494f;
}
a {
color: green;
}
.nav>li>a:hover {
background-color: #878f9b;
}
.navbar-nav>li {
text-align: center;
float: none;
display: table-cell;
}
.navbar-nav {
display: table;
width: 100%;
margin: 0;
}
.navbar {
margin: 0;
padding: 0;
border-radius: 0;
}
.typing-field {
width: 60em;
height: 8em;
background-color: #7e7e7f;
opacity: 0.4;
margin-left: 15em;
margin-top: 5em;
border: 3px solid black;
padding: 0.8em;
}
#display-text {
color: white;
font-size: 2em;
}
.user-input {
font-size: 1em;
padding-left: 35em;
padding-top: 2em;
}
#timer {
padding-top: 4em;
padding-left: 10em;
font-size: 1.5em;
color: red;
}
.typed-cursor {
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
color: black;
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<body>
<div class="jumbotron title-of-page container-fluid">
<h1>Typing Counter</h1>
</div>
<nav class="navbar navigation-bar container-fluid">
<div class="">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Contest</li>
<li>About</li>
<li>Leaderboard</li>
</ul>
</div>
</nav>
<div>
<div id="timer">
<button type="button" class="btn" onclick="timer();">Start</button>
</div>
<div class="typing-field">
<p id="display-text"><span class="typed-cursor">T</span>his is to test your typing speed. So type like you'll never type again.</p>
</div>
<div class="user-input">
<input type="text" name="user-input-text-box" id="user-input" />
</div>
</div>
</body>
For javascript I tried to do something like this. It's mostly wrong. I'm still a beginner.
window.onload = function wpm() {
var text = document.getElementById('user-input').innerHTML;
var i=0;
document.getElementById('user-input').onkeyup = function() {
var letter = this.value;
if(letter==text[i])
{
letter.style.color="green";
i++;
}
}
}
Here is what I ended up with after playing a little with your code:
var display = document.getElementById('display-text');
var userInput = document.getElementById('user-input');
userInput.onkeyup = function() {
for (var i = 0; i < userInput.value.length; i++) { // Counts correct letters
if (display.innerText[i] != userInput.value[i])
break; // Exit loop if incorrect
}
display.innerHTML = '<span style="color: green;">' + display.innerText.substr(0, i) + '</span>' + '<span class="typed-cursor">' + display.innerText.substr(i, 1) + '</span>' + display.innerText.substr(i + 1);
}
body {
font-family: monospace;
}
.typing-field {
width: auto;
/* Modified for snippet */
height: auto;
/* Modified for snippet */
background-color: #7e7e7f;
opacity: 0.4;
margin-left: 0;
/* Modified for snippet */
margin-top: 0;
/* Modified for snippet */
border: 3px solid black;
padding: 0.8em;
}
#display-text {
color: white;
font-size: 2em;
}
.user-input {
font-size: 1em;
padding-left: 0;
/* Modified for snippet */
padding-top: 0;
/* Modified for snippet */
}
#timer {
padding-left: 0;
/* Modified for snippet */
padding-top: 0;
/* Modified for snippet */
font-size: 1.5em;
color: red;
}
.typed-cursor {
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
color: black;
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<body>
<div>
<div id="timer">
<button type="button" class="btn" onclick="timer();">Start</button>
</div>
<div class="typing-field">
<p id="display-text"><span class="typed-cursor">T</span>his is to test your typing speed. So type like you'll never type again.</p>
</div>
<div class="user-inputs">
<input type="text" name="user-input-text-box" id="user-input" />
</div>
</div>
</body>
This code compares the displayed and the typed strings, highlights in green the correct letters and put the blinking cursor on the one to be typed.
I hope it helps. :)
If you want to track the letters typed and then turn them a different color, you can save the text string in a variable and queue through it dumping the typed letters into another array, then merge them together into the output field:
let textToType = "This is what I want you to type.";
const typedLetters = [];
document.getElementById('user-input').addEventListener("keypress", function(event) {
const key = event.which || event.keyCode;
const nextLetter = textToType[0].charCodeAt();
const outputTarget = document.getElementById("display-text");
const greenWrapper = document.createElement("span");
greenWrapper.classList.add("typed-cursor");
if (key === nextLetter) {
typedLetters.push(String.fromCharCode(nextLetter));
textToType = textToType.substr(1);
greenWrapper.textContent = typedLetters.join("");
outputTarget.textContent = textToType;
outputTarget.prepend(greenWrapper);
};
})
body {
font-family: monospace;
}
.title-of-page>h1 {
text-align: center;
font-family: monospace;
}
.title-of-page {
background-color: #414a4c;
color: #ced3db;
}
.jumbotron {
margin: 0;
}
.navigation-bar {
background-color: #46494f;
}
a {
color: green;
}
.nav>li>a:hover {
background-color: #878f9b;
}
.navbar-nav>li {
text-align: center;
float: none;
display: table-cell;
}
.navbar-nav {
display: table;
width: 100%;
margin: 0;
}
.navbar {
margin: 0;
padding: 0;
border-radius: 0;
}
.typing-field {
width: 60em;
height: 8em;
background-color: #7e7e7f;
opacity: 0.4;
margin-left: 15em;
margin-top: 5em;
border: 3px solid black;
padding: 0.8em;
}
#display-text {
color: white;
font-size: 2em;
}
.user-input {
font-size: 1em;
padding-left: 35em;
padding-top: 2em;
}
#timer {
padding-top: 4em;
padding-left: 10em;
font-size: 1.5em;
color: red;
}
.typed-cursor {
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
color: black;
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="jumbotron title-of-page container-fluid">
<h1>Typing Counter</h1>
</div>
<nav class="navbar navigation-bar container-fluid">
<div class="">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Contest</li>
<li>About</li>
<li>Leaderboard</li>
</ul>
</div>
</nav>
<div>
<div id="timer">
<button type="button" class="btn" onclick="timer();">Start</button>
</div>
<div class="typing-field">
<p id="display-text">This is what I want you to type.
</div>
<div class="user-input">
<input type="text" name="user-input-text-box" id="user-input" />
</div>
</div>
I want to use star wars opening crawl on my website. I've found the right example
http://codepen.io/SirDaev/pen/vLLwzw
There is no sound. According to the author sound should be displayed with the text and here goes the problem. There is no sound when i copy the whole code on my website. I' using child template of wordpress 16
var sWidth; //screen width
var sHeight; //screen height
var canvas;
var context;
var numOfStars;
var starDensity = 1800; //lower == more stars
var starColors = ["#111", "#333", "#555", "#7872a8", "#483f26"];
var audio = $('audio').get(0);
$(document).ready(function() {
//Play the theme song
setTimeout(function() {
audio.play();
}, 7600);
//Get the window size
sWidth = $(window).width();
sHeight = $(window).height();
//Get the canvas
canvas = $('#starfield');
//Fill out the canvas
canvas.attr('height', sHeight);
canvas.attr('width', sWidth);
context = canvas[0].getContext('2d');
//Calculate the number of stars
numOfStars = Math.floor((sWidth * sHeight) / starDensity);
console.log(numOfStars);
//Draw the stars
function stars() {
for (i=0;i<numOfStars;i++) {
//Get a random star color
var starColor = starColors[Math.floor(Math.random()*5)];
//Get a random x-position
var starX = Math.floor(Math.random()*sWidth);
//Get a random y-position
var starY = Math.floor(Math.random()*sHeight);
//Draw
context.beginPath();
context.arc(starX, starY, 1, 0, 2 * Math.PI);
context.fillStyle = starColor;
context.fill();
}
}
//Draw the stars
stars();
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
width: 100%;
height: 100%;
background-color: #000;
}
body {
position: relative;
width: 100%;
max-width: 1920px;
height: 100%;
max-height: 1080px;
font-family: 'Open Sans';
overflow: hidden;
}
#media screen and (min-width: 1600px) {
body {
margin: 0 auto;
}
}
/* In case of no audio support */
audio {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 14px;
font-weight: 700;
}
#starfield {
z-index: 1;
opacity: 0;
position: absolute;
animation: starfield 0s 8s forwards;
}
#keyframes starfield {
to { opacity: 1; }
}
.long-time {
z-index: 2;
opacity: 0;
position: absolute;
color: #00d7ff;
top: 50%;
left: 51%;
width: 65%;
transform: translate3d(-50%,-50%,0);
font-size: 30px;
font-size: 4.5vw;
line-height: 1.5em;
animation: long-time 5s 1s forwards;
}
#media screen and (min-width: 1600px) {
.long-time {
font-size: 5.0em;
}
}
#keyframes long-time {
0% { opacity: 0; }
18% { opacity: 1; }
82% { opacity: 1; }
100% { opacity: 0; }
}
.logo {
opacity: 0;
z-index: 3;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
animation: logo 10s 8s cubic-bezier(0,.1,.2,1); forwards;
}
#keyframes logo {
0% { opacity: 1; }
98% { opacity: 1; }
100% { width: 40px;
opacity: 0; }
}
.crawl-container {
z-index: 2;
position: absolute;
bottom: 0;
width: 100%;
height: 350vh;
max-height: 3000px;
/**/color: #ffe029;
/**/text-align: justify;
/**/overflow: hidden;
/**/transform-origin: 50% 100%;/**/
/**/transform: perspective(200px) rotateX(16deg);
/**/animation: crawl-container 0s 17s forwards;
}
#keyframes crawl-container {
to { opacity: 1; }
}
.crawl-container .crawl {
z-index: 2;
position: absolute;
top: 100%;
width: 100%;
animation: crawl 170s 17s linear forwards;
}
.crawl p {
margin-left: auto;
margin-right: auto;
padding: 0 10%;
max-width: 1500px;
}
.crawl p.title {
font-size: 3em;
font-size: 5vw;
text-align: center;
}
.crawl p.title-1 {
margin-bottom: .7em;
}
.crawl p.title-2 {
margin-bottom: 1.2em;
}
.crawl p.title-2 img {
width: 65%;
height: auto;
}
p.crawl-p {
text-align: justify;
font-size: 5.6vw;
margin-bottom: 1.2em;
}
#media screen and (min-width: 1600px) {
p.crawl-p {
font-size: 5.0em;
}
}
#keyframes crawl {
to { top: -250%; }
}
<audio preload="auto">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.ogg" type="audio/ogg">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<canvas id="starfield"></canvas>
<div class="long-time">A long time ago in a galaxy far,<br />far away....</div>
<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/star-wars-7-logo.png" />
<div class="crawl-container">
<div class="crawl">
<p class="title title-1">Episode VII</p>
<p class="title title-2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/the-force-awakens.png"</p>
<p class="crawl-p">Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.</p>
<p class="crawl-p">With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.</p>
<p class="crawl-p">Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....</p>
</div>
</div>
The audio isn't played. To play the audio instantly, use the autoplay attribute on the audio tag.
<audio preload="auto" autoplay>
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.ogg" type="audio/ogg">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Working snippet:
var sWidth; //screen width
var sHeight; //screen height
var canvas;
var context;
var numOfStars;
var starDensity = 1800; //lower == more stars
var starColors = ["#111", "#333", "#555", "#7872a8", "#483f26"];
var audio = $('audio').get(0);
$(document).ready(function() {
//Play the theme song
setTimeout(function() {
audio.play();
}, 7600);
//Get the window size
sWidth = $(window).width();
sHeight = $(window).height();
//Get the canvas
canvas = $('#starfield');
//Fill out the canvas
canvas.attr('height', sHeight);
canvas.attr('width', sWidth);
context = canvas[0].getContext('2d');
//Calculate the number of stars
numOfStars = Math.floor((sWidth * sHeight) / starDensity);
console.log(numOfStars);
//Draw the stars
function stars() {
for (i=0;i<numOfStars;i++) {
//Get a random star color
var starColor = starColors[Math.floor(Math.random()*5)];
//Get a random x-position
var starX = Math.floor(Math.random()*sWidth);
//Get a random y-position
var starY = Math.floor(Math.random()*sHeight);
//Draw
context.beginPath();
context.arc(starX, starY, 1, 0, 2 * Math.PI);
context.fillStyle = starColor;
context.fill();
}
}
//Draw the stars
stars();
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
width: 100%;
height: 100%;
background-color: #000;
}
body {
position: relative;
width: 100%;
max-width: 1920px;
height: 100%;
max-height: 1080px;
font-family: 'Open Sans';
overflow: hidden;
}
#media screen and (min-width: 1600px) {
body {
margin: 0 auto;
}
}
/* In case of no audio support */
audio {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 14px;
font-weight: 700;
}
#starfield {
z-index: 1;
opacity: 0;
position: absolute;
animation: starfield 0s 8s forwards;
}
#keyframes starfield {
to { opacity: 1; }
}
.long-time {
z-index: 2;
opacity: 0;
position: absolute;
color: #00d7ff;
top: 50%;
left: 51%;
width: 65%;
transform: translate3d(-50%,-50%,0);
font-size: 30px;
font-size: 4.5vw;
line-height: 1.5em;
animation: long-time 5s 1s forwards;
}
#media screen and (min-width: 1600px) {
.long-time {
font-size: 5.0em;
}
}
#keyframes long-time {
0% { opacity: 0; }
18% { opacity: 1; }
82% { opacity: 1; }
100% { opacity: 0; }
}
.logo {
opacity: 0;
z-index: 3;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
animation: logo 10s 8s cubic-bezier(0,.1,.2,1); forwards;
}
#keyframes logo {
0% { opacity: 1; }
98% { opacity: 1; }
100% { width: 40px;
opacity: 0; }
}
.crawl-container {
z-index: 2;
position: absolute;
bottom: 0;
width: 100%;
height: 350vh;
max-height: 3000px;
/**/color: #ffe029;
/**/text-align: justify;
/**/overflow: hidden;
/**/transform-origin: 50% 100%;/**/
/**/transform: perspective(200px) rotateX(16deg);
/**/animation: crawl-container 0s 17s forwards;
}
#keyframes crawl-container {
to { opacity: 1; }
}
.crawl-container .crawl {
z-index: 2;
position: absolute;
top: 100%;
width: 100%;
animation: crawl 170s 17s linear forwards;
}
.crawl p {
margin-left: auto;
margin-right: auto;
padding: 0 10%;
max-width: 1500px;
}
.crawl p.title {
font-size: 3em;
font-size: 5vw;
text-align: center;
}
.crawl p.title-1 {
margin-bottom: .7em;
}
.crawl p.title-2 {
margin-bottom: 1.2em;
}
.crawl p.title-2 img {
width: 65%;
height: auto;
}
p.crawl-p {
text-align: justify;
font-size: 5.6vw;
margin-bottom: 1.2em;
}
#media screen and (min-width: 1600px) {
p.crawl-p {
font-size: 5.0em;
}
}
#keyframes crawl {
to { top: -250%; }
}
<audio preload="auto" autoplay>
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.ogg" type="audio/ogg">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<canvas id="starfield"></canvas>
<div class="long-time">A long time ago in a galaxy far,<br />far away....</div>
<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/star-wars-7-logo.png" />
<div class="crawl-container">
<div class="crawl">
<p class="title title-1">Episode VII</p>
<p class="title title-2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/the-force-awakens.png"</p>
<p class="crawl-p">Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.</p>
<p class="crawl-p">With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.</p>
<p class="crawl-p">Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....</p>
</div>
</div>
you miss autoplay feature of audio tag on HTML 5 ,
allways try that first ..
http://www.w3schools.com/tags/att_audio_autoplay.asp