Develop Reference

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>

Making hidden element display itself and then move using transition

How do I make fix this code so the two element first becomes no longer hidden and then moves however much right smoothly using the transition. It works when the element doesn't begin hidden, but when it is, it just jumps to the end spot. How do I make this work without taking out hidden and reducing the elements width to zero.? Thanks.
var one = document.getElementById('one');
var two = document.getElementById('two');
function myFunct() {
two.style.display = 'flex';
two.style.right = '70%';
}
#one {
position: absolute;
width: 300px;
height: 100px;
border: 1px solid red;
}
#two {
position: absolute;
display: none;
min-width: 5px;
height: 100%;
transition: 1.5s;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-ms-transition: 1.5s;
background-color: green;
right: 0px;
}
<div id = 'one' onclick = 'myFunct()'>
<div id = 'two'></div>
</div>

Use opacity: 0 first instead of display: none and using translateX instead of right will be better.
I also recommend AnimeJS since it makes animations and transitions a lot easier if you are using a bunch of them.

Try manipulating the visibility property instead of display:
function myFunct() {
two.style.visibility = 'visible';
two.style.right = '70%';
}
#two {
visibility: hidden;
display: flex;
...
}

Poping in animation with fixed postion changing with browser using MooTools

I need to do with an animation that is intially the image will be on full screen whenver i click on the screen it will popin an go to a div. for this i haved used te following code.
<div class="header_relative">
<header id="cover_photo_header" class="large">
<img></img>
</header>
</div>
styles:
<style>
header_relative
{
position:relative
}
header, a, img{
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
header.large
{
position: fixed;
top: 0;
left: 0;
width:100%;
height:100%;
overflow: hidden;
z-index: 19;
}
header.small
{
position: fixed;
overflow: hidden;
z-index: 19;
}
</style>
Javascript:
window.addEvent('click', function(){
$('global_content').getElement('header.large').style.width = '770px';
$('global_content').getElement('header.large').style.height = '300px';
$('global_content').getElement('header.large').style.margin = 'auto';
$('global_content').getElement('header.large').style.top = '-294px';
$('global_content').getElement('header.large').style.left = '29.1%';
setTimeout(function(){
//do what you need here
$('global_content').getElement('header').removeClass("large").addClass("small");
func, delay
}, 2000);
});
But he animation is changing on left.Can you guys help me howto come out of this

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/

Opacity transition affecting background color of adjacent element

I am revealing an element using a CSS transition that is triggered by a JavaScript scroll event however this transition is affecting the background color of an adjacent element in Safari (5.1.7) and Chrome (27.0.1453.93) on a Mac (10.6.8) which makes no sense at all. I think I have stumbled upon a bug.
I duplicated the issue in Safari only using the following, stripped-down code and created a jsfiddle (http://jsfiddle.net/5AEMF/) but the issue does not occur within that framework:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Opacity transition affecting color of adjacent element</title>
<style>
* {
margin: 0;
padding: 0;
}
#bar {
height: 100px;
background-color: #FF0000;
}
#content {
opacity: 0;
height: 9999px;
background-color: #0000FF;
-webkit-transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#content.scrolled {
opacity: 1;
}
</style>
<script type="text/javascript">
var scrolled = false;
var init = function() {
onScroll(null);
window.addEventListener('scroll', onScroll);
};
var onScroll = function(e) {
if (window.scrollY > 0 && !scrolled) {
scrolled = true;
document.getElementById('content').className = 'scrolled';
} else if (window.scrollY === 0 && scrolled) {
scrolled = false;
document.getElementById('content').removeAttribute('class');
}
};
window.addEventListener('load', init);
</script>
</head>
<body>
<div id="bar"></div>
<div id="content"></div>
</body>
</html>
I wonder if there's a workaround for this issue. Any help would be greatly appreciated.

Use colors in RGB form eg: color:rgba(255, 106, 0, 0.24) the last parameter in this property 0.24 is an opacity. make it 0 and it will be transparent.