I have a div that is acting as a navigation bar for my webpage. The div consists of a horizontal unordered list where each list item is an image. The unordered list has a fade-in animation on load, and each list item has a hover effect where it grows in scale upon mouseover.
For some reason, whenever I load the page, either in Dreamweaver's live view screen or as a preview on the web browser, the div starts a few pixels off the position to the right, and once the fade-in animation is completed, it 'twitches' back to its proper position.
Its very frustrating because this is not complicated code. I only have the Source Code page and its CSS stylesheet loaded in the project.
This is all the HTML code related to the Navigation bar:
<div class="Nav">
<ul>
<li>
<img src="icons/filmicon.png" width="120px" height="120px" alt="Filmography"><br/>
</li>
<li>
<img src="icons/cameraicon.png" width="120px" height="120px" alt="Photography"><br/>
</li>
<li id="josh">
<img src="img/joshforsite.png" width="300px" height="300px" alt="About Me"><br/>
</li>
<li>
<img src="icons/designicon.png" width="120px" height="120px" alt="Design"><br/>
</li>
<li>
<img src="icons/brandicon.png" width="120px" height="120px" alt="Branding"><br/>
</li>
</ul>
</div>
...and this is all the CSS code related to the Navigation bar:
.Nav {
display: flex;
flex-direction: row;
justify-content: center;
list-style-type: none;
position: absolute;
width: 100%;
padding-top: 16%;
white-space: nowrap;
.Nav li {
vertical-align: middle;
display: inline-block;
padding-right: 4%;
opacity: 1;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
transition: all .3s ease-in-out;
.Nav li:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
#keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
#-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
#-webkit-keyframes fadein {from { opacity: 0; }to { opacity: 1; }}
#-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
Again, I am a beginner at HTML & CSS so I don't how much of a mess the coding is.
Here is a link to a YouTube video I uploaded showing the problem. It also shows towards the end a second issue I'm having whereby the growing hover effect is bugged. Any help with this would be appreciated.
Thank you!
Change the padding-right on .Nav li to a px based solution instead of a percentage and it should eliminate that jump left.
Also, you're missing your closing curly brackets for each block.
You are using images with alternative text. The glitching is probably caused by loading the images. Try to preload the images with javascript and it might help.
Related
How to efficiently render iframe durig hover as shown here
so far i have this as example
HTML: <a class="iframe-link" href="https://saheed.codes/uses">Home Page<iframe src="https://saheed.codes/" loading="lazy" style={{width: "100%", height: "600px", border: "0px none"}}></iframe></a>
.
css:
.iframe-link iframe {
display: none;
}
.iframe-link:hover iframe {
display: block;
}
I am working with react, and tailwind for styling and would appreciate answers in that direction.
Thanks!
If you want to avoid using a wrapper for it, you could use opacity directly on the iframe. You would already have a reserved space for it and you wouldn't have to use a wrapper. It depends a bit on your use case, your solution is a valid alternative.
iframe {
opacity: 0;
transition: opacity 0.5s linear;
}
iframe:hover {
opacity: 1;
}
Ended Up doing it this way
.iframe-link iframe {
display: none;
}
.iframe-link:hover iframe {
-webkit-animation: slow 2s;
-moz-animation: slow 2s;
-ms-animation: slow 2s;
-o-animation: slow 2s;
animation: slow 2s;
display: block;
/* opacity: 1; */
}
#keyframes slow {
from { opacity: 0; }
to { opacity: 1; }
}
I am currently working on an eportfolio to showcase some of my projects for scholarships I will be applying to in September. I have the site perfect except for an image that doesn't seem to be sizing correctly when on mobile. Can anyone offer me some assistance? See relevant code and screenshots below:
HTML
<figure class="about-me__img--container">
<img src="./assets/undraw_Online_cv_re_gn0a.svg" class="about.me__img" alt="">
</figure>
CSS
.about-me__img--container {
flex: 1;
display: flex;
align-items: center;
margin-top: 48px;
animation: fade-in 1200ms 800ms backwards;
}
.about-me__img {
width: 100%;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Desktop Version
Mobile version
I have an animation and I have applied it to one of the html element just fine, but then when I applied the same animation on hover to another element(img) it just keep on flickering.
My CSS
.logo-box {
position: absolute;
top: 40px;
left: 40px;
}
.logo {
height: 35px;
}
.logo-box:hover {
animation: moveInRight 1s ease-in;
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
80% {
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.logo-box is absolute to the .header class
My HTML body
<body>
<header class="header">
<div class="logo-box">
<img class="logo" src="img/logo-white.png" alt="logo" />
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">is where life happends</span>
</h1>
</div>
</header>
</body>
Can anybody help me out fixing this...
Add a delay to the start of the animation.
.logo-box:hover {
animation: moveInRight 1s ease-in 0.5s;
/*the 0.5s is the delay*/
}
Explanation if you want to know whats going on:
This is a well known problem that is actually related to UX. The flicker problem is because of the opacity. As soon as a :hover occurs (event triggered) the opacity goes to zero. Now as you take your pointer to the image, multiple hover events are triggered due to micro movements of pointer. One hover event ends and second is triggered. CSS stops animating as soon as hover is ended and opacity gets to 100% and the second hover event causes it to go to 0 right away which is the flicker. If you add some delay then the mouse would get stable and then the animation will be played.
CSS, yet, isn't offering any way to complete the animation once hover is triggered i.e. no matter if the pointer is no more on the element, animation must be completed.
I'm building a small website and would like to get the text (and an image when I add one) to fade in when someone accesses the website?
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
background-color: lightgrey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
<style>
p.one {
border: 1px lightgrey;
background-color: lightgrey;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 0px;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Our Routes</li>
<li>Contact</li>
<li>About</li>
</ul>
<img class="displayed" src="E:\Users\PC\Documents\Image" alt="...">
<h1 align="center"> HOME </h1>
<p class="one" , align="center"> Text Goes here
</p>
</body>
</html>
http://codepen.io/JTBennett/pen/GorVRL [your site w/ fade and motion]
http://codepen.io/JTBennett/pen/BjpXRo [example of the following instructions]
Here's an example. The HTML requires a div to be wrapped around the whole of the body content if you want it to fade in all at once. Look for this:
<div class="wrapper fade-in">
There's a lot of stuff you can do with CSS, I've been using it for years and I still learn something new every once in a while.
All the animation commands will appear in your CSS like so:
#keyframes fadeIn
to {
opacity: 1; }
Then your divs are going to have a class that calls the animation (#keyframes):
.fade-in {
animation: fadeIn 1.0s ease forwards;
[other div properties can be included here]
}
The HTML will look like this:
<div class="fade-in">
[content]
</div>
Finally, you'll need to make sure you include the vendor codes to make it compatible with all browsers [which adds a fair amount of code, which is why jQuery can be a better option for this stuff]:
#keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
The vendor codes will have to be duplicated again in your div class in the CSS:
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
The effect can be achieved with jQuery much quicker, as you can see in one of the other answers here.
After you've learned to do it by hand, I suggest playing around with this CSS3 animation generator if you want to save a bit of time:
http://cssanimate.com/
Just make sure you understand it first though.
Lastly, this is an example of jQuery performing similar functions (though using SVGs instead of divs this time, same process though):
http://codepen.io/JTBennett/pen/YwpBaQ
I don't know what element you have but you can do a few things.
If you are using javascript, or jquery you can make an element fade in easily.
Jquery:
$(document).ready(function(){
$('.myItemClass').fadeIn();
});
You can also do it with just CSS
CSS:
/* The animation code */
#keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
.myClass {
animation-name: example;
animation-duration: 1s;
}
You can fade in elements when the document loads by loading the page with the elements hidden (opacity : 0;) in CSS. Then on document ready you can remove the class, so long as it has a transition for that css property—you'll have an effect.
CSS
div {
transition: opacity 2s;
opacity: 1;
}
.hidden {
opacity: 0;
}
JS
$(document).ready(function(){
$('.hidden').removeClass('hidden');
});
It is very simple don't need even jqyery, pure CSS and pure Javascript.
CSS
body {
opacity:0;
transition: 300ms opacity;
}
Javascript
function pageLoaded() {
document.querySelector("body").style.opacity = 1;
}
window.onload = pageLoaded;
I have a div I've animated on hover. However when I am not hovering the div won't disappear
This is what the entire thing looks like in action: http://jsfiddle.net/Vbxtc/
This is the html:
<nav>
<div id="controls">
<button id="playButton">Play</button>
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<button id="vol" onclick="level()">Vol</button>
<button id="mute">Mute</button>
<button id="full" onclick="toggleFullScreen()">Full</button>
</div>
<div id="playlist" class="animated fadeInRight">
<div>cats</div>
<div>cats</div>
<div>cats</div>
</div>
</nav>
This is the CSS i've made:
#playlist{
position:absolute;
display:block;
border:1px solid red;
height: 82%;
width: 25%;
top: 20px;
right: 0px;
z-index: 2;
float:right;
padding: 0px;
margin: 0px;
color:white;
background-color:#999999;
opacity: 0;
}
#playlist:hover {
opacity: 1;
}
This is the animation im trying
.animated:hover {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
-moz-animation-name: fadeInRight;
-o-animation-name: fadeInRight;
animation-name: fadeInRight;
}
#-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
}
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
I noticed that when you time the mouse over exactly right (hover for about 1 second and move mouse up top), it DOES fade out nicely.
The other thing is, if you add the class fadeOutRight as follows:
<div id="playlist" class="animated fadeInRight fadeOutRight">
It fades out too quickly.
I know I didn't help much but the answer lies in the timing.
Also, if you had the fadeOutRight class on, for example, the sidebar, it works nicely!
<aside id="sidebar" class="fadeOutRight">
Perhaps, put the class of fadeOutRight on everything EXCEPT the fadeInRight div.
It's not a good idea to play with an element position in the hover state.
Even if you get to program it right (that is not easy), most of the time the user won't understand what's happening.
You can get flickering scenarios where, without the user moving the cursor, your div leaves the cursor position, canceling the hover, the div re-entering the cursor, the hover triggering , and so on.
I would recomend to trigger the hover on another div that covers the full area where the moving div will be.