I've commented out/deleted the following code for the header-bg's zoom animation, but it's still running on my site and appears in console:
/*
#keyframes bg-zoom {
0% {
transform: scale(1);
-webkit-transform: scale(1);
}
100% {
transform: scale(1.3);
-webkit-transform: scale(1.3);
}
}
*/
.home-header-wrapper-bg {
content: "";
background: #fff url("...") center center no-repeat fixed;
background-size: cover;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 0;
/*
animation: bg-zoom 30s infinite alternate ease-in-out;
-webkit-animation: bg-zoom 30s infinite alternate ease-in-out;
*/
}
I've also cleared my cache. Demo: here
In your HTML file not css file, find this code and remove it
var x;
$(window).on('scroll', function() {
x = $(window).scrollTop();
$('.home-header-wrapper-bg').css('background-size', 100 + parseInt(x / 1, 0) + '% ');
});
Also remove this one too:
$(window).scroll(function(){
$(".home-header-container").css("opacity", 1 - $(window).scrollTop() / 500);
});
It looks like it's probably some javascript that is causing that. When I inspect the "home-header-wrapper-bg" and begin scrolling, it starts to change the opacity and background-size inline and not in a stylesheet.
Related
I'm creating my test webpage and I ran into a problem, there are quite a few "answers" on my issue but none was I able to implement in my code. I know I have to use javascript but I was not able to get it working.
So, I need to run css animation of movement on chosen picture, when that picture is visible on screen when I scroll down to it. Basically like on this page: https://www.photoblog.com/
So I have this code in the html as for the picture:
<img class="movepic" src="pictures/test.jpg">
And then there is this simple code for the CSS movement:
.movepic {
position: relative;
animation-name: move;
animation-duration: 3s;
visibility: visible;
animation-fill-mode: forwards;
z-index:10;
}
#keyframes move {
0% { right:0px; top:150px;}
100% {right:700px; top:150px;}
}
Is there a way to make it work so I do not need to completely redo this? Or if so, could some please give me a advice how to do it maybe with code ilustration.
Thanks a lot
I use this code for this effect:
HTML:
<img class="movepic" src="pictures/test.jpg">
CSS:
.movepic {
opacity: 0;
margin: 25px 0 0;
color: white;
padding: 10px;
}
.FadeIn {
-webkit-animation: slideIn 0.8s ease 0.3s forwards;
animation: slideIn 0.8s ease 0.3s forwards;
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
JQuery:
var $fade = $(".movepic"); //Calling the class in HTML
$(window).scroll(function () { //Using the scroll global variable
$fade.each(function () {
fadeMiddle = $(this).offset().top + (0.4 *$(this).height());
windowBottom = $(window).scrollTop() + $(window).height();
if (fadeMiddle < windowBottom) {
$(this).addClass("FadeIn");
}
});
});
/* On Load: Trigger Scroll Once*/
$(window).scroll();
Remove the animation-name from your style rule:
.movepic {
position: relative;
animation-duration: 3s;
animation-fill-mode: forwards
visibility: visible;
z-index:10;
}
and add this class to stylesheet:
.animation-class {
animation-name: move
}
Now add the jQuery:
var has_fired;
$("html").on("scroll", function () {
if (!has_fired && $(this).scrollTop() >= $("#imgContainer").offset().top) {
$("#imgContainer").addClass("animation-class");
has_fired = true; // use this if only want fired once
}
});
The animation will now run. BTW I would add an ID (imgContainer) to your container of interest and use this as selector for matching because unless .movepic is a unique class, this function will fire for any container with the .movepic class (if .movepic is the selector).
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'm doing an animation that gets triggered with adding a class to a element. Now on removal of the class I want the animation to go the other way, I figured out to how to reverse the animation, the problem is onload that it triggers it. What can I do to prevent it, what can I change, what am I missing?
the full html/css/js are in the fiddle
here are the good parts,
#keyframes expand {
20% {
opacity: 0;
width: 5rem;
}
70%, 100% {
opacity: 1;
transform: translate(0, 0);
width: 100%;
}
}
#keyframes contract {
0% {
transform: translate(0, 0);
width: 100%;
}
100% {
transform: translate(0, -6rem);
width: 5rem;
}
}
[data-am-button~="buy"] {
margin-bottom: .5rem;
transform: translate(0, -6rem);
width: 5rem;
animation: contract 500ms forwards;
span {
display: none;
}
.is-expanded & {
animation: expand 500ms forwards;
}
}
So instead of putting the animation on the button by default. Add the animation to a .is-contracted class.
Then toggle between these 2 classes when clicking the button. This means that nothing is animated on the page load. Only the button clicking.
CSS changes:
[data-am-button~="buy"] {
margin-bottom: .5rem;
transform: translate(0, -6rem);
width: 5rem;
//animation: contract 500ms forwards; <-- Removed this
span {
display: none;
}
.is-expanded & {
animation: expand 500ms forwards;
}
.is-contracted & {
animation: contract 500ms forwards;// <-- added it to this new class
}
JS changes:
$('.js-expander').on('click', function() {
var $this = $(this);
var $parent = $this.parents('.product-info');
if ( $parent.hasClass('is-expanded') ){
$parent.removeClass('is-expanded')
$parent.addClass('is-contracted')
} else {
$parent.addClass('is-expanded')
$parent.removeClass('is-contracted')
}
});
Here's a fiddle : https://jsfiddle.net/BradChelly/Lugnmmpe/7/
Everything works good on Firefox but chrome shows the animated text blurry. I did everything like -webkit-font-smoothing: subpixel-antialiased; , -webkit-transform: translate3d(0,0,0); and everything mentioned here before:
Webkit-based blurry/distorted text post-animation via translate3d
but the problem still exist.
I made very simple example to show you how it looks like. How can I fix this problem?
var text = 1;
function next() {
var next = (text == 2) ? 1 : 2;
document.getElementById('text' + text).className = 'out';
document.getElementById('text' + next).className = 'in';
text = next;
}
body {
padding: 0;
margin: 0;
font-family: tahoma;
font-size: 8pt;
color: black;
}
div {
height: 30px;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
div div {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.in {
-webkit-animation: comein 1s 1;
-moz-animation: comein 1s 1;
animation: comein 1s 1;
animation-fill-mode: both;
}
#keyframes comein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.out {
-webkit-animation: goout 1s 1;
-moz-animation: goout 1s 1;
animation: goout 1s 1;
animation-fill-mode: both;
}
#keyframes goout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div>
<div class="in" id="text1">Hello! I'm Test Text. I'm Test Text jr Father!</div>
<div id="text2">Hi, I'm test text jr. I'm sharp and beautiful by nature but when I came in, Chrome made me blurry and I'm bad, I'm bad! ... Who's bad :)</div>
</div>
<button onclick="next();">Next</button>
You can also see the example at CodePen
Update 2020-10: this issue appears to be resolved in Chrome/Chromium 85+ in my testing. But it is not entirely fixed. You may still encounter blur in places.
Check this comment in the bug report that outlines continuing work to improve how Chrome handles this: https://bugs.chromium.org/p/chromium/issues/detail?id=521364#c103
This misrendering often appears.
You can try transform: translate3d(0, 0, 0) or transform: translateZ(0) und the element with the animation, but it doesnt works always.
-webkit-font-smoothing: antialised is another option but that never worked for me.
When the animation is being moved using percentage the text will become blurred due to the the browser guessing its exact location during the repaint phases. Using a different unit to move in such as 'px' will allow the browser to be specific during it's repaint phase and allow the text to be clean and smooth.
After reading the below I realized that this same concept may also have a factor when it comes to the blurry effect on the text.
Percentages are relative values, which means they have to depend on some other value in order to produce result. So every time you assign a percentage value it has to get it's relative value to perform a calculation. When doing a translation with pixels you only have to change the translation values, but with percentages you have to get element's dimensions first and then apply the translation. And that has to be done for every animation frame.
You can read more about this here: https://stackoverflow.com/a/50416761/4518455
In my testings this seems to fix the issue fully for all of my animations in my application. (10+)
The best solution for text blurring when adding an animation is add "z-index: 1;" on the style where animation is placed.
.in {
-webkit-animation: comein 0.5s 1;
-moz-animation: comein 0.5s 1;
animation: comein 0.5s 1;
animation-fill-mode: both;
z-index: 1;
}
you can check this link its animation time issue pls check down link
var text = 1;
function next() {
var next = (text == 2) ? 1 : 2;
document.getElementById('text' + text).className = 'out';
document.getElementById('text' + next).className = 'in';
text = next;
}
body {
padding: 0;
margin: 0;
font-family: tahoma;
font-size: 8pt;
color: black;
}
div {
height: 30px;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
div div {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.in {
-webkit-animation: comein 0.5s 1;
-moz-animation: comein 0.5s 1;
animation: comein 0.5s 1;
animation-fill-mode: both;
}
#keyframes comein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.out {
-webkit-animation: goout 0.5s 1;
-moz-animation: goout 0.5s 1;
animation: goout 0.5s 1;
animation-fill-mode: both;
}
#keyframes goout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div>
<div class="in" id="text1">Hello! I'm Test Text. I'm Test Text jr Father!</div>
<div id="text2">Hi, I'm test text jr. I'm sharp and beautiful by nature but when I came in, Chrome made me blurry and I'm bad, I'm bad! ... Who's bad :)</div>
</div>
<button onclick="next();">Next</button>
http://codepen.io/anon/pen/kkpJaL
I have an animation where a div slides out the view, however when the animation is completed, the div just returns to its origin position in the view. How do I totally remove the div or hide it after the animation ends using just CSS?
Here is the markup:
<div class="container">
<div class="slide-box" id="slide-box""></div>
</div>
and the css:
.slide-box {
position: relative;
width: 100px;
height: 100px;
background-image: url(../pics/red.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation: slide 5s linear 1;
}
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
100% {
left: 100%;
overflow: hidden;
visibility: hidden;
}
}
I don't want it to fade out over the duration of the animation, i just want it to disappear once it hits 100% in the keyframe. Thanks ahead of time!
Use the animation-fill-mode option. Set it to forwards and the animation ends at it's final state and stay like that.
Altered based upon comments Set opacity fade to just last 1% of animation... simplified keyframes. Added a jquery option to literally remove the div from the DOM. CSS alone won't alter the markup, where jQuery will.
Although you can't animate the display property. If you want the div totally gone, after the opacity fades to zero, you can then add the display property to remove the div. If you don't wait for opacity to end, the div will just vanish without any transition.
/*
This jquery is added to really remove
the div. But it'll essentially be
VISUALLY gone at the end of the
animation. You can not use, or
delete the jquery, and you really
won't see any difference unless
you inspect the DOM after the animation.
This function is bound to animation
and will fire when animation ends.
No need to "guess" at timeout settings.
This REMOVES the div opposed to merely
setting it's style to display: none;
*/
$('.slide-box').bind('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(e) { $(this).remove(); });
.slide-box {
display: block;
position: relative;
left: 0%;
opacity: 1;
width: 100px;
height: 100px;
background: #a00;
animation: slide 1s 1 linear forwards;
/*
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
*/
}
#keyframes slide {
0% {
left: 0%;
opacity: 1;
}
99% {
left: 99%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
display: none;
}
}
#-webkit-keyframes slide {
0% {
left: 0%;
opacity: 1;
}
99% {
left: 99%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slide-box" id="slide-box"></div>
</div>
animation: slide 5s linear forwards;
at 100%
opacity: 0;
display: none;
Try this.
Working fiddle: https://jsfiddle.net/jbtfdjyy/1/
UPDATE: JS mani
var slideBox = document.getElementById('slide-box');
setTimeout(function(){
slideBox.style.display = 'none';
}, 5000);
Try this. https://jsfiddle.net/jbtfdjyy/2/
Add something at 99% or so to your keyframes, and set opacity to 1 in that. If you have opacity: 1 at the start, then it will stay that way until 99%. Only at 100% will it change.
It's not technically fired at 100%. If you want that, I'd recommend using some JavaScript here, but this will at least give the illusion you want.
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
99% {
opacity: 1;
}
100% {
left: 100%;
overflow: hidden;
opacity: 0;
display: none;
visibility: hidden;
}
}
UPDATE:
As per your request, here is a JavaScript version. Keep in mind, there are endless ways to accomplish such a task. I am using vanilla JS (no jQuery, etc.), and using ES6 syntax.
What we do here is set a timeout, and at the end of that timeout I broadcast an event animation_end. That event listener will handle the end of the animation (in this case, it adds a class which will handle the fading out). This is much more granular than you need it to be, you could simply do the adding of the class within the setTimeout, but I think it is slightly better this way as you can abstract you can do other things with events such as animation start, etc.
Here is the fiddle: https://jsfiddle.net/vmyzyd6p/
HTML:
<div class="container">
<div class="slide-box" id="slide-box""></div>
</div>
CSS:
.slide-box {
position: relative;
width: 100px;
height: 100px;
background-color: blue;
animation: slide 3s linear 1;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
.animationEnd {
opacity: 0;
}
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
100% {
left: 100%;
}
}
JavaScript:
// Create a function that handles the `animation_end` event
const animationEnd = () => {
// Grab the slidebox element
let slideBox = document.getElementById('slide-box');
// Get the class of the slidebox element
let slideClass = slideBox.getAttribute('class');
// Add the animation end class appended to the previous class
slideBox.setAttribute('class', slideClass + ' animationEnd');
};
// Create the animation end event
let animationEndEvent = new Event('animation_end');
// Cross browser implementation of adding the event listener
if (document.addEventListener) {
document.addEventListener('animation_end', animationEnd, false);
} else {
document.attachEvent('animation_end', animationEnd);
}
// Set the timeout with the same duration as the animation.
setTimeout(() => {
// Broadcast the animation end event
document.dispatchEvent(animationEndEvent);
}, 3000);