I created an animated header div menu that slides down on page load. I used animation-delay to delay the animation for 1 second. When the user scrolls down the header div changes colors fine but when scrolling back up the header disappears for a split second. Please help.
$(window).scroll(function() {
if ($(this).scrollTop() > 250){
$('header').addClass("sticky");
$('a').css({
color: '#fff'
});
}
else{
$('header').removeClass("sticky");
$('a').css({
color: '#151515'
});
}
});
body{
margin:0px;
}
#content{
height:500px;
width:500px;
display:block;
background-color:pink;
margin: 0 auto;
margin-top:50px;
}
header{
position: fixed;
top: -300px;
width: 100%;
height:50px;
padding-top:25px;
text-align: center;
background: red;
z-index: 1;
font-size: .8em;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
animation:theheader 1s;
-moz-animation:top theheader 1s; /* Firefox */
-webkit-animation:theheader 1s; /* Safari and Chrome */
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
header.sticky {
height:50px;
padding-top:25px;
background-color: blue;
color: #FFF;
}
#-moz-keyframes theheader
{
from {
top: -300px;
}
to {
top:0px;
}
}
<header>
MENU
</header>
<div id="content">
</div>
<div id="content">
</div>
<div id="content">
</div>
https://jsfiddle.net/qectrqg3/35/
If you're simply animating the top value, I would recommend using transition instead of animations. Transitions will ensure you don't get a flicker when changing "animation" values in the middle of a transition.
Related
Javascript/Css3 Expert,
I have my coding which display texts in sequence, however i need to remove the previous <p> text when display another <p>.
In simple words...I want to replace old displayed texts with upcoming new text and display the final text as it is.
here is the coding:
body {
background: #000;
padding-top: 10px;
}
p {
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 0;
opacity: 0;
animation: type 4s steps(60, end) forwards;
-webkit-user-select: none;
user-select: none;
}
p:nth-child(2) {
animation-delay: 1s;
}
p:nth-child(3) {
animation-delay: 2s;
}
p:nth-child(4) {
animation-delay: 3s;
}
p:nth-child(5) {
animation-delay: 4s;
}
p:nth-child(6) {
animation-delay: 5s;
margin-bottom: 25px;
}
p:nth-child(7) {
animation-delay: 6s;
}
p:nth-child(7) span:first-child {
animation-duration: 0.8s;
}
span {
animation: blink 1.8s infinite 8s;
}
p a {
color: lime;
text-decoration: none;
}
#keyframes type {
0% {
opacity: 1;
}
100% {
width: 30em;
opacity: 1;
}
}
#keyframes blink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
::selection {
background: black;
}
<p>Text first.</p>
<p>Text 2nd...</p>
<p>Text 3rd...</p>
<p>Text 4th...</p>
<p>Text 5th...</p>
<p>Text 6th...</p>
<p><span>Final/Blinking Line</span> <span>|</span>
</p>
Summary: when you execute the code..it display <p> one after another Its Ok..but the <p> should replace with one another not to display 4 lines...only last <p> blicnking line should be display in the last.
thanks
Here's a CSS version based on the posted code for some ideas:
body {
background: #000;
color: white;
padding-top: 10px;
}
.container {
position: relative; /* to host absolute child elements */
}
.temporary {
position: absolute;
width: 0px;
}
p {
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 0;
animation: type 1s steps(60, end);
-webkit-user-select: none;
user-select: none;
}
p:nth-child(2) {
animation-delay: 1s;
}
p:nth-child(3) {
animation-delay: 2s;
}
p:nth-child(4) {
animation-delay: 3s;
}
p:nth-child(5) {
animation-delay: 4s;
}
p:nth-child(6) {
animation-delay: 5s;
}
p:nth-child(7) {
animation-delay: 6s;
animation-fill-mode: forwards;
}
span {
animation: blink 1.8s infinite 8s;
}
p:nth-child(7) span:first-child {
animation-duration: 0.8s;
}
p a {
color: lime;
text-decoration: none;
}
#keyframes type {
0% {
}
30% {
width: 10em;
}
31% {
width: 30em; /* provide reading time for longer lines */
}
100% {
width: 30em;
}
}
#keyframes blink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
::selection {
background: black;
}
<h3>Demo</h3>
<div class="container">
<p class="temporary">Text first.</p>
<p class="temporary">Text 2nd...</p>
<p class="temporary">Text 3rd...</p>
<p class="temporary">Text 4th... but this is a fairly long line as well.</p>
<p class="temporary">Text 5th...</p>
<p class="temporary">Text 6th...</p>
<p class="temporary"><span>Final/Blinking Line</span> <span>|</span></p>
</div>
Changes:
Paragraphs use absolute positioning and are placed within a relatively positioned container so they occupy the same screen area. This was to prevent invisible paragraphs affecting the vertical displacement of visible ones.
The animation does not affect paragraph opacity. Animated paragraphs are specified to have zero width before and after animation. In combination with overflow: hidden, this hides paragraphs that are not being animated by default, without using opacity or display properties.
The blinking paragraph is the only one given an animation-fill-style of forwards to prevent it collapsing back to zero width when animation finishes.
To avoid multiple paragraphs being on display concurrently, the animation-delay times for paragraphs need to be not less than the animation-duration time of a single paragraph. The amended CSS rules reduce the duration to 1 second to match paragraph delay steps. But then, in order to have longer lines on display for at least 7 tenths of a second, only the first 30% of the width expansion is animated before jumping to full width. Some compromise is more or less needed to keep the animation simple, but timings and widths could always be varied according to requirements.
Blink
Simulation of CRT text terminal blinking can include a fade out effect to simulate the persistence time of the screen phosphor. Perhaps the simplest way is to provide multiple keyframes for an animation that ramp opacity up and down in accordance with graphic design.
As an example this graphic has a blink rate of 1hz, nominal duty cycle of 50% and a rapid phosphor decay of 200ms followed by a slower decay over another 300ms:
.screen {
font-family: "lucida console", "courier new", monospace;
color: #0b0;
background-color: black;
padding: 1em;
border-radius: 1em;
border: thick solid beige;
}
.fadeBlinkText {
animation-name: fade-blink;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 2s;
}
.fadeBlinkCursor {
animation-name: fade-blink;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-delay: 2s;
}
#keyframes fade-blink {
0% { opacity: 1;}
20% { opacity: 0.1;}
49.9% { opacity: 0.05;}
50% { opacity: 1;}
100% { opacity: 1;}
}
<div class=screen>
<p>Start text blinking in 2 seconds, cursor in 2.5 seconds:
<p><span class="fadeBlinkText">BLINK BLINK</span><span class="fadeBlinkCursor">|</span>
</div>
I've done some research and it doesn't seem that I can find exactly what I'm looking for. My goal is to have a navigation bar on the bottom of my JS-app and when a user clicks a certain button, it would start an animation where the navbar travels from the bottom of the app to the top of the app. Here's some edits I made to illustrate what I mean:
default position
after user presses "profile" button, for example
Not sure what JS library would help me with this or if there is a code-sample. The key here is that I dont want it to shift on any button clicked, only certain ones. For example, if the user clicks on "Library" from my example above, I want it to stay on the bottom.
Might anyone know how I can accomplish this?
EDIT: so the reason im doing this is because this is an electron app that i want some content to be local, and some content to be remote. This is why when the users presses "Library" i would want the navbar to remain stationary. However if the user presses "Profile" it would shift to the top and the "content" window would act sort of like a web-browser in that it would load a page on a remote webserver. I hope that helps. And thanks for all the info!
EDIT 2: A little off-topic, but i get this weird padding that im not sure where is coming from:
weird space
EDIT 3:
Heres the HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="renderer.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="styles.css">
<body>
<script>
function toggleNavLocation() {
//alert('clciiikkkked');
$('nav').toggleClass('top');
}
</script>
<nav>
<div id="logo_container"><img id="logo"
src="./assets/images/poscon_nav.jpg" width="100px" height="55px" /></div>
<div id="navitems">
<ul>
<li id="dashboard">DASHBOARD</li>
<li id="pilotclient">PILOT CLIENT</li>
<li id="livemap">LIVE MAP</li>
<li id="community">COMMUNITY</li>
<li id="profile" onclick="toggleNavLocation()">PROFILE</li>
<li id="training">TRAINING</li>
<li id="support">SUPPORT</li>
<li id="library">LIBRARY</li>
</ul>
</div>
</nav>
<div id="right_content">
<div id="user_pane">
<span id="username"></span>
</div>
</div>
<div id="center_content">
</div>
<div id="left_content">
</div>
</body>
</html>
CSS:
body {
font-family: "Arial", Serif;
background-color: rgb(27, 27, 27);
overflow-x: hidden;
overflow-y: hidden;
}
nav {
position: absolute;
bottom: 0;
left: 0;
width:850;
height:75px;
background: rgb(27, 27, 80);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#dashboard, #pilotclient, #livemap, #community, #profile, #training,
#support, #library, #search_img {
font-size: 11px;
color: rgb(81, 81, 81);
padding-top: 22px;
display: inline-block;
width: 75px;
height:75px;
background:rgb(27, 27, 27);
text-align:center;
}
#dashboard:hover, #pilotclient:hover, #livemap:hover, #community:hover,
#profile:hover, #training:hover, #support:hover, #library:hover {
background: #252525;
}
#logo_container {
display: inline-block;
position: absolute;
left: 10px;
bottom: 2px;
}
#navitems {
display: inline-block;
margin-left: 150px;
height: 100px;
}
#right_content {
width: 250px;
height: 575px;
position: absolute;
top: 0px;
right: 0px;
background-color: red;
}
#center_content {
width: 500px;
height: 575px;
position:absolute;
top: 0px;
right: 250px;
background-color: blue;
}
#left_content {
width: 250px;
height: 575px;
position:absolute;
top: 0px;
left: 0px;
background-color: green;
}
#user_pane {
width: 250px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background-color: green;
}
#username {
width: 200px;
height: 25px;
position: absolute;
top: 175px;
left: 20px;
text-align: center;
background-color: white;
}
You can use some JS to add a class to your nav bar to do the animation, and you can add this class when clicking on a button with specific IDs.
Below is a snippet that demonstrates this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
If you don't want it to animate, but just jump to top or bottom, then you can remove all of these lines:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
Here is a snippet demonstrating this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
These examples us some JQuery, but if you want pure JS, you should be able to port it over to Vanilla with a bit of thought put into the code I have supplied.
It seems pretty straight forward but we need to know which property did you use to position the navbar at the bottom?. Best solution would be to create two css Properties of different properties in flexbox behavior then just use JavaScript to change the nav id corresponding the properties when the profile is clicked.
You can animate the navbar to slide between 2 vertical positions with css as such:-
#keyframes animatebottom {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
Modify the "bottom" property to suit your page height and other requirements.
I want to animate the div when moving from left to right
The div is moving fine but with no animation
It is very fast
and more over i have assigned the top and right property to the div when hover but it is not happening
HTML:
<body><div></div></body>
CSS:
div
{
width:100px;
height:100px;
background:red;
transition-property: right, left;
transition-duration: 10s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:ease;
position:absolute;
}
div:hover
{
right:30px;
top:10px;
}
JS Fiddle
I need the div to be moved with ease and slowly
First you need to define right for starting position, e.g right: calc(100% - 100px);
.wrap {
width: 100%;
height: 100px;
background: orange;
}
.cube {
width:100px;
height:100px;
background:red;
right: calc(100% - 100px);
transition-property: right;
transition-duration: 10s;
-webkit-transition-property: right; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:ease;
position:absolute;
}
.wrap:hover .cube
{
right:30px;
}
<div class="wrap">
<div class="cube"></div>
</div>
Try this, it's works
div {
width:100px;
height:100px;
background:red;
transition: 1000ms;
position:absolute;
left: 0;
}
div:hover {
left: 100%;
margin-left: -100px;
}
JSFiddle http://jsfiddle.net/3SYka/287/
Replace right,left with margin-left.
div
{
width:100px;
height:100px;
background:red;
transition-property: margin-left;
transition-duration: 2s;
-webkit-transition-property: margin-left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:linear;
position:absolute;
}
div:hover
{
margin-left:80%; /* Using margin-left */
top:10px;
}
<body>
<div></div>
</body>
Did you know that we can hardware-accelerate graphics-intensive CSS features by offloading them to the GPU for better rendering performance in the browser?
Try to use it, here is an example with transform
jsfiddle
I have a div that have img with id and another div inside it
I want to hide the info div (you can see in code) on load of the page and then show it again on hover of the img - I also want the info div to slide right nicely..
Thanks in advance for helping :)
the HTML
<div class="wrapper">
<img id="logo" src="img/logo.png" alt="logo">
<div id="info">
info- blah <br>
blah & blah .<br>
email#gmail.com
</div>
</div>
The CSS
.wrapper{
float: left;
opacity: 0.4;
margin-top: -30px;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#logo {
width: 39px;
}
.wrapper:hover{
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
}
What is the jQuery I need for this?
Here's one way to do it.
I don't know if that's what you wanted, but since you're already using CSS3, you don't need jQuery for that:
.wrapper {
float: left;
opacity: 0.4;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
overflow:visible;
position:relative;
}
.wrapper:hover {
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
opacity:0;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
left:50%;
position:absolute;
top:0;
}
.wrapper:hover #info {
left:100%;
opacity:1;
}
http://jsfiddle.net/Y2B2v/
Place your .wrapper with the same image height. Place an overflow:hidden to hide text which is under.
After you must just change height in .wrapper:hover to show the text.
If you want a nice transition, you can adjust that with
.wrapper:hover{
opacity: 0.6;
height:100px;
transition: height 1;
-webkit-transition: height 1s; /* Safari */
}
like this : http://jsfiddle.net/AW9qh/2/
I have a navigation bar that I'm trying to get two links to animate in from off-page and end next to my other links when I hover over one of the links in my list.
Current navigation links:
<div class="links">
<ul>
<li>
link 1
</li>
<li>
link 2
</li>
<li>
link 3
</li>
</ul>
</div>
and the css for .links:
.links ul {
white-space: nowrap;
list-style-type: none;
position: fixed;
top: 8px;
left: 60%;
z-index: 4;
width: auto;
height: 67px;
}
.links li {
white-space: nowrap;
display: inline-block;
margin-right: 30px;
z-index: 4;
height: 40px;
}
And here's the relevant css, along with the animation that I have currently that works properly:
.extralinks {
position: fixed;
top: 8px;
left: 90%;
animation-name: slidey;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running;
/* Safari and Chrome */
-webkit-animation-name: slidey;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running;
z-index: 4;
}
#keyframes slidey {
0% {left: 90%; top: 8px;}
100% {left: 40%; top: 8px;}
}
#-webkit-keyframes slidey /* Safari and Chrome */ {
0% {left: 90%; top: 8px;}
100% {left: 40%; top: 8px;}
}
.links li:nth-child(3) {
background-color: Red;
}
markup for .extralinks
<div class="extralinks">
<ul>
<li>
link 4
</li>
<li>
link 5
</li>
</ul>
</div>
I need to make it so that when someone hovers over "link 3" the animated links slide in from the right and end next to my links. I'm not quite sure how exactly to link the animation to "link 3" in my list. Any help? I would not be opposed to using javascript/jquery, I'm just not well-versed in either.
Thank you!
I'm not exactly clear of your goals, but I made some assumptions and slapped a jsFiddle together. I used css transitions instead because I assumed it was a :hover animation and this allowed the sub menu to return to it's position.
* {
padding:0;
margin:0;
}
.links {
width:100%;
}
.links > menu {
width:100%;
text-align:center;
}
.links menu li {
display: inline-block;
position:relative;
padding:0.75em 1em;
}
.l3 .extralinks {
position:absolute;
top:2em;
left:100%;
z-index: 4;
-webkit-transition:all 1s ease-in-out 0s;
-moz-transition:all 1s ease-in-out 0s;
-o-transition:all 1s ease-in-out 0s;
-ms-transition:all 1s ease-in-out 0s;
transition:all 1s ease-in-out 0s;
}
.l3:hover .extralinks {
left:0;
}
.l3:hover .extralinks li {
display:block;
}
.links li:nth-child(3) {
background-color: Red;
}
<div class="links">
<menu>
<li>
link 1
</li>
<li>
link 2
</li>
<li class="l3">
link 3
<menu class="extralinks">
<li>
link 4
</li>
<li>
link 5
</li>
</menu>
</li>
</menu>
</div>