Locked

logo in div & height of div disappear after 10sec?

Explorer ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

Is there a way to hide a div and logo within it?

I have a logo at the top of the screen, but after 10 seconds I want it to disappear, and the text below it move up to replace it.

I have found how to hide the logo, but I can't get the box to go to 0px and disappear!

anyway of doing this please?

1.jpg

Views

1.1K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

Are you using jQuery?  Or plain vanilla JavaScript?

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

I did some looking around.  Use the following instructions, but keep the "transition-timing-function" out of it.

https://davidwalsh.name/css-slide

Then use JavaScript to set the timer (setTimeout()) for the transition trigger.

HTH,

^ _ ^

(Or, keep the transition-timing-function in and alter the numbers to allow a ten second transition and keep it pure CSS with no JS.)

Ignore that.  I had no idea what the numbers meant.  I do, now.  They are NOT for timing.    Keep the JS in.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

WolfShade  wrote

Ignore that.  I had no idea what the numbers meant.  I do, now.  They are NOT for timing.    Keep the JS in.

Don't throw out a good idea, try it with the addition of css keyframe animations -

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

Did not realize that there was an animation-delay.  Cool.

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

pziecina  wrote

WolfShade   wrote

Ignore that.  I had no idea what the numbers meant.  I do, now.  They are NOT for timing.    Keep the JS in.

Don't throw out a good idea, try it with the addition of css keyframe animations -

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

I think the issue with using just css/keyframes alone is how to set the container to display none. You can set the opacity in a keyframe but how do you set the keyframe 'from' display: block; 'to': display: none; ????

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

The ideal method would be to fade out the logo in say the initial 5 seconds, then reduce the size of the block element, before setting the final display to none.

Dispay is an animatable property see reference list of animatable properties in -

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

pziecina  wrote

The ideal method would be to fade out the logo in say the initial 5 seconds, then reduce the size of the block element, before setting the final display to none.

Dispay is an animatable property see reference list of animatable properties in -

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Got a simple example as I can't make it work? According to what you are suggesting the 'display' from block to none should work but it doesn't.

p {
  animation-duration: 10s;
  animation-name: hide;
}

@keyframes hide {
  0% {

opacity: 1;
  }

50% {

opacity: 0;

}

100% {

height: 0;

display: none;
  }
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

You have to give the element a class, apply the reduction in size, (and opacity for any content) then finally set the display to none, on the class.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

osgood_  wrote

pziecina   wrote

The ideal method would be to fade out the logo in say the initial 5 seconds, then reduce the size of the block element, before setting the final display to none.

Dispay is an animatable property see reference list of animatable properties in -

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Got a simple example as I can't make it work? According to what you are suggesting the 'display' from block to none should work but it doesn't.

I've only just thought, (must be my age), but I've never checked if the display property actually goes to none. With such animations I always reduce the size and opacity gradually, so that the user is not presented with something that just disapears 'instantly', as doing so would be very bad animation practice.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

pziecina  wrote

I've only just thought, (must be my age), but I've never checked if the display property actually goes to none. With such animations I always reduce the size and opacity gradually, so that the user is not presented with something that just disapears 'instantly', as doing so would be very bad animation practice.

In the OPs case I dont think we are talking about a subtle animation. Css cant really do anything in terms of waiting for 10 seconds  and then performing something - it just does what is does over a period of 'animation' time - thats a big fail in terms of what css alone can do...is there a keyframes animation-delay property?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

if you follow the link in Wolfshads reply, (or the one below) css animations and keyframes has an animation delay propery -

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

pziecina  wrote

if you follow the link in Wolfshads reply, (or the one below) css animations and keyframes has an animation delay propery -

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

I found that out but it still doesnt work as you have to set the height of the animated container (which you might not know) and then it doesnt set the height of the content within to 0, see example below

I'm sure there is way of doing it but as I havent explored using keyfarmes that much especially for showing and hiding elements I cant get the combo right.

Its a big fail that css animations cant set a container to display none.

<!DOCTYPE html>

<html>

<head>

<style>

.logo {

background: red;

animation: hide 3s;

animation-fill-mode: forwards;

animation-delay: 3s;

}

@keyframes hide {

0% {

opacity: 1;

}

50% {

opacity: 0;

}

75% {

height: 100px;

}

100% {

height: 0px;

}

}

</style>

</head>

<body>

<h1 class="logo">Hello World</h1>

<div class="text">Some text here</div>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

I guess this is about as good as it gets - using overflow hidden on the container gets rid of the content when set to height 0;

<!DOCTYPE html>

<html>

<head>

<style>

.logo {

background: red;

animation: hide 3s;

animation-fill-mode: forwards;

animation-delay: 3s;

margin: 0;

padding: 0;

}

@keyframes hide {

0% {

opacity: 1;

}

50% {

opacity: 0;

}

100% {

height: 0px;

overflow: hidden;

}

}

</style>

</head>

<body>

<h1 class="logo">Hello World</h1>

<div class="text">Some text here</div>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

The solution is one of those css properties that you cannot use reliably yet, (found by the Edge team) but if you set the values in css variables, (from - to) it will work. The big problem at the moment is that Safari/iOS-Safari does not support the use of css variables inside an animation, (have not tried latest versions though, too expensive to upgrade , us pensioners don't have £1000 just for a phone).

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

pziecina  wrote

The big problem at the moment is that Safari/iOS-Safari does not support the use of css variables inside an animation, (have not tried latest versions though, too expensive to upgrade , us pensioners don't have £1000 just for a phone).

I refuse to buy one. I'm not getting mugged off.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

pziecina  wrote

The solution is one of those css properties that you cannot use reliably yet, (found by the Edge team) but if you set the values in css variables, (from - to) it will work.

I dont know after I introduced overflow: hidden; it seems to work quite smoothly but as most websites are linked to jquery I would probably still use that as its already available and no keyframe nonsense and prefixes are needed.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

osgood_  wrote

I dont know after I introduced overflow: hidden; it seems to work quite smoothly but as most websites are linked to jquery I would probably still use that as its already available and no keyframe nonsense and prefixes are needed.

That's the problem, even though most things can be done just with css now, designers and developers tend to use jQuery or js for everything that requires animations. The only usefull tools for css animations is Googles css designer, and that has not been updated for years, (I think it still only produces the webkit prefixed code) and MS's VS Pro comes with a useful tool also, but that is aimed at app creation.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

pziecina  wrote

That's the problem, even though most things can be done just with css now, designers and developers tend to use jQuery or js for everything that requires animations.

Well I guess there is a reason IF and only IF jquery is already linked to the website as it mostly is because css just cant do a lot of what jQuery can do or pure/vanilla javascript its just far easier, as Nancys line of code shows, to add it:

$('.logo').delay(10000).slideUp();

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

pziecina  wrote

I've only just thought, (must be my age), but I've never checked if the display property actually goes to none. With such animations I always reduce the size and opacity gradually, so that the user is not presented with something that just disapears 'instantly', as doing so would be very bad animation practice.

There are several things at play with that. Firstly, display properties cannot be animated. They are either on or off. The other issue is that the browser is programmed to create phantom elements - that is, when an element is being animated, it is actually out of the document flow, but not in the traditional sense. So, introducing display none in a keyframe animation will indeed hide it, but the space it occupied will not be relinquished. The process of doing what Tim wants to do, however, is really easy using keyframes and 2 animations. See my example posted in response to the original post.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

I dont  think you need 2 animations? Post 15 does it using just the one, no?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

2 animations are not required, but I did it for 2 reasons...

1. To enable the animation to "animate" or smoothly slide

2. To provide a solution for separately animating a logo DIV that might contain both an image and text.

Animating the image is actually harder (due to Chrome/Webkit lingering anomalies), though I think the CSS is still very simple and can provide a good learning experience for the user.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

Assuming your logo is in a <div> with the class of 'logo' or has a class of 'logo' itself use the setTimeout javascript function to set the logo to display none after 10 seconds, example below. You're using jQuery so you can just add it to your exsiting jQuery.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Set Time Out</title>

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

setTimeout(function(){

$('.logo').css('display', 'none');

}, 10000);

});

</script>

<style>

header {

width: 70%;

margin: 0 auto;

background-color: #f2f2f2;

}

</style>

</head>

<body>

<header>

<div class="logo">Logo goes here</div>

<div class="text">Text goes here</div>

</header>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

Since I use jQuery for most projects anyway...

Bootstrap with SVG Intro

<body>

<div id="intro">

YOUR LOGO HERE....

</div>

<script>

//show/hide intro
$(window).ready(function() {
  $('#intro').fadeIn('fast', function() {
  //wait 5 seconds and fade out
$(this).delay(5000).fadeOut(2000);
  });
});
</script>

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

jQuery SlideUp.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery SlideUp Demo</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<div id="intro">

<img src="https://dummyimage.com/200x200" alt="logo">

<em>This will slide up in 10 seconds. </em>

</div>

<hr>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam a natus ea error, sunt deserunt est magnam quo, aut voluptatem commodi doloremque dolore, sint nulla culpa dolor eveniet velit. Aliquam!</p>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script>

$(window).ready(function(){$("#intro").fadeIn("fast",function()

//delay 10 seconds

{$(this).delay(10000).slideUp(1e3)})})

</script>

</body>

</html>

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines