Develop Reference

how to crossfade animation for two image together that play on scroll

I have a crossfade animation for two image that overlap together that play on hover
#cf {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
#cf img {
position: absolute;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity: 0;
}
<div id="cf">
<img class="bottom" src="https://ansushop.ir/images/Device_Liquid/L_miss%20angel3.jpg"/>
<img class="top" src="https://ansushop.ir/images/Ansu_Sanitizer2.jpg" />
</div>
but i want crossfading happen on scrolling not on hover , can any one explane for me how i can show cross fade animation on scroll, not on hover ?

// With jQuery
var iframe = $("#cf-iframe").get(0);
var iframeWindow = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.defaultView;
$(iframeWindow).on("scroll", function() {
var scrollTop = iframeWindow.pageYOffset || iframeWindow.document.documentElement.scrollTop;
$("img.top", iframeWindow.document).css("opacity", 1 - scrollTop / 1000);
});
// With Just JavaScript and No jQuery
var iframe = document.getElementById("cf-iframe");
var iframeWindow = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.defaultView;
iframeWindow.onscroll = function() {
var scrollTop = iframeWindow.pageYOffset || iframeWindow.document.documentElement.scrollTop;
iframeWindow.document.querySelector("img.top").opacity = 1 - scrollTop / 1000;
};
body {
height: 1000px;
}
#cf-iframe {
border: 0;
margin: 0;
padding: 0;
height: 300px;
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe id="cf-iframe" srcdoc='
<style>
#cf {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
body {
margin:0;
height:1300px;
background-color:#fff;
}
#cf img {
position: fixed;
left: 0;
top: 0;
}
</style>
<div id="cf">
<img class="bottom" src="https://ansushop.ir/images/Device_Liquid/L_miss%20angel3.jpg"/>
<img class="top" src="https://ansushop.ir/images/Ansu_Sanitizer2.jpg" />
</div>
'></iframe>
See a working example here.

I want to add transitions to sticky header to my store

I want to add transitions to sticky header to my store. I want to stciky header to show from the top when the scroll is > 50. The scrollheader and coverheader classes works fine. But transitions not worked. The header just jumps to above as sticky header is enabled. The logo part is resized in sticky header by almost 80px than normal header.
Here is the code of Javascript.
(function enableStickyHeader() {
var stickyHeader = document.querySelector('header').dataset.sticky;
var scrollHeader = $("header.scrollheader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50 && stickyHeader == 'true') {
scrollHeader.removeClass('scrollheader').addClass("coverheader");
} else {
scrollHeader.removeClass("coverheader").addClass('scrollheader');
}
});
})();
And through css I am applying css transition property. I have tried to get the results by applying height and line height to headers. But that also not works.
.coverheader {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position: fixed;
}
header {
width: 100%;
line-height: 50px;
top: 0;
z-index: 150;
}
.scrollheader {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position: relative;
}
And Html code for the case is this.
<header class="header-section scrollheader" data-section-id="header" data-section-type="header-section" data-sticky="true">
<p>logo and menu is there</p>
</header>

For the effect you give to work, the values ​​on which css is based must change.
I prepared the following example to give you an idea.
Please note: To make it easy to understand, I have slightly extended the animation time. And I made the background black and the header white.
(function enableStickyHeader() {
var stickyHeader = document.querySelector('header').dataset.sticky;
var scrollHeader = $("header.scrollheader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 82 && stickyHeader == 'true') {
scrollHeader.removeClass('scrollheader').addClass("coverheader");
} else {
scrollHeader.removeClass("coverheader").addClass('scrollheader');
}
});
})();
html {
height: 10000px;
background: black;
}
html,
body {
padding: 0;
margin: 0;
}
.coverheader {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
position: fixed;
bottom: 100%;
transform: translateY(100%);
}
header {
display: flex;
width: 100%;
line-height: 50px;
z-index: 150;
background: white;
}
.scrollheader {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
position: relative;
transform: translateY(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header-section scrollheader" data-section-id="header" data-section-type="header-section" data-sticky="true">
<p>logo and menu is there</p>
</header>

CSS3 not working when trigered by Javascript

I'm trying to make an splash loading with CSS/HTML/JS, but am having some problems.
The problem is when trying to make the splash screen disappear with a transition effect, but the transition effect isn't applying.
I am sure my JavaScript is work properly, as it appends the new class not-displayed to the div element.
const splash = document.querySelector('.splash');
console.log(splash);
document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('not-displayed');
}, 2000);
});
.splash {
z-index: 100000;
position: fixed;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffff;
}
//all of these code not working
.splash.not-displayed {
z-index: 20;
opacity: 0;
position: fixed;
height: 100vh;
width: 100%;
background-color: #f06c65;
transition: all 0.5298s ease-out;
-webkit-transition: all 0.5298s ease-out;
-moz-transition: all 0.5298s ease-out;
-o-transition: all 0.5298s ease-out;
}
#keyframes fadein {
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
animation: fadein 1s ease-in forwards;
}
<div class="splash">
<h1 class="fade-in">
hello
</h1>
</div>

