Our Angular (v7) app has a splash animation that basically shows a rotating wheel (CSS animation) embedded into the index.html, so it shows instantly on page load.
This works fine, however every ~4 page loads there is a slight flicker of the zoom level (I am using the latest Chrome on Windows 10), meaning the square div which holds the "splash message" starts at one size, and then drops in about 5% of it's size. It happens very fast and about a second from the moment the static HTML contents are rendered to view, and before the Angular view is rendered. And it looks like some of the rendering engine is getting loaded lazily and something goes wrong (?)
Could it be that Angular is changing zoom/translation factor on page load?
Index.html
<!doctype html>
<html lang="en" class="mitzi-page-root">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mitzi-splash-view-indicator {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-webkit-animation: fadein 2s;
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.mitzi-splash-indicator-dialog-bg {
position: absolute;
width: 15rem;
height: 12rem;
align-self: center;
border-style: solid;
border-width: .1rem;
border-radius: 1rem;
background: #FFFFFF;
border-color: #378b68;
-webkit-animation: fadein 5s;
animation: fadein 5s;
}
.mitzi-splash-indicator-loader-wrapper {
position: absolute;
left: 4.6875rem;
top: 2.2495rem;
width: 5.625rem;
height: 5.625rem;
padding-bottom: 3rem;
}
.mitzi-splash-indicator-loader {
width: 5.625rem;
height: 5.625rem;
align-self: center;
animation: mitzi-splash-indicator-spin 1s steps(8) infinite;
}
.mitzi-splash-indicator-message {
position: absolute;
top: 9.125rem;
width: 100%;
text-align: center;
height: 1rem;
line-height: 1rem;
font-family: 'Open Sans', serif;
font-size: 1rem;
font-weight: normal;
color: #2A6E52;
}
#keyframes mitzi-splash-indicator-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.mitzi-splash-indicator-spinner {
fill: #0c573c;
}
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
<link rel="shortcut icon" sizes="32x32" href="assets/img/favicon-mitzi.png" type="image/png" />
</head>
<body class="mitzi-body">
<mitzi-root>
</mitzi-root>
<div id="mitzi_app_preloader" class="mitzi-splash-view-indicator">
<div class="mitzi-splash-indicator-dialog-bg">
<div class="mitzi-splash-indicator-loader-wrapper">
<div class="mitzi-splash-indicator-loader">
<svg class="mitzi-splash-indicator-spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;">
<!-- HERE COMES SOME **STATIC** SVG GRAPHICS THAT IS BEING ROTATED BY **CSS** (AND NOT BY SVG ANIMATIONS - WHICH *WOULD* MESS THINGS UP)... -->
</svg>
</div>
</div>
<span class="mitzi-splash-indicator-message">Loading ...</span>
</div>
</div>
<div style="display: none !important" id="hidden-div-for-assets-load-on-startup">
<img src="assets/img/common/error.svg">
<img src="assets/img/status_icons/form_error.png">
<span class="pi pi-times"></span>
</div>
<title>mitzi</title>
</body>
</html>
box-sizing was set by our own code .... which triggered a minor change in the size of the div
Related
I've been asked to create a web page which has a fixed header (just a standard header bar, about 80px high, which stays in place when the page scrolls). At the top of the page is a hero image, and when it's visible, the header should have a gradient background, (black at the top, transparent at the bottom).
Once the user has scrolled on down past the hero image, the header background should change to black.
I've seen it done, so I know it's possible, but I'm just not sure how it works and I haven't been able to figure it out. Can anyone point me in the right direction?
The HTML is:
<div id="body">
<div id="header">
... header contents (basically a logo and some navigation) ...
</div>
<div id="pageContent">
<div id="heroImage">
<img src="/path/to/image" />
</div>
<div id="about">
... About ...
</div>
... more sections
</div>
and currently the header CSS is:
#header {
background: linear-gradient(to bottom, rgba(0,0,0,255) 0%, rgba(0,0,0,255) 17%, rgba(0,0,0,0) 78%, rgba(0,0,0,0) 100%);
position: fixed;
width: '100%';
z-index: 1000;
}
You would have to do this kind of stuff in JavaScript, since you can't really do this with css only.
In this snippet you can see how you can change the styling of the Header after scroling. You would need to check the Position of your Hero and if the Window is scrolled past this point, you can change the styling with css-classes.
Here is a similar question, for more information.
var navbar = document.getElementById("navbar");
var nav = document.getElementById("nav");
var placeholder = document.getElementById("navbar_placeholder");
var sticky = navbar.offsetTop;
window.onscroll = function() {myFunction()};
function myFunction() {
if (window.pageYOffset > sticky) {
navbar.classList.add("sticky");
// placeholder.classList.add("display");
nav.classList.add("shrink");
} else {
navbar.classList.remove("sticky");
// placeholder.classList.remove("display");
nav.classList.remove("shrink");
}
}
const options = {threshold: 0.5};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry)
if (entry.isIntersecting) {
entry.target.classList.add('show');
} else {
entry.target.classList.remove('show');
}
});
}, options);
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));
:root{
--background-color: #001728;
--darker-background-color: #000000;
--accent-color: #20cc5b;
--text-color: #FFFFFF;
--navbar-height: 80px;
}
html{
height: 100%;
}
body{
height: 100%;
background-color: var(--background-color);
}
nav{
height: var(--navbar-height);
background-color: red;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 4px solid var(--accent-color);
transition-property: height;
transition-duration: 0.5s;
}
.navbar {
position:absolute;
left:0;
right:0;
top:0;
}
.navbar-placeholder {
position:relative;
height:80px;
transition: height 0.5s;
}
.text1{
padding: 30px;
color: white;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 2;
}
.disappear {
opacity: 0%;
transition-duration: 0.5s;
}
.shrink {
height: 40px;
transition-property: height;
transition-duration: 0.5s;
}
.display {
display: block;
height: var(--navbar-height);
}
h1, p{
font-size: 50px;
color: white;
}
section {
display: grid;
place-items: center;
align-content: center;
min-height: 100vh;
border: 5px solid white;
}
.hidden {
opacity: 0;
transition: all 1s;
}
.show {
opacity: 1;
transition: all 1s;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WeSoDev</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="navbar_placeholder" class="navbar-placeholder">
<div id="navbar">
<nav id="nav">
<h2 id="header">header</h2>
</nav>
</div>
</div>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<script src="index.js"></script>
</body>
</html>
I have a 3 column template made with Bootstrap that I am trying to get to animate properly. I'm sure I'm missing something simple but can't figure it out and could use some feedback. I am just trying to get the left off-canvas menu to animate by sliding in. I have tried messing with each div and animating that as well but it still won't animate. I tried searching online but can't find anything that could possibly help me. I appreciate any suggestions.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/pwrpg.css">
<title>Hello, world!</title>
</head>
<body>
<header class="header-container bg-success">headeropenClose</header>
<div class="wrapper">
<section class="content">
<div class="columns">
<main class="main" id="main">Content: Flexible width
<div class="box"></div>
</main>
<aside class="sidebar-first" id="sidebar-first">Sidebar first: Fixed widthClose</aside>
<aside class="sidebar-second">Sidebar second: Fixed width</aside>
</div>
</section>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="js/pwrpg.js"></script>
</body>
</html>
CSS
/* Layout Containers */
.header-container{position: relative;height:50px;}
body{
margin: 0;
}
.wrapper{
min-height: 100vh;
background: #ccc;
display: flex;
flex-direction: column;
}
.content {
display: flex;
flex: 1;
background: #999;
color: #000;
transition: all 0.3s ease-in-out;
}
.columns{
display: flex;
flex:1;
}
.main{
flex: 1;
order: 2;
background: #eee;
transition: margin-left .5s;
padding: 20px;
}
.sidebar-first{
width: 260px;
background: #ccc;
order: 1;
transition: all .25s ease-out;
}
.sidebar-second{
width: 260px;
order: 3;
background: #ddd;
}
.sidebar-first .closebtn {
font-size: 36px;
}
#media (max-width: 991.99px) {
.sidebar-first, .sidebar-second {display:none;transition: all .25s ease-out;}
.main {
position: relative;
transition: all .25s ease-out;
}
}
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: green;
cursor: pointer;
}
JS
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("sidebar-first").style.width = "260px";
document.getElementById("sidebar-first").style.display = "block";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("sidebar-first").style.width = "260px";
document.getElementById("sidebar-first").style.display = "none";
}
Don't use "display: none;" when transitioning an element in or out. All you're doing is showing / hiding something rather than having a smooth transition between styles.
If you want to animate things, do so buy adding a CSS class onto the elements you want to transition rather than changing the styles of those elements in JS.
For example, to slide something in from the left:
#my-sidebar {
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
transition: all 0.4s ease;
}
#my-sidebar.transition-in {
opacity: 1;
pointer-events: all;
transform: translateX(0);
}
According to this link Repost or flag my own question for migration?
I'have to repost my question for a useful answer.
On hover, the doors are supposed to be open, according to the CSS. It works in Firefox, Opera, Chrome and IE but there is no effect on hover in Safari 5.1.7. Where's the problem here? The part of the CSS for this hover is the following:
$(document).ready(function() {
$("#cupboard").on("touchstart", function(e) {
$(this).addClass("hover");
e.preventDefault();
});
$("body").on("touchend", function(e) {
$("#cupboard").removeClass("hover");
});
});
html,
body {
margin: 0;
padding: 0;
background: #C2B3A0;
}
/*user-select: none;*/
/*background: url(bg.jpg);*/
#cupboard {
height: 613px;
width: 617px;
position: relative;
left: 35%;
margin-left: -112px;
top: 24px;
bottom: 31px;
perspective: 500;
background: url(bg.png);
background-position: center center;
background-size: 95%;
background-repeat: no-repeat;
background-attachment: fixed;
}
#cupboard img {
position: inherit;
height: 200px;
width: 200px;
float: left;
margin-left: 62px;
margin-top: 82px;
}
#cupboard .door#left {
zoom: .6;
position: absolute;
width: 512px;
height: 100%;
background-image: url(dl.jpg);
transition: transform 1s ease;
transform: rotateY(0);
}
#cupboard .door#right {
zoom: .6;
position: absolute;
width: 517px;
height: 100%;
background-image: url(dr.jpg);
transition: transform 1s ease;
transform: rotateY(0);
}
#cupboard .door#left {
transform-origin: top left;
left: 0;
}
#cupboard .door#right {
transform-origin: top right;
right: 0;
}
#cupboard:hover #left,
#cupboard.hover #left {
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
#cupboard:hover #right,
#cupboard.hover #right {
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
<html>
<head>
<script src="http://s.codepen.io/assets/libs/prefixfree.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div id="cupboard">
<a href="http://www.facebook.com">
<img src="f.jpeg" alt="facebook" />
</a>
<a href="http://www.twitter.com">
<img src="t.jpeg" alt="twiter" />
</a>
<a href="http://www.linkedin.com">
<img src="l.png" alt="linkedin" />
</a>
<a href="http://www.wordpress.com">
<img src="w.jpg" alt="wordpress" />
</a>
<div class="door" id="left"></div>
<div class="door" id="right"></div>
</div>
</body>
</html>
Here is the sreenshot of output page:-
Before hover :-
After hover :-
Screenshot of Safari
According to caniuse, safari needs the -webkit- prefix to work. Also you don't have any units after your perspective length.
Edit from your comment for completeness:
Also need to use -webkit-transition: all 1ms ease;
Css transition codes for each of browsers is different and you should set them for all browsers.
Please visit to css tricks site or w3school site for standard sintax of it for safari browser.
I have a disjointed rollover and I would like to add a timed ease-out (only) effect.
I made a page with just that particular issue isolated, see here:
When hovering over "overview" an over-view image shows up in a defined area and on roll-out the image disappears. All good but I now would like the image to fade-out after half a second, even if the pointer is still hovering over "overview" (not just only when the pointer is out). With other words, every time the visitor hovers over "overview" the image appears for half a second and then fades out.
I'm a newbie. CSS only would be great. I tried webkit ease-out/ease-in but couldn't really get it to show and then ease-out only.
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>raphaelzwyer</title>
<link href="css/raphaelzwyer.css" type="text/css" media="screen" title="raphaelzwyer stylesheet" rel="stylesheet" charset="utf-8"/>
<script type="text/javascript" src="js/raphaelzwyerFive.js"></script>
</head>
<body>
<div id="header">
<ul id="overviewlayer">
<li>
<a href="portfolio.html">
<div id="overviewtext">overview</div>
<div class="overview"><img src="images/overview.png" width="660" height="1284" alt="overviewlayer"/></div>
</a>
</li>
<li id="wordmark"></li>
</ul> <!-- end of overviewlayer -->
</div> <!-- end of header -->
</body>
</html>
The relevant CSS:
#header {
position: relative;
top: 36px;
left: 212px;
width: 660px;
height: 48px;}
#overviewlayer a .overview {
display:none;}
#overviewlayer a:hover .overview {
display: block;
position: absolute;
top: 116px;
left: 0px;
height: 852px;
width: 660px;
padding: 0px;
margin: 0px;
color: #000;
font-size: 11px;
background-color: #FFF;
z-index: +20;}
.overview {
position: relative;
top: 12px;
left: 0px;
height: 852px;
width: 660px;
z-index: +10;}
#overviewtext {
position: absolute;
top: 0px;
width: 100px;
height: 48px;
padding-top: 4px;
border-top-style: solid;
border-top-width: 1px;
z-index: +600;}
a {
text-decoration: none;
color: #a9a9a9;}
a:hover, a:focus {
text-decoration: none;
color: #be1f2d;}
li {
list-style-type: none;
display: inline;}
Perhaps you can use CSS3 animations for this ...
Add this line of code to { #overviewlayer a:hover .overview }
-webkit-animation: fade 1.0s ease-out forwards;
and then add the keyframes to your css.
#-webkit-keyframes fade
{
0% {opacity: 1;}
50% {opacity: 1;}
100% {opacity: 0;}
}
In this case, the image will show up immediately when you hover over 'overview' and then the image will fade out.
Since I've only added -webkit- for this example, don't forget to add the prefixes for Firefox, IE and Opera and keep in mind that this only works in modern browsers.
Hope that helps!
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 8 years ago.
I want it to be as simple as this, but I know it isn't:
img {
opacity: 0.4;
filter: alpha(opacity=40);
}
img:hover {
#thisElement {
opacity: 0.3;
filter: alpha(opacity=30);
}
opacity:1;
filter:alpha(opacity=100);
}
So when you hover over img, it changes the opacity of #thisElement to 30% and changes the opacity of the image to 100%. Is there a way to actually do this using only css?
So this is the HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="briefcase.js"></script>
<link rel="stylesheet" type="text/css" href="taskbar.css"/>
<link rel="stylesheet" type="text/css" href="briefcase.css" />
<title>Briefcase</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="mask"></div>
<div class="float">
<div id="album1">Album Title</div>
<img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
<img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
<img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>
<div class="gradientTop"></div>
<div class="gradientBottom"></div>
</body>
</html>
And this is the CSS:
body {
font: normal small/3em helvetica, sans-serif;
text-align: left;
letter-spacing: 2px;
font-size: 16px;
margin: 0;
padding: 0;
}
div.gradientTop {
position: absolute;
margin-top: 5px;
z-index: 2;
width: 206px;
height: 30px;
float: left;
background: -webkit-linear-gradient(rgba(255, 255, 255, 2), rgba(255, 255, 255, 0))
}
div.gradientBottom {
position: absolute;
margin-bottom: 5px;
z-index: 2;
width: 206px;
height: 120px;
float: left;
bottom: -210px;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
}
div.float {
border-right: 1px solid orange;
position: absolute;
z-index: 2;
margin-left: 5px;
margin-top: 5px;
float: left;
width: 200px;
}
div.mask {
position: relative;
z-index: 1;
margin-top: 5px;
float: left;
width: 206px;
height: 805px;
background-color: white;
}
img.left {
z-index: inherit;
margin-bottom: 3px;
float: left;
width: 200px;
min-height: 200px;
/* for modern browsers */
height: auto !important;
/* for modern browsers */
height: 200px;
/* for IE5.x and IE6 */
opacity: 0.4;
filter: alpha(opacity=40)
}
img.left:hover + #album1 {
opacity: .4;
}
img.left:hover {
opacity: 1.0;
}
#album1 {
z-index: 2;
width: 200px;
color: white;
text-align: center;
position: absolute;
background: orange;
top: 70px;
}
The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.
In the case of a descendent:
#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
opacity: 0.3;
}
Which will apply to elements such as:
<div id="parent_element">
<div id="child_element">Content</div>
</div>
For adjacent siblings:
#first_sibling:hover + #second_sibling {
opacity: 0.3;
}
Which works for mark-up such as:
<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div>
In both cases the latter element in the selector is the one chosen.
Given your pseudo-code example, you probably want something like:
img:hover + img {
opacity: 0.3;
color: red;
}
JS Fiddle demo.
I know you're probably looking for a pure-css way of doing what you want, but I'd suggest you use HTML+CSS+JS as the wonderful MVC structure that they are.
HTML is your Model, containing your data
CSS is your View, defining how the page should look
JS is your Controller, controlling how the model and view interact.
It's the controlling aspect that should be taken advantage of here. You want to control a view of an item on a user interaction. That's exactly what JS is meant for.
With very minimal JavaScript, you could toggle a class on and off of #thisElement when the img is hovered over. It certainly beats playing CSS selector games, although I'd understand if you're only willing to accept a pure-css answer.