I'm trying to create a basic splashscreen for a website but for some reason only 1 line of text is showing up on the splashscreen, and not the remaining text within the <p> tag. Here is a codepen of the problem:
Here is a codepen of the problem.
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('display-none');
}, 5000);
})
.splash {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index: 9999;
color: white;
text-align: center;
line-height: 90vh;
}
.splash.display-none {
position: fixed;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index: 9999;
color: white;
text-align: center;
line-height: 90vh;
transition: 0.5s;
}
#keyframes fadeIn {
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
animation: fadeIn 1s ease-in forwards;
}
<html>
<head>
<div class="splash">
<p class="fade-in">Hi there! This splashscreen is broken!<br> I can't see this line!<br> I can't see this line either!<br> This line is also missing too!</p>
</div>
<p>hello world</p>
I'm sure it's a relatively simple fix, just a bit stumped on this one.
This is because of the huge amount of line-height that you have given to your <p> tag so each line will occupy 90vh so it will be out of the screen. If you want your text to have appeared in the middle of the element with class splash you can use flexbox to achieve this instead of line-height.
All you have to do is to set the element with splash class display: flex; and then with justify-content and align-items attribute position it to center horizontally and vertically.
So your final code should be something like this:
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('display-none');
}, 5000);
})
.splash {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index: 9999;
color: white;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.splash.display-none {
position: fixed;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index: 9999;
color: white;
text-align: center;
line-height: 90vh;
transition: 0.5s;
}
#keyframes fadeIn {
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
animation: fadeIn 1s ease-in forwards;
}
<div class="splash">
<p class="fade-in">Hi there! This splashscreen is broken!<br> I can't see this line!<br> I can't see this line either!<br> This line is also missing too!</p>
</div>
<p>hello world</p>
Remove the line for line-height: 90vh; in your .splash css
Related
So I made a loading screen in HTML and CSS, but I am very new to JavaScript and I would like to make the loading screen vanish when the page is loaded. How do I do it in JS? Here is my code:
.loader {
position: fixed;
display: flex;
align-items: center;
align-self: center;
justify-content: center;
background-color: #02171C;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.dissaper {
animation: fadeOut 1s forwards;
}
.ring {
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
animation: ring 1.5s linear infinite;
}
.ring:before {
position: absolute;
content: '';
top: 0;
left: 0;
height: 100%;
width: 100%;
box-shadow: 0 0 10px #6497373b;
border-radius: 50%;
}
span {
color: #649737;
font-size: 20px;
letter-spacing: 1px;
line-height: 200px;
}
<div class="loader">
<div class="ring"></div>
<span class="isLoaded">LOADING...</span>
</div>
Using your CSS and HTML here is an example of how to hide the .loader div once the window has fully loaded using JS.
In my example i've changed .loader div class to #loader div ID for easier javascript.
I've also used transition CSS instead of animation CSS on the #loader div, which runs when .disappear class is added.
Here is jsfiddle version to... https://jsfiddle.net/joshmoto/z2dqe8jp/3/
See comments in JS and snippet console logs so you know JS timings with transition CSS, and when the #loader is removed.
// our loader div by id (not class)
let loader = document.getElementById('loader');
// on window loaded
window.onload = (event) => {
console.log('window loaded, and wait 3 secs for example #loader div to fade out');
// for demo example 3 second delay for page load
setTimeout(function() {
// add .disappear class to #loader div
loader.classList.add("disappear");
console.log('.disappear class added to #loader element');
// after 1 second css transition opacity .disappear has completed
// plus an extra 250 milliseconds so not to remove #loader before transition is complete
setTimeout(function() {
// remove #loader element from DOM entirely
loader.remove();
console.log('#loader div element removed from DOM');
// 1 second + 250 milliseconds delay
}, 1250);
// 3 seconds delay
}, 3000);
};
#loader {
position: fixed;
display: flex;
align-items: center;
align-self: center;
justify-content: center;
background-color: #02171C;
top: 0;
left: 0;
height: 100%;
width: 100%;
/* 1 second opacity ease transition */
transition: opacity 1s ease;
}
.disappear {
opacity: 0;
pointer-events: none;
}
.ring {
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
animation: ring 1.5s linear infinite;
}
.ring:before {
position: absolute;
content: '';
top: 0;
left: 0;
height: 100%;
width: 100%;
box-shadow: 0 0 10px #6497373b;
border-radius: 50%;
}
span {
color: #649737;
font-size: 20px;
letter-spacing: 1px;
line-height: 200px;
}
<div id="loader">
<div class="ring"></div>
<span class="isLoaded">LOADING...</span>
</div>
you can check if the document loading is complete then:
1- remove the element. or
2- hide the element.
I added 1 second but you can remove it if you want.
comment remove then uncomment hide to see how it works then decide which one is suitable for you.
// remove
if (document.readyState = "complete") {
setTimeout(() => {
document.getElementById("loader").remove();
}, 1000);
}
// OR
// hide
if (document.readyState = "complete") {
setTimeout(() => {
// document.getElementById("loader").style.display = "none";
}, 1000);
}
.loader {
position: fixed;
display: flex;
align-items: center;
align-self: center;
justify-content: center;
background-color: #02171C;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.dissaper {
animation: fadeOut 1s forwards;
}
.ring {
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
animation: ring 1.5s linear infinite;
}
.ring:before {
position: absolute;
content: '';
top: 0;
left: 0;
height: 100%;
width: 100%;
box-shadow: 0 0 10px #6497373b;
border-radius: 50%;
}
span {
color: #649737;
font-size: 20px;
letter-spacing: 1px;
line-height: 200px;
}
<div class="loader" id="loader">
<div class="ring"></div>
<span class="isLoaded">LOADING...</span>
</div>
I have this cool html css card below, where I now need to have that if you click it, it shows a lightbox with multiple photos. I have tried multiple things before, but the problem is everything gets messed up when you do light box.
this is the code for the picture card alone. and this is the link to see it with me trying the light box. https://codepen.io/gianlucaas/pen/rNzBKVz
what am i doing wrong?
function myFunction() {
var modelName = "Angela"
var height = 'My name is Angela'
var myImage = "https://images.unsplash.com/photo-1633594708103-e6e41891b679?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1040&q=80"
document.getElementById("myText").innerHTML = modelName;
document.getElementById("myHeight").innerHTML = height;
document.getElementById("myImg").src = myImage;
}
.card-content {
position: relative;
overflow: hidden;
}
.card-content-details {
padding: 10px;
}
.card-content-details {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 15px;
}
.card-content-details,
.card-content-overlay {
box-sizing: border-box;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.card-content-details {
transform: translateX(1000px);
transition-duration: 800ms;
z-index: 1;
}
.card-content-overlay {
background-color: #02010100;
transition-duration: 800ms;
transition-property: transform, opacity, background-color;
transform: translateX(-1000px);
z-index: 1;
}
.card-content-image {
transition-duration: 800ms;
width: 100%;
max-width: 100%;
}
.card-content:hover .card-content-image {
transform: scale(1.1);
}
.card-content:hover .card-content-overlay,
.card-content:hover .card-content-details {
transform: translateY(0) translateX(0);
opacity: 1;
}
.card-content:hover .card-content-overlay {
background-color: transparent;
background-image: linear-gradient(200deg, #00000000 81%, #000000ba 14%);
}
.card-content-title {
color: #fff;
font-size: 20px;
text-transform: uppercase;
margin: 0 0 10px;
}
.card-content-text {
color: #fff;
font-size: 16px;
margin: 0;
}
<body onload="myFunction()">
<div class="card-content">
<a href="#" target="_blank">
<div class="card-content-overlay"></div>
<img class="card-content-image" src="" id="myImg">
<div class="card-content-details">
<h4 class="card-content-title" id="myText"></h4>
<p class="card-content-text" id="myHeight"></p>
</div>
</a>
</div>
</body>
You can begin by creating a html container on your file of your lightbox (which will be hidden) with inside the buttons (prev, next, close) and the (empty for now).
When you launch the lightbox (with a js function that you'll have to create) you'll be display:block this html container (position: fixed; in CSS and with the highest z-index)
There are similar questions like this and this, but don't address this situation.
The goal is to slide a menu onto the screen with CSS translation when its parent is shown. However, showing the parent then applying the CSS class to trigger the translation happens instantly instead of over time. Effectively, there's no animation.
JavaScript could be used to slide the child element onto the screen, but the goal is to keep as much of the animation logic in CSS.
Setting the opacity to 0 doesn't work because we need the menu and its parent to not take any space or be part of the layout.
Codepen: https://codepen.io/Crashalot/pen/YzXmjYj
function toggleSidebar() {
$("#sidebar").toggleClass("show");
}
$("#button").on("click", function() {
toggleSidebar();
});
body {
margin: 0;
padding: 0;
}
#button {
position: fixed;
top: 0;
left: 200px;
width: 150px;
height: 50px;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
z-index: 8;
cursor: pointer;
}
#sidebar {
display: none;
}
#sidebar.show {
display: block;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: red;
z-index: -1;
}
.menuBox {
width: 200px;
height: 100vh;
background: blue;
transition: 0.3s ease-in-out;
transform: translate(-100%);
}
#sidebar.show .menuBox {
transform: translate(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
<div class="overlay"></div>
<div class="menuBox"></div>
</div>
<div id="button">CLICK ME</div>
You can't animate display: none; Set opacity to 0 and then 1 on toggle class. Here's the CodePen for you. ;)
I added a button for the toggle event. Let me know if you need any more help!
enter link description here
$(".btn").on("click", toggleSidebar);
function toggleSidebar() {
$("#sidebar").toggleClass("show");
}
body {
margin: 0;
padding: 0;
}
#sidebar {
opacity: 0;
transition: all 300ms ease-in-out;
}
#sidebar.show {
display: block;
opacity: 1;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: red;
z-index: -1;
}
.menuBox {
width: 200px;
height: 100vh;
background: blue;
transition: 300ms ease-in-out;
-webkit-transform: translate(-100%);
}
#sidebar.show .menuBox {
-webkit-transform: translate(0);
}
.btn {
position: absolute;
top: 10px;
left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
<div class="overlay"></div>
<div class="menuBox"></div>
</div>
<button class="btn">Click</button>
You need to consider an animation. The animation will run automatically when the element appear on the screen
function toggleSidebar() {
$("#sidebar").toggleClass("show");
}
$("#button").on("click", function() {
toggleSidebar();
});
body {
margin: 0;
padding: 0;
}
#button {
position: fixed;
top: 0;
left: 200px;
width: 150px;
height: 50px;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
z-index: 8;
cursor: pointer;
}
#sidebar {
display: none;
}
#sidebar.show {
display: block;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: red;
z-index: -1;
}
.menuBox {
width: 200px;
height: 100vh;
background: blue;
transform: translate(-100%);
animation: show 0.3s ease-in-out forwards;
}
#keyframes show {
to {
transform: translate(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
<div class="overlay"></div>
<div class="menuBox"></div>
</div>
<div id="button">CLICK ME</div>
updating display to a value other than none will start all animations applied to the element by the animation-name property, as well as all animations applied to descendants with display other than none. ref
I think you should define the action for your function called. When load page or on click like below:
$(document).ready(function () {
$('#sidebar').on('click', function () {
$(this).toggleClass('show');
});
});
I want the contents of a div to slide down from the top. All of the methods I have tried seem to 'reveal' the contents which is almost static. I want to slide down from off the edge of the screen and push the content too. How would I do this? Jsfiddle here
html
<div id="dolphin">
<div id="lizard"><img src="http://www.beardeddragon.co/image/cache/data/blackhat-500x500.jpg"></div>
</div>
<div id="content"></div>
css
#lizard {
padding:50px;
display:none;
}
#dolphin {
position: fixed;
width: 100%;
background-color: green;
}
#content {
height: 2000px;
}
js
$(document).ready(function(){
$("#dolphin").click(function(){
$("#lizard").stop().slideToggle("fast");
});
});
You can move things with negative margins to create a slide effect instead of a reveal effect.
This is a very rough example but you can see how it's originally hidden with margin-top: -100%; and revealed by setting margin-top to 0;
$(".slide-button").click(function(){
$(".lizard").toggleClass('slideit');
});
html, body {margin: 0; padding: 0;}
div {
text-align: center;
}
.slide-button {
position: fixed;
top: 0; right: 0; left: 0;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
height: 20px;
background-color: green;
cursor: pointer;
}
.lizard {
width: 100%;
padding-top: 20px;
overflow: hidden;
background-color: green;
transition: all 0.5s ease;
}
.lizard img {
margin-top: -100%;
transition: all 0.5s ease;
opacity: 0;
}
.lizard.slideit img {
margin-top: 10px;
opacity: 1;
}
.content {
height: 1000px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-button">slide it</div>
<div class="lizard">
<img src="http://www.beardeddragon.co/image/cache/data/blackhat-500x500.jpg">
</div>
<div class="content"></div>
fiddle
https://jsfiddle.net/Hastig/qjfgsrL0/1/
I am working with a navigation bar that has slides a menu from right to left.
With my code, when the user picture is being clicked, it will show the menu.
So when it is loaded, menu is hidden and when it is clicked will be showed. I used to add class hidden and show to toggle to menu.
$(document).ready(function(){
$(".img-profile").click(function(){
$(".menu-wrapper").addClass("show");
});
$(".menu-bg").click(function(){
$(".menu-wrapper").removeClass("show");
});
});
CSS
.show{
display: inline-block !important;
}
.hidden{
display: none;
}
The problem is it's not animating even if I added the transition: all 0.2s linear 0s and the transform from 250px to 0
.menu-wrapper > .login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
right: 0;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
transform: translateX(250px);
}
Also, I want to animate it on menu-close from right to left.
My full code is at JSFIDDLE
Changing the display CSS attribute does not trigger animations. Use the visibility attribute instead. This one triggers animations.
If you have good reason to use display (which is completely possible), you'll need to set the display attribute first to show the element, but keep the visibility on hidden. Set the visibility: visible attribute right after and the animation will be triggered.
Edit: I had a look at your fiddle. Don't use the .hidden class, because bootstrap sets display:none on .hidden elements. Just use the .show class alone, putting visibility:visible in the show class, and setting visibility:hidden on the .menu-wrapper element. Remove all the display:none lines in your CSS and you'll be fine.
Try to do it with this trick.
<header class="header">
<div class="container">
<a class="logo" href="/"></a>
<div class="login">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<div class="login-menu">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<p>Mark Zuckerberg</p>
<button type="button" class="btn btn-danger btn-block">Logout</button>
</div>
<div class="menu-bg"></div>
</div>
</div>
.header{
width: 100%;
height: 50px;
background: #fff;
border-bottom: 2px solid #ececec;
}
.header > .container{
height: 100%;
position: relative;
}
.logo {
background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
display: inline-block;
width: 23rem;
height: 100%;
}
.select-lang {
display: inline-block;
position: absolute;
top: 15px;
}
.login{
position: absolute;
right: 0;
top: 0;
}
.img-profile{
background: no-repeat scroll center center / contain;
position: relative;
top: 3px;
border-radius: 40px;
width: 40px;
height: 40px;
display: block;
margin: auto;
}
.login > .menu-wrapper{
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
height: 100%;
width: 100%;
}
.login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
top: 40px;
right: -250px;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
}
.show{
right: 0;
}
.hidden{
right: -250px;
}
.login-menu > .img-profile {
border-radius: 70px;
height: 70px;
width: 70px;
}
.login-menu > p {
font-weight: bold;
margin: 10px 0 20px;
}
.menu-wrapper > .menu-bg{
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
$(document).ready(function(){
$(".img-profile").click(function(){
$(".login-menu").addClass("show");
});
$(".img-profile").click(function(){
$("body").removeClass("show");
});
});
Take a look here https://jsfiddle.net/SkiWether/KFmLv/
this is working for me
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});