You have two things going on here, a transition and an animation. First I removed a lot of unnecessary CSS code to make things clearer.
Your code is working as expected. When the page loads, the "fadein" animation is triggered by the fade-in class. The text "hello" fades in from opacity 0 to opacity 1 over the course of a second, as expected.
Meanwhile, your Javascript triggers on page load and adds the class not-displayed to the outer div after two seconds. This triggers the transition effect, which after half a second applies a red background to the div as it fades the div out, bringing it back to opacity 0.
I'm not sure what specifically you are trying to achieve here, but you have wired up a successful transition and animation effect.
const splash = document.querySelector('.splash');
console.log(splash);
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
splash.classList.add('not-displayed');
}, 2000);
});
.splash.not-displayed {
opacity: 0;
background-color: #f06c65;
transition: all 0.5298s ease-out;
}
.fade-in {
opacity: 0;
animation: fadein 1s ease-in forwards;
}
#keyframes fadein {
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="splash">
<h1 class="fade-in">
hello
</h1>
</div>

In your code
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
splash.classList.add('not-displayed');
}, 2000);
});
you are adding new class to remove the .splash and then add new class not-displayed

Everything is working just fine, except you have given opacity: 0 to the not-displayed class.
const splash = document.querySelector('.splash');
console.log(splash);
document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('not-displayed');
}, 2000);
});
.splash {
z-index: 100000;
position: fixed;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffff;
}
.not-displayed {
z-index: 20;
/* opacity: 0; */
position: fixed;
height: 100vh;
width: 100%;
background-color: #f06c65;
transition: all 0.5298s ease-out;
-webkit-transition: all 0.5298s ease-out;
-moz-transition: all 0.5298s ease-out;
-o-transition: all 0.5298s ease-out;
}
#keyframes fadein {
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
animation: fadein 1s ease-in forwards;
}
<div class="splash">
<h1 class="fade-in">
hello
</h1>
</div>
Codepen

You should set the transition to .splash not to .splash.not-displayed

Obtaining page maximum height in Jquery

I don't know if I am specific enough,
But I created a lightbox-style fadein background but it appears to me that the background won't reach the very bottom of the page. So when I scroll, the white background appears again.
Here is the demo:
http://jsbin.com/limiyisi/1/
HTML
<body>
<div id="overlay"></div>
<a style="position:absolute;" href="#" class="btn btn-default" data-toggle="active">
Button </a>
<div class="ex-height"></div>
CSS
#overlay {
position:absolute;
width: 100%;
height : 100%;
background: #000;
top: 0;
left: 0;
opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}
.backdrop {
opacity: 0.4 !important;
}
.ex-height {
height: 1204px;
}
Jquery
$(function() {
function toggle() {
$('#overlay').toggleClass('backdrop');
}
$('[data-toggle="active"]').click(toggle);
});
Thanks for any helpful advice!

Set the height of the overlay to the document's height:
$('#overlay').toggleClass('backdrop').height($(document).height());

Change the #overlay to
#overlay {
position:absolute;
background: #000;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}
If that doesn't quite work - try changing the bottom and right values to 100%

demo
$(function() {
function toggle() {
var pageHeight = $('html, body').innerHeight();
$('#overlay').toggleClass('backdrop').height( pageHeight );
}
$('[data-toggle="active"]').click(toggle);
});

Fade effect attribute/function in javascript custom script?

I need to add a fade effect on my javascript function
Javascript
<script type="text/javascript">
window.onload=function() {
loginBtn = document.getElementById('loginBtn');
fader = document.getElementById('login_fader');
login_box = document.getElementById('login_box');
closebtn = document.getElementById('closelogin');
loginBtn.onclick=function(){
fader.style.display = "block";
login_box.style.display = "block";
}
closebtn.onclick=function() {
fader.style.display = "none";
login_box.style.display = "none";
}
}
</script>
HTML
<div id="login_fader"> </div>
<div id="login_box">
<table class="table-login">
<th>Login or Register</th>
<th><a id="closelogin">X</a></th>
<tr>
<td>Login</td>
<td>Register</td>
</tr>
</table>
</div>
CSS
<style type="text/css">
#loginBtn {
float: right;
margin-top: -6%;
cursor:pointer;
}
#login_fader {
background: black;
opacity: .5;
-moz-opacity: .5;
-filter: alpha(opacity=50);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 5;
display: none;
}
#login_box {
width: 320px;
height: 200px;
border: 1px white solid:
background: #5a5a5a;
position: fixed;
top: 25%;
left: 35%;
z-index: 10;
display: none;
}
.table-login {
background: #FFF;
border-radius: 8px;
box-shadow: 0 0 5px 2px;
opacity: 0.95;
}
#closelogin {
float:right;
cursor:pointer;
}
</style>
Js fiddle
http://jsfiddle.net/U3n4j/
I have tried using the transition properties from css3 and tried applying both to login_box and login_fader.
I found some functions on the net but don't know how to link them to my already made function and i was thinking if there are any properties directly that i can link them to my function.

Proper way to fade in a static box in css3 and js 1.7 ++
This is a example using only webkit and modern javascripts classList.add
but you can add the other prefixes.-moz,-ms,-o
in this example i show only the animation.
css
.box{
width:100%;
height:100%;
position:fixed;
left:0;top:-100%;/*notice TOP -100%*/
opacity:0;
-webkit-transition:opacity 700ms ease,top 0 linear 700ms;/*notice TOP delay*/
background-color:rgba(0,0,0,0.7);
}
.box.active{
-webkit-transition:opacity 700ms ease,top 0 linear 0;
/*top transition not needed but could help to understand*/
top:0;
opacity:1;
}
js
function show(){
box.classList.add('active');
}
function hide(){
box.classList.remove('active');
}
var box=document.getElementsByClassName('box')[0],
button=document.getElementsByTagName('button')[0];
button.addEventListener('click',show,false);
box.addEventListener('click',hide,false);
DEMO
http://jsfiddle.net/RAu8Q/ not working anymore
http://jsfiddle.net/RAu8Q/17/ new syntax 10-2015
if you have any questions just ask.

I can't tell exactly what effect you're trying to achieve, but if you're going to use CSS transitions, then you need to be transitioning between numerical properties. I.e., you can't expect a fade to occur simply by transitioning from display:block to display:none. You'd want to use opacity instead.

First of all, don't try to use css transitions in conjunction with display property, that won't work! Instead, try transitioning other properties. Let's take opacity for instance (we'll simulate display: none/block functionality by setting opacity to 0/1)
Secondly, set the start value for opacity to 0 on the desired HTML element (the one you'd like to animate). Specify which property to animate (opacity in our case):
transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transtion: opacity 1s;
When the login button is clicked, set opacity to 1:
loginBtn.onclick=function() {
fader.style.opacity = 1;
login_box.style.opacity = 1;
}
When the close button is clicked, set opacity back to 0:
closebtn.onclick=function() {
fader.style.opacity = 0;
login_box.style.opacity = 0;
}
Link to fiddle.

I believe that what you want to do needs css animations. So just create an animation class that fades out the target element and apply it after the user logs in.
#keyframes fadeOut {
from: {
opacity:1;
},
to: {
opacity:0;
}
}
then use apply it on the class
.fadeOut {
animation:fadeOut 0.25s forwards;
}
EXAMPLE
http://jsfiddle.net/zgPrc/