How to fade in changing text - javascript

I'm changning some html via JAvascript and I want to fade in the text.
This is the javascript:
var int = self.setInterval(function(){
if(!isPaused){
changeBG();
}
}, 3500);
function changeBG(){
//array of backgrounds
now = (now+1) % array.length ;
$('.documentary').css('background-image', 'url("' + array[now] + '")');
document.getElementById('film-detail').innerHTML = array2[now];
}
And this is my CSS which I think should cause it to fadeIn:
.documentary-bg div.film-title {
display: table-cell;
vertical-align: bottom;
bottom: 10px;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
And the HTML:
<div class='film-title' id="film-detail"></div>
I've tried a number of approaches and it won't fade in!

Why not just use css transitions?
.text {
opacity: 1;
transition: opacity 2s;
}
.text.fadeOut {
opacity:0;
}
https://jsfiddle.net/tvakyp2c/

I'm not sure what are you trying to fade in but did you know that you can just use:
$(selector).fadeIn(speed,easing,callback)
in your case would probably be:
$('.documentary-bg').fadeIn(2000);

Related

How do you combine CSS & JS fade out onClick + fade in on page load?

I'm trying to accomplish the following on my website:
When a button is clicked (onClick), fade out the entire screen to black.
Then fade in from black to load the next page (the URL that the button linked to).
I'm finding solutions to points 1 and 2 separately, but no solution that combines these. See below. Can someone help achieve 1 and 2 following each other?
/*JS code I found online to create a fade out to black onClick */
$(document).ready(function() {
function toggle() {
$('#overlay').toggleClass('backdrop');
}
$('[data-toggle="active"]').click(toggle);
});
/*CSS code #1 I found online to create a fade out to black onClick */
#overlay {
width: 100%;
height : 100%;
opacity : 0;
background: '#000';
top: 0;
left: 0;
transition: opacity .25s;
-moz-transition: opacity .25s;
-webkit-transition: opacity .25s;
}
.backdrop {
opacity: .4 !important;
}
/*CSS code #2 I found online to create a fade in on pageload */
#overlay {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<a class="btn btn-default" data-toggle="active" href="nextpage.com">Button</a>
<a class="btn btn-default" data-toggle="active" href="nextpage2.com">Button</a>
<div id="overlay"></div>
</body>
The above JS code goes with CSS code #1, but that only creates a toggle function (source).
For the fade in on page load, I found CSS code #2 as seen above, but that doesn't fade in from black source:

Has any way to get the dom.style changed hook,without async?

We know,css animation/transition was not work with display: block&display: none;
So I try to use
someDom.style.transition = '0.3s'
someDom.style.display='block'
someDom.style.opacity=1
to play an animation as fadeIn.
But still not work , because it run too fast.
I know setTimeout will works well this time, but because of the javaScript event loop , I don't want it became an async event.
Maybe this would solve your problem
const item = document.querySelector('.item');
item.style.display = 'block';
item.classList.add('fadeIn');
.item {
display: none;
width: 100px;
height: 100px;
background: grey;
}
.item.fadeIn {
animation: fadeIn 1s linear;
-webkit-animation: fadeIn 1s linear;
-moz-animation: fadeIn 1s linear;
-o-animation: fadeIn 1s linear;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="item"></div>

CSS animations to toggle when in viewport with vanilla JS

So I have got different animations made in CSS, though the problem is that they start right away when the page loads (ofcourse). I do not want this though. Is there a way in Vanilla JavaScript to get the animation to fire up only when it is in the viewport?
I have searched in a lot of places, but I either find a plugin I need to use or jQuery.
HTML:
<div class="introduction">
<h1>I can do the following for you:</h1>
<ul>
<li>Create a custommade, new website.</li>
<li>Code a PSD template into a working website.</li>
<li>Rework an outdated website.</li>
<li>Clean up messy code of a website.</li>
</ul>
</div>
CSS:
#keyframes showOnLoad {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.introduction li {
list-style-type: none;
margin-bottom: 5px;
text-align: center;
opacity: 0;
-webkit-animation: showOnLoad;
animation: showOnLoad;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.introduction li:nth-child(2) {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.introduction li:nth-child(3) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.introduction li:nth-child(4) {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
This is the code you need.
window.addEventListener("scroll", onScroll);
function onScroll() {
for (var item of document.querySelectorAll(".introduction li")) {
elementVisible(item);
}
}
function elementVisible(el) {
let top = el.offsetTop;
let height = el.offsetHeight;
let bottom = top + height;
let IsOverBottom = top > (window.pageYOffset + window.innerHeight);
let IsBeforeTop = bottom < window.pageYOffset;
if (!IsOverBottom && !IsBeforeTop) {
el.classList.add("show");
}
}
And a bit of CSS
#keyframes slideIn {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
.show {
animation: slideIn 5s ease-in-out;
}
This is a basic implementation but it gets you closer.
http://jsbin.com/hetapaj/1/edit?css,js,output

delayed logo fading into website?

Just wondering whats the best way to go about having the logo in top left corner to fade in after about 5 seconds after user has been on page?
Here is the http://jsfiddle.net/elroyz/sjD8X/ with the logo in the corner
body {
background-color:#000;}
i only put this in because it wouldnt let me post without code
i read something about jquery delay but i know next to nothing about it so thought there might be another option
Thanks in advance
$('img').delay(5000).fadeOut(250);
This will fade out the img after 5 seconds. The time in the code is in ms.
Fore more info on this see
api.jquery.com/delay/
api.jquery.com/fadeout/
api.jquery.com/fadein/
try to use this transitions.
http://www.problogdesign.com/coding/get-started-with-css3-transitions-today/
goodluck!
HTML
<img onload="this.style.opacity='1';" src="image path" />
CSS
img {opacity:0;-moz-transition: opacity 2s;-webkit-transition: opacity 2s;-o-transition: opacity 2s;transition: opacity 2s;}
CSS 3 animation. (With vendor prefixes because it is still new and experimental):
#-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#logo {
-webkit-animation: fadein 5s infinite;
-moz-animation: fadein 5s infinite;
-o-animation: fadein 5s infinite;
animation: fadein 5s infinite;
}

retaining the final postion after rotation css3 animation

is there a way to make this css3 javascript animation smooth and fine please see the linkjsfiddle
css animation i use is given below
.pageanim
{
/* Safari and Chrome */
-webkit-animation:nextpage 1s;
-webkit-animation-timing-function:linear;
-webkit-transform-origin: left;
-webkit-transform-style: preserve-3d;
}
.hideface
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
#-webkit-keyframes nextpage /*Safari and Chrome*/
{
from {-webkit-transform:rotatey(0deg); }
to {-webkit-transform:rotatey(-180deg);
}
}
.revpageanim
{
/* Safari and Chrome */
-webkit-animation:prepage 1s;
-webkit-animation-timing-function:linear;
-webkit-transform-origin: 100% 0% 0px;
}
#-webkit-keyframes prepage
{
from {-webkit-transform:rotatey(0deg);}
to {-webkit-transform:rotatey(90deg);}
}
By adding the animation-fill-mode property, you can choose whether it is the first or last frame of the animation that should be kept at the end of the animation:
animation-fill-mode: forwards;
https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode

Categories

Resources