I want to make the element <div id="text"> appear after a loading screen: "Welcome in Shanghaied".
But I can't make it show.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Idk</title>
<script src="skrypt.js"></script> <!--Zaimportowanie javascriptu-->
<link rel="stylesheet" type="text/css" href="style.css"> <!--Odwołanie do cssa-->
</head>
<body>
<div class="disappear">
<div class="container"> <!--Div z napisem-->
<div class="data">Welcome in Shanghaied</div> <!--Tu wpisz tekst-->
</div>
<!--Rozpoczęcia javascriptu-->
<script type="text/javascript">
const text = baffle(".data");
text.set({
characters : '▒▓░ >▒█▓▒▒ >█▓▒░ ██▒ ▒█/▒░ ▓░>> <▒▓ █▒▓░ █▒▓▓',
// szybkość, im większa tym wolniej
speed: 69
})
text.start();
//ilość znaków
text.reveal(4201);
</script>
</div>
<div class="content">
<div id="text">
<p>Test for the Text</p>
</div>
</div>
</body>
</html>
Css
html, body{
margin: 0; /* margines */
padding: 0; /* Padding */
width: 100%; /* Szerokość */
height: 100vh; /* Wysokość */
background: #101010; /* Kolor tła */
cursor: none; /* Chowanie kursora */
}
.data{
font-family: Arial, Verdana, sans-serif; /* Po font family dajemy nazwe czcionki */
color: #fff; /* Kolor czcionki */
font-size: 40px; /* Rozmiar czcionki */
letter-spacing: 12px; /* Spacje pomiędzy literami */
font-weight: 500; /* Grubość czcionki */
position: absolute; /* Pozycja czcionki */
top: 50%; /* Pozycja czcionki */
left:50%; /* Pozycja czcionki */
transform: translate(-50%, -50%);
}
.disappear {
animation: disappear 0s linear 3.2s forwards;
}
#keyframes disappear {
to {opacity:0;}
}
#text p {
display: inline-block;
font-size: 21px;
text-align: center;
position: absolute;
animation: appear 2s;
left: 315px;
}
#keyframes appear {
from {
left: -100px;
}
to {
left: 315px;
}
}
#-moz-keyframes appear {
/* Firefox */
from {
left: -100px;
}
to {
left: 315px;
}
}
#-webkit-keyframes appear {
/* Safari and Chrome */
from {
left: -100px;
}
to {
left: 315px;
}
}
#-o-keyframes appear {
/* Opera */
from {
left: -100px;
}
to {
left: 315px;
}
}
JS
/*!
* baffle 0.3.6 - A tiny javascript library for obfuscating and revealing text in DOM elements.
* Copyright (c) 2016 Cam Wiegert <cam#camwiegert.com> - https://camwiegert.github.io/baffle
* License: MIT
*/
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.baffle=e():t.baffle=e()}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return t[r].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}var i=n(2),o=r(i);t.exports=o["default"]},function(t,e){"use strict";function n(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);return t}function r(t,e){return t.split("").map(e).join("")}function i(t){return t[Math.floor(Math.random()*t.length)]}function o(t,e){for(var n=0,r=t.length;n<r;n++)e(t[n],n)}function u(t){return t.map(function(t,e){return!!t&&e}).filter(function(t){return t!==!1})}function s(t){return"string"==typeof t?[].slice.call(document.querySelectorAll(t)):[NodeList,HTMLCollection].some(function(e){return t instanceof e})?[].slice.call(t):t.nodeType?[t]:t}Object.defineProperty(e,"__esModule",{value:!0}),e.extend=n,e.mapString=r,e.sample=i,e.each=o,e.getTruthyIndices=u,e.getElements=s},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var o=n(1),u=n(3),s=r(u),c={characters:"AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz~!##$%^&*()-+=[]{}|;:,./<>?",exclude:[" "],speed:50},a=function(){function t(e,n){i(this,t),this.options=(0,o.extend)(Object.create(c),n),this.elements=(0,o.getElements)(e).map(s["default"]),this.running=!1}return t.prototype.once=function(){var t=this;return(0,o.each)(this.elements,function(e){return e.write(t.options.characters,t.options.exclude)}),this.running=!0,this},t.prototype.start=function(){var t=this;return clearInterval(this.interval),(0,o.each)(this.elements,function(t){return t.init()}),this.interval=setInterval(function(){return t.once()},this.options.speed),this.running=!0,this},t.prototype.stop=function(){return clearInterval(this.interval),this.running=!1,this},t.prototype.set=function(t){return(0,o.extend)(this.options,t),this.running&&this.start(),this},t.prototype.text=function(t){var e=this;return(0,o.each)(this.elements,function(n){n.text(t(n.value)),e.running||n.write()}),this},t.prototype.reveal=function(){var t=this,e=arguments.length<=0||void 0===arguments[0]?0:arguments[0],n=arguments.length<=1||void 0===arguments[1]?0:arguments[1],r=e/this.options.speed||1,i=function(){clearInterval(t.interval),t.running=!0,t.interval=setInterval(function(){var e=t.elements.filter(function(t){return!t.bitmap.every(function(t){return!t})});(0,o.each)(e,function(e){var n=Math.ceil(e.value.length/r);e.decay(n).write(t.options.characters,t.options.exclude)}),e.length||(t.stop(),(0,o.each)(t.elements,function(t){return t.init()}))},t.options.speed)};return setTimeout(i,n),this},t}();e["default"]=function(t,e){return new a(t,e)}},function(t,e,n){"use strict";function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var u=n(1),s=function(){function t(e){o(this,t),this.value=e,this.init()}return t.prototype.init=function(){return this.bitmap=this.value.split("").map(function(){return 1}),this},t.prototype.render=function(){var t=this,e=arguments.length<=0||void 0===arguments[0]?[]:arguments[0],n=arguments.length<=1||void 0===arguments[1]?[]:arguments[1];return e.length?(0,u.mapString)(this.value,function(r,i){return n.indexOf(r)>-1?r:t.bitmap[i]?(0,u.sample)(e):r}):this.value},t.prototype.decay=function(){for(var t=arguments.length<=0||void 0===arguments[0]?1:arguments[0];t--;){var e=(0,u.getTruthyIndices)(this.bitmap);this.bitmap[(0,u.sample)(e)]=0}return this},t.prototype.text=function(){var t=arguments.length<=0||void 0===arguments[0]?this.value:arguments[0];return this.value=t,this.init(),this},t}(),c=function(t){function e(n){o(this,e);var i=r(this,t.call(this,n.textContent));return i.element=n,i}return i(e,t),e.prototype.write=function(t,e){return this.element.textContent=this.render(t,e),this},e}(s);e["default"]=function(t){return new c(t)}}])});
You can either create a page, which only does the loading screen, and then move onto another page with the element.
or otherwise give the loading screen an opaque background to hide the element, then hide it afterwards.
document.getElementById("text").style.display = "none"; //Hide
document.getElementById("text").style.display = "none"; //Show
You can additionally defer the script via:
<script src="script.js" defer></script>
Well.. first of all, your text is black on a black background.. so it's never gonna appear unless you change that. :-) Secondly, you can add a function that will execute it after your loading ends called setTimeout, tag the p using query selector and apply the animation.
I changed the variable to timeLoading to track your intro, applied it in, and used that to change setTimeout.. with a change of -1000 to make it better (not sure why, the loading is kinda weird). The only thing that is wrong now is that at the beginning your text should be off screen.. but I'll leave that to you to practice. ;)
Here's the code you need:
<script type="text/javascript">
const text = baffle(".data");
text.set({
characters : '▒▓░ >▒█▓▒▒ >█▓▒░ ██▒ ▒█/▒░ ▓░>> <▒▓ █▒▓░ █▒▓▓',
// szybkość, im większa tym wolniej
speed: 69
})
text.start();
//ilość znaków
let timeLoading = 4000; // Set your intro loading here
text.reveal(timeLoading);
setTimeout(() => {
document.querySelector("#text p").style.animation = "appear 2s";
}, timeLoading - 1000);
</script>
I want to add 2 classes to my div with an event listener, but I want it to add one list, update the DOM, and add the second class
I need to move the div with the id app to the top and then to the left when the user clicks the key 1, but it goes up and left at the same time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
height: 100%;
width: 100%;
background-image: url("TPHRG floorplan1.png");
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
.robot_start_top {
top: 280px;
transition: top 1s;
}
.robot_start_left {
position: fixed;
left: 600px;
transition: all 1s;
}
.robot_end_left {
left: 500px;
}
.robot_end_top {
top: 180px;
}
.robot1_start_left {
position: fixed;
left: 600px;
transition: left 1s;
}
.robot1_end_left {
left: 400px;
}
</style>
</head>
<body onkeydown="move(event)">
<div class="robot_start_left robot_start_top" id="app">
<img id="robot" style="width:30px; height:40px" />
</div>
<script>
let count = 0;
var move = function(event) {
if (event.keyCode === 97) {
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function() {
appDiv.classList.add("robot_end_left");
}, 0);
}
if (event.keyCode === 98) {
const appDiv = document.getElementById("app");
appDiv.classList.add("robot1_end_left");
}
};
</script>
</body>
</html>
but in this way, it adds all 2 classes at once.
Here is the whole code in CodeSandBox
Browsers will generally let JavaScript code like yours do a burst of DOM updates without doing anything visually. They'll wait until the script exits (like an event handler) or until something in the script requires that the browser do the visual update before it can provide an answer.
In your case, the simplest thing to do is defer the addition of the "second" class for some fractions of a second; exactly how long depends on what you want it to look like. The way you'd do that would be something like
setTimeout(() => { appDiv.classList.add("robot_end_left") }, 500);
That 500 means to wait 500 milliseconds before adding the second class.
I'm trying to make a logo with some animated gifs with transparency. I want them to play when the other stops.
I have some letters as a logo in the background, and I want the gifs to play on top of it.
I tried with a slideshow script: the problem is that the duration of each gif is different, so if I put 10s for the gif to change, then the short ones will loop till the time is up.
i also tried making a CSS animation but it didn't work either, and I don't know why.
I haven't add transparency to the background of one of the gifs I used yet.
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function() {
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');
},
10000);
});
#logo img {
width: 100%;
top: 0;
left: 0;
}
html {
background-color: black;
}
.fadein {
position: absolute;
width: 100%
}
.fadein img {
position: absolute;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="logo">
<div class="fadein">
<img src="https://media.giphy.com/media/xiqR0MRajmJHWAUp3C/giphy.gif">
<img src="https://media.giphy.com/media/27IQkS7saXLTviuGH1/giphy.gif">
</div>
<img src="https://media.giphy.com/media/1YcDQj7GctoBOIw22z/giphy.gif" alt="LOGO" />
</div>
I believe I've understod you correct, you got one logo as a background to have two different overlay effects looping in their own timeline which I've calculated to be about ~4450 to ~5500 millisecondss and ~18000 milliseconds. Using setInterval with a setTimeout should work. However, I'd suggest you do add those effects onto one single gif animation, however, you may do it by the browser, it doesn't matter unless you'd decide to look for web browser compability. This is what I've done for you, bywhat I've understod of your help request:
$(document).ready(function(){
$("div#logo img#overlayEffect").attr("src", "https://media.giphy.com/media/xiqR0MRajmJHWAUp3C/giphy.gif?" + (new Date()).getTime());
setTimeout(function(){
$("div#logo img#overlayEffect").attr("src", "https://i.giphy.com/media/27IQkS7saXLTviuGH1/giphy.gif?" + (new Date()).getTime());
}, 5500);
setInterval(function(){
$("div#logo img#overlayEffect").attr("src", "https://media.giphy.com/media/xiqR0MRajmJHWAUp3C/giphy.gif?" + (new Date()).getTime());
setTimeout(function(){
$("div#logo img#overlayEffect").attr("src", "https://i.giphy.com/media/27IQkS7saXLTviuGH1/giphy.gif?" + (new Date()).getTime());
}, 5500);
}, 24000);
});
body {
background: grey;
}
div#logo {
background: transparent url('https://media.giphy.com/media/1YcDQj7GctoBOIw22z/giphy.gif');
width: 480px;
height: 80px;
/*just for a center*/
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*these are /NOT/ required.*/
}
div#logo img#overlayEffect {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logo">
<img id="overlayEffect" />
</div>
I have a webpage that uses tubular.js script to show youtube video as a site background. There's a sentence on tubular page:
First, it assumes you have a single wrapper element under the body tag
that envelops all of your website content. It promotes that wrapper to
z-index: 99 and position: relative.
So following that, I wrote a simple html/css code:
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#logocontainer{
position: absolute;
top: 20%;
margin-top: -35px;/* half of #content height*/
left: 0;
width: 100%;
text-align:center;
}
#logo {
margin-left: auto;
margin-right: auto;
height: 75px;
}
</style>
<body>
<div id="wrapper" class="clearfix">
<div id="logocontainer">
<div id="logo">
<img src="img/logo.png"/>
</div>
</div>
</div> <!--wrapper-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<script type="text/javascript">
$(function() {
var options = {
videoId : '9JXVUP1hyxA',
start : 1
};
$('body').tubular(options);
});
</script>
</body>
</html>
but now, when I run it - I see only youtube video without my logo on top... I know the logo is there, because when I comment out the youtube script I can see it, however I don't see it when the video is present. I tried to add z-index:99 to #logo but that didn't do any magic... Can you help me with that?
EDIT:
As A. Wolff suggested below, I added to my css:
#wrapper{
z-index:99;
position: relative;
}
still though - no good results, video is still on top..
I see in their own Tubular they use this little script...
$('document').ready(function() {
var options = { videoId: 'ab0TSkLe-E0', start: 3 };
$('#wrapper').tubular(options);
// f-UGhWj1xww cool sepia hd
// 49SKbS7Xwf4 beautiful barn sepia
});
Just adding this keeps everything on top.
Use the code in this Fiddle as a sample.
Your must use z-index with position: relative/absolute.
Also your z-index in video must be less than in your blocks.
video {
position: absolute;
z-index: 1;
}
div {
position: relative;
z-index: 2;
}
I have to add to an html page an intro animation. So I need that the first thing visible when loading the page is the gif at full screen (it takes about 2 seconds), then I have to fadeout the gif and fadein the html page. Can you help me?
My webpage is contained in a div like this:
<body>
<div id="site">
<div id="menu">
...
</div>
<div id="content">
...
</div>
</div>
</body>
What is contained in "site" must appear - fading - after the gif intro has played and ended.
This is what I tried first:
<script>
$(window).ready(function() {
$('#intro').css('visibility','visible').hide().delay(3000).fadeIn(300);
$('#site').css('visibility','visible');
});
</script>
but I think it is not the right way.
the best way is to use css animations. it works without jquery and directly on the gif (no div needed)
the gif must have:
#keyframes customanim
{
0% {values;}
100% {values;}
}
#-webkit-keyframes customanim /* Safari and Chrome */
{
0% {css-values;}
100% {more-values;}
}
.animationclass {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
animation: customanim 3s;
-webkit-animation: customanim 5s;
-webkit-animation-fill-mode: forwards;
}
make sure you use "-webkit-animation-fill-mode: forwards" so the gif remains hidden after animation else the gif would return to its original state.
to play the animation again just execute this line in js:
document.getElementById('objecttobeanimated').className ='animationclass';
Link to W3C:
http://www.w3schools.com/css3/css3_animations.asp
hope i could help you
If it was me I'd put my gif in a DIV with and id on it outside of the site. Then using jQuery something like this:-
var timer = 0; //setting this up as global
$(document).ready( function () {
$("#site").hide(); // you could have the site as display:none in css instead of this line.
timer = setInterval( showSite , 2000 ) // here's your 2 seconds delay
});
function showSite() {
clearInterval(timer);
$("#myGIFdiv").fadeOut();
$("#site").fadeIn();
}
I'd suggest a longer delay, as you don't know how long your gif will take to load ... look up preloading etc to find out more about that. This is a really crude example to get you started.
Here is a solution:
JS:
$(window).load(function(){
$("#preloader-anim").fadeOut(500);$("#preloader").delay(500).fadeOut(500);
});
CSS:
.preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 99999999; }
.preloader-anim { position: absolute; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; }
HTML:
<div id="preloader" class="preloader"><div id="preloader-anim" class="preloader-anim"><img src="http://www.iec.ch/img/loading_sliders_2.gif" /></div></div>
How it works:
A div id="preloader" is showed until the page is fully loaded. Then, fades out consecutively the loader.gif, and the div id="preloader".
Note: For illustration purposes I have used the first loading gif I found. It is not recommended to use hotlinking.