Im having issue here. This works on Chrome but I cannot get any animations to work inside index.html for IE11. I get a static screen when it doesn't feel like working. Also in IE the message doesn't go away as it should. If I place the div inside Nothing shows at all in IE.
Does anyone have a good method of implementing a working animated screen inside index.html while bootstrap is loading? My css works some of the time in IE 11
My example that I have tried to use
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
<meta charset="utf-8">
<title>My App Title</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="bacicon.ico">
<script type="text/javascript"></script>
<style>
.loading {
opacity: 0;
transition: opacity 0 ease-in-out 1s;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.3);
z-index: -1;
}
/* .loading screen is visible when app is not bootstrapped yet, app-root is empty */
app-root:empty + .loading {
opacity: 1;
z-index: 100;
}
app-root:empty + .loading h1 {
position: absolute;
color: #eee;
top: 50%;
width:100%;
text-align: center;
transform: translate(0, -50%)
}
}
</style>
</head>
<body style="margin-top: 0px" >
<app-root>
</app-root>
<div class="loading">
<h1>Application is Loading<span class="one">.</span><span class="two">.</span><span class="three">.</span></h1>
</div>
</html>
my css
.one {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.0s;
animation: dot 1.3s infinite;
animation-delay: 0.0s;
}
.two {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.2s;
animation: dot 1.3s infinite;
animation-delay: 0.2s;
}
.three {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.3s;
animation: dot 1.3s infinite;
animation-delay: 0.3s;
}
You need to use this open your polyfill.ts file and find this part of code :
/**
* Required to support Web Animations `#angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera.http://caniuse.com/#feat=web-animation **/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
then remove comment before import 'web-animations-js';
and run this command npm install --save web-animations-js
Related
I am trying to recreate Tom Riddle's text animation from Harry Potter chambers of secrets (as seen on here). I currently am still trying to use css in simulating it as can be done on Adobe Ae (as seen on here). Currently, what I have done is using keyframes to simulate the fade in a loop. I have no idea on how to move forward in this process. Here is my current code:
body{
background-color: bisque;
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
font-size: 100px;
}
.center {
position: absolute;
width: 550px;
height: 250px;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -150px;
}
.tr-fade{
opacity: 0;
transition: opacity 1s ease;
animation-duration: 6s;
animation-name: tr-fade-animation;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: forward;
}
#keyframes tr-fade-animation {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="text-container">
<div class="center tr-fade">
Hi, This is Tom Riddle.
</div>
</div>
</body>
</html>
I have researched about fractal noises in css, however none seemed to use image masking for text transition effects. What approach should I use in order to get the desired effect (SVG animation maybe)? Any help on this?
I've been trying to find a solution for a while now but none seem to work.
The issue I am having happens when navigating to any and all the pages on the site- it's very annoying.
While I would expect that site images take time to load, this loading affects my navigation bar and the loading of my site's logo. For the time that it takes each page to load, my site's logo is completely absent- this causes my navigation bar to be shifted all the way up until the logo appears. This usually takes about a split second but it's also completely dependent on the user's internet connection).
How do I prevent this from happening? This causes my entire site to "bounce" when navigating, with all the content being shifted up for a brief moment while the logo is absent.
Give your image tag an absolute height attribute. This will make the browser keep the img tag the height it should be and allow the elements to load in the proper place.
You can also try tweaking a loader to have the page load only when all of the elements in the page have loaded. Something as simple as this:
<!DOCTYPE html>
<html>
<head>
<style>
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
</div>
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
</script>
</body>
</html>
With some modification, can help the UI experience!
Source: W3 Schools
Hope it helps!
I am running the following code and once the animation completes the opacity of the image changes. Till animation is going on the image looks smooth after that it changes the opacity.
please find code at following JS: https://jsfiddle.net/7fk0b788/
<!DOCTYPE html>
<html lang ="en">
<head>
<title> joe's Pizza Co.-New York's Best Pizza</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1>
Joe's Pizza
</h1>
</header>
<div>
<section id="feature">
</section>
<section id="home-text">
</section>
<section id="offers">
</section>
</div>
<footer>
</footer>
</div>
</body>
</html>
#container
{
background: url("Img/background.jpg") no-repeat center center fixed;
background-size:cover;
min-width: 100%;
min-height: 100%;
position: fixed;
top:0;
left:0;
animation: fadein 4s;
filter: opacity(50%);
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:.5;
}
}
There are a few ways you can do it:
Add forwards to the animation property as that will make sure the animation once it hits its 100%, it will persist:
animation: fadein 4s forwards;
or by adding
opacity:.5;
Using forwards
Using opacity
Change the opacity .5 to 1. It'll go smooth till the end. Your code snippet below
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
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;
When the user view the home page, it will automatically jump to another page after 5s. And I want to add in fading transition when jump to another page. Is there possible to do it using css?
This is the coding i found, but it does not have transition when going to another page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vert Residence</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta name="language" content="en" />
<meta content='width=device-width, initial-scale=1.0' name='viewport' />
<!---<meta http-equiv="refresh" content="5;URL=vert-residence.html">--->
<link rel="stylesheet" href="css/jquery.maximage.css?v=1.2" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="../lib/css/screen.css?v=1.2" type="text/css" media="screen" charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
.logo-index {
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 5s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 5s;
}
#-webkit-keyframes example {
0% {
opacity: 100;
filter: alpha(opacity=1000);
/* For IE8 and earlier */
}
100% {
opacity: 0.0;
filter: alpha(opacity=0);
/* For IE8 and earlier */
}
}
/* Standard syntax */
#keyframes example {
0% {
opacity: 100;
filter: alpha(opacity=1000);
/* For IE8 and earlier */
}
100% {
opacity: 0.0;
filter: alpha(opacity=0);
/* For IE8 and earlier */
}
}
</style>
</head>
<body>
<script>
setTimeout(function() {
window.location.href = "aboutus.html";
}, 2000);
</script>
<div class="logo-index">
<img src="img/logo-index.png">
</div>
</body>
</html>
When the user wait for 5s it will automatically go to aboutus.html
setTimeout(function() {
window.location.href = "/NewPage.aspx";
}, 2000);
.wrapper {
background-color: red;
width: 100%;
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 2s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 2s;
}
#-webkit-keyframes example {
0% {
opacity: 100;
filter: alpha(opacity=1000);
/* For IE8 and earlier */
}
100% {
opacity: 0.0;
filter: alpha(opacity=0);
/* For IE8 and earlier */
}
}
/* Standard syntax */
#keyframes example {
0% {
opacity: 100;
filter: alpha(opacity=1000);
/* For IE8 and earlier */
}
100% {
opacity: 0.0;
filter: alpha(opacity=0);
/* For IE8 and earlier */
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
<div>Home Page</div>
</div>
You will have to do some adjusting, but you can use a CSS transition. You would have to apply it to your entire page and fade out everything.
html {
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
JSFiddle Example