Fade in on switching classes in javascript - javascript

I am sure my problem is pretty easy to solve. I want to apply fade in when my header became visible and fadeout when it isn't visible. So i don't want to be that rough. I tried with header.removeClass('clearHeader').addClass("darkHeader").fadeIn(slow); but that didn't help me. I also tried to add transitions in CSS but that didn't help me too.
Javascript:
$(function() {
//caches a jQuery object containing the header element
var header = $(".clearHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.removeClass('clearHeader').addClass("darkHeader");
} else {
header.removeClass("darkHeader").addClass('clearHeader');
}
});
});
CSS:
header {
width:100%;
height: 70px;
position: fixed;
z-index:999;
background-color:#fff;
box-sizing:border-box;
}
header nav {
display:inline-block;
float:right;
line-height:70px;
}
header nav a {
margin-left: 25px;
font-weight: 700;
font-size: 18px;
}
header nav a:hover {
text-shadow:1px 1px 1px red;
}
.clearHeader{
display:none;
opacity:0;
width: 100%;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
.darkHeader {
display:visible;
opacity:1;
z-index:999;
}
CODE PEN

try by remove opacity and display visible code from css and try fadeIn and fadeOut Like:
if (scroll >= 50) {
header.removeClass('clearHeader').addClass("darkHeader").fadeIn('slow');
} else {
header.removeClass("darkHeader").addClass('clearHeader').fadeOut('slow');
}

To solve your problem you can simply use jQuery's animate. Here's the syntax and explanation. It smoothly animates any css property you would want to animate. Therefore you can do:
CSS:
header {
opacity:1;
}
(just sets the default)
JS:
header.animate({opacity: "0"}, 500);
To fade out, and the same thing but with opacity 1 to fade in. You may want to comment out the display part of your classes for testing though, as it may influence how it all behaves.

Related

Make transition between 2 header logos

I am having 2 different logos in the header and i applied this function for them to replace each other at certain point.
Hovewer i want to apply some fade in and fade out to them when they make transition. Is this possible only with JS or CSS is included?
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$('.logo-image.logo-light img').addClass('active')
}
if ($(this).scrollTop() < 500) {
$('.logo-image.logo-light img').removeClass('active')
}
})
});
.logo-image.logo-light{
background:center center no-repeat;
background-size:contain;
background-image: url('http://www.plaforma.me/wp-content/uploads/2018/04/logo-zastavica.png');
}
.logo-image.logo-light img{
opacity:0;
-webkit-transition:opacity 1s ease-in-out;
transition:opacity 1s ease-in-out;
}
.logo-image.logo-light img.active{
opacity:1;
}
This is the result - i want second logo to be first one which is by default first but now appears as second one when transitioned. Also the logo does not completely disappear, first time doing transitions so for sure my mistake somewhere.
Look - http://www.plaforma.me/studio/
Solution - Reversed opacity in order and added background-color to be black so it does not be transparent.
It might easier to just rethink your HTML Markup and use CSS to do it. All you would need to do is toggle a class.
var logo = document.querySelector('div.bar')
window.setInterval(()=>{
logo.classList.toggle('other')
}, 5000)
div.bar > span.logo
{
display: inline-block;
width:100px;
height:100px;
}
div.bar > span.logo1 {
background-image: url(http://placekitten.com/100/100);
}
div.bar > span.logo2 {
position: realtive;
margin-left: -105px;
background-image: url(http://placekitten.com/g/100/100);
opacity: 0;
transition: opacity 3s ease-out;
}
div.bar.other span.logo2 {
opacity: 1;
transition: opacity 3s ease-out;
}
<div class="bar">
<span class="logo logo1"></span>
<span class="logo logo2"></span>
<span>Hello there!</span>
</div>
Did you try using jquery's .fadeIn yet?
I've made up some code.
Not sure if this works but i'll be worth a try
Hope this works,
Ramon
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$('.logo-image.logo-light img').fadeIn(0);
}

Make a hamburger ID work in two headers

I am creating a clone of the header and when the scroll reach a certain height, the clone version will display. This works, as I want. The problem is that I am trying to get the “hamburger” action to work in both headers. Now it only works in first section. I need to get it working in section two also. I know I have used an ID (“trigger-overlay”), which should only be used one time and be unique.
Is this correct and the reason why it is not working? Do you guys know a workaround to fix this problem?
I need it to be an ID because of a more complex code in another script, but if it’s not possible to keep it I will do it in another way. I appreciate any help here. See JSFiddle
HTML
<section id="one">
<header class=""> <a id="trigger-overlay" class=""><span class="hamburger"></span></a>
</header>
</section>
<section id="two"></section>
CSS
section {
height:100vh;
}
#one{
background-color:#0097a7;
}
#two{
background-color:#00bcd4;
}
.hamburger, #trigger-overlay .hamburger:before, #trigger-overlay .hamburger:after {
cursor: pointer;
background-color:#80deea;
width:25px;
height:3px;
display:block;
border-radius:6px;
-webkit-transition:top 0.3s 0.2s ease, bottom 0.3s 0.2s ease, background-color 0.3s ease, -webkit-transform 0.3s ease;
transition:top 0.3s 0.2s ease, bottom 0.3s 0.2s ease, background-color 0.3s ease, transform 0.3s ease;
}
#trigger-overlay {
float: left;
margin-left:15px;
}
.hamburger:before, .hamburger:after {
content:"";
position:absolute;
}
.hamburger {
position:relative;
top:19px;
}
.hamburger:before {
top:-7px;
}
.hamburger:after {
bottom:-7px;
}
/*Hamburger hover*/
#trigger-overlay .hamburger:hover, #trigger-overlay .hamburger:hover:before, #trigger-overlay .hamburger:hover:after {
background-color: #00838f;
}
header {
position: relative;
width: 100%;
height: 60px;
background-color:#00acc1;
}
header.clone {
position: fixed;
background-color: #00acc1;
top: 0px;
left: 0;
right: 0;
transform: translateY(-100%);
transition: 0.2s transform cubic-bezier(.3, .73, .3, .74);
}
body.down header.clone {
transform: translateY(0);
}
Vanilla JS
var triggerBttn = document.getElementById( 'trigger-overlay' );
var sticky = {
sticky_after: 200,
init: function () {
this.header = document.getElementsByTagName("header")[0];
this.clone = this.header.cloneNode(true);
this.clone.classList.add("clone");
this.header.insertBefore(this.clone, this.header.childNodes[1]);
this.scroll();
this.events();
},
scroll: function () {
if (window.scrollY > this.sticky_after) {
document.body.classList.add("down");
} else {
document.body.classList.remove("down");
}
},
events: function () {
window.addEventListener("scroll", this.scroll.bind(this));
}
};
function toggleOverlay() {
alert("I want to be active in both headers ");
}
triggerBttn.addEventListener( 'click', toggleOverlay );
document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));
Unfortunately just using the same ID won't give you the same EventListeners. But, it's easy to get around your problem by simply adding the same EventListeners to the newly created clone:
document.getElementsByClassName('clone')[0].addEventListener('click', toggleOverlay);
See a working version of your Fiddle here: http://jsfiddle.net/qfbq2b0k/4/

Dynamically making an element fixed (header) in fullpage.js

I'm building a page in fullpage.js. On the first slide is an image that consumes 90% of the height of the viewport. The other 10% is a navigation bar at the below the image. The image below demonstrates it.
As I scroll to the next slide, I want the navigation bar to become a fixed header for the remainder of the slides.
I tried making the element fixed once it's offset().top value is 0 against $(window).top() using jQuery. This did not work for me.
$(window).scroll(function () {
var nav = $('#nav');
var eTop = nav.offset().top;
if ((eTop - $(window).scrollTop()) == 0) {
nav.addClass('fixed');
}
else {
nav.removeClass('fixed');
}
});
Is this possible and how do I achieve it?
If you are using the default option css3:true, then this will do the trick:
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
onLeave: function(index, nextIndex, direction){
//leaving 1st section
if(index == 1){
$('.header').addClass('fixed');
}
//back to the 1st section
if(nextIndex == 1){
$('.header').removeClass('fixed');
}
}
});
And you will need this CSS for the header element:
.header{
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
position:absolute;
top:100%;
margin-top: -100px;
left:0;
background:#000;
width:100%;
color: #fff;
height: 100px;
z-index:999;
}
.header.fixed{
bottom:auto;
top:0;
margin-top: 0;
}
You can of course, change the height and so on.
Take into account that I've placed the fixed element outside the plugin's wrapper. This way I will avoid problems with the translate3d property used by the plugin:
<div class="header">Header</div>
<div id="fullpage">
<div class="section">...</div>
<div class="section">...</div>
...
</div>
See a demo
Update:
If you are using scrollBar:true, then use the following CSS instead of the previous one:
.section {
text-align:center;
}
.header{
-webkit-transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220);
-moz-transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220);
-o-transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220);
transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220);
position:fixed;
top:100%;
margin-top: -100px;
left:0;
background:#000;
width:100%;
color: #fff;
height: 100px;
z-index:999;
}
.header.fixed{
bottom:auto;
top:0;
margin-top: 0;
position:fixed;
}
See demo
Why not just check if you have scrolled past the height of the window?
Check out my fiddle here
$(window).scroll(function () {
var nav = $('#nav');
var offset = $(this).height();
if (($(window).scrollTop()) >= offset) {
nav.addClass('fixed');
}
else {
nav.removeClass('fixed');
}
});

Hiding Dropdown "caret" when sticky header is present

So right now I'm building out our new website, and I've programmed a nice little sticky header using javascript. Here's my Javascript.
http://dev.yoursparksource.com
<script>
jQuery(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('.stickyheader1').addClass("sticky");
}
else{
$('.stickyheader1').removeClass("sticky");
}
});
</script>
And my CSS for the stickyheader and .sticky added class
.stickyheader1 {
position: fixed;
width: 100%;
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
-ms-transition: background .3s ease-in-out;
-o-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
height: 85px;
}
.stickyheader1.sticky {
background: rgba(0,0,0,0.80);
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
-ms-transition: background .4s ease-in-out;
-o-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
}
And this works PERFECT. My problem is the dropdown menu. I styled a little CSS caret, and when you scroll down and the header background activates, the caret is on top of the header's space, and you can see it behind the semi-transperent header. (EWW! Tacky...)
What I'm wondering, is how can I target this element, as it's an :after pseudo class.. Here's the current CSS for the caret (or top triangle as some call it.)
#nav ul ul:After {
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: rgba(0,0,0,0.40) transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 20px;
}
I tried just using the same javascript with the "#nav ul ul:After", but after researching, I learned how you can't add styles to a pseudo class. Duh, I knew that, just forgot. That's all. ;-) Any assistance on getting that little caret to go away when I scroll and the stick header's bg activates? Would be a lifesaver for me. (Also, if it can animate with the opacity transition like the header, that would rock. Once I figure out how to target it, I can add the css animation.
Thanks a MILLION in advance! I love StackOverflow.
You will need JavaScript to loop through the stylesheet, find the rule for #nav ul ul:After and set its display property to none after the sticky class is added to .stickyheader1.
jQuery(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('.stickyheader1').addClass("sticky");
var ss = document.styleSheets;
for (i = 0; i < ss.length; i++) {
var rules = ss[i];
for (j = 0; j < rules.cssRules.length; j++) {
var r = rules.cssRules[j];
if (r.selectorText == "#nav ul ul:After" || r.selectorText == "#nav ul ul::After") {
r.style.display = 'none';
}
}
}
} else {
$('.stickyheader1').removeClass("sticky");
}
});

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/

Categories

Resources