Develop Reference

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);
}

Darken screen when clicking on a link then redirect

I have the following project.
What I want is, when a user clicks on any link on the page, to slowly hide the image with the class map and smoothly display the black background, then return to its usual behaviour, redirecting the user to the next page.
My guess is that preventDefault() is the solution here together with some CSS like this one:
.hideImg{
opacity: 0;
visibility: hidden;
-webkit-transition: visibility 0.3s linear,
opacity 0.3s linear;
-moz-transition: visibility 0.3s linear,
opacity 0.3s linear;
-o-transition: visibility 0.3s linear,
opacity 0.3s linear;
}
body{
background-color:#000;
}
However, I fail to make them work together and create a JS that waits for the hiding animation to occur and then redirect.
How can I achieve this?

Try something like this:
$('a').on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href');
// For one item
$('.map').animate({"opacity": "0"}, 1000, function() {
window.location.href = href;
});
// Or, for multiple classes - all doing the same thing
$('.map, .another-item, .another-class').animate({"opacity": "0"}, 1000, function() {
window.location.href = href;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Google
<div class='map' style="background: black; width: 300px; height: 300px;"></div>

You can add a class to the container that's holding the image.
And add an additional timeout before you go the new page.
$(".x").on('click', function(e) {
e.preventDefault();
$('div').addClass('darken');
window.setTimeout(function() {
window.location.href = 'https://www.google.com'; // this will navigate to the new page after 2s
}, 2000);
});
body {
background: black;
}
.warpper-map {
width: 500px;
height: 200px;
}
img.map {
width: 100%;
height: 100%;
}
.darken {
opacity: 0;
transition: opacity 2s ease; /* Makes smooth transition */
/* You can increase the time to make the transition much longer */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a class='x' href="#">Click to Darken</a>
<div class='wrapper-map'>
<img class='map' src="https://sporedev.ro/pleiade/images/Lobby.jpg">
</div>

I think this should do the work for you using jQuery:
$('a').on('click',function(e){
e.preventDefault;
$(this).addClass('hideImage');
$('.hideImage').on('animationend webkitAnimationEnd',function(){
window.location.href = $(this).attr('href');
})
});
or just give you the idea of how to fix it.
best of luck

Fade in on switching classes in 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.

How to fire my jQuery on resize and detect the width

I have this script that I wrote but I need help. It's suppose to work like a off-canvas menu for mobile/tablets
The issue is that if i resize the browser and open up the menu again the marginLeft of -270px isn't ideal since if i resize the browser the -270px of the original mark don't match up since its a different viewport size.
Right now I am pushing the body to the left using marginLeft:-270px this works fine on load BUT if i resize the browser everything gets all buggy.
Any help would be appreciated.
jQuery('.menu-toggle').toggle(function() {
jQuery(this).addClass('open');
jQuery('#top-main-nav-container').addClass('active');
jQuery('body').animate({
marginLeft: '-270'
}, 700);
jQuery('.main-navigation ul').css('display','block');
},function() {
jQuery(this).removeClass('open');
jQuery('#top-main-nav-container').removeClass('active');
jQuery('body').animate({
marginLeft: '0'
}, 700);
jQuery('.main-navigation ul').css('display','none');
});`
CSS
.menu-toggle.open {
padding: 30px 25px 500% 100%;
background-color: rgba(165, 166, 168, 0.952941);
}
body.active {
margin:0;
-moz-transition: margin .5s;
-webkit-transition: margin .5s;
transition: margin .5s;
}
#top-main-nav-container.active {
right:0;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}

$(window).on("resize", function () {
// Invoke the resize event immediately
}).resize();
The last .resize() call will run this code upon load.
OR
The cleanest way is to just bind it also to the load event:
$(window).on('load resize', function () {
});

jQuery scrollTop jumps to top of screen

When I load the page, the div is at the top of the screen, but when I start the scroll, it jumps to where it is supposed to be.
Check out the website here:
calretirement.com/classes-test.php
CSS:
.register{position:fixed !important; bottom:120px !important; width: 340.453px;
margin-top: 29px;
}
#stickyForm2015 {-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
jQuery:
<script>
$(window).scroll(function(){
if
($(window).scrollTop() > 670){
$("#stickyForm2015").addClass("register");
}
else
{
$("#stickyForm2015").removeClass("register");
updateSliderMargin();
}
});
</script>
<script>
$(window).on("scroll", function(){
if
($(window).scrollTop() > 2500){
$("#stickyForm2015").removeClass("register");
updateSliderMargin();
}
});
</script>
Open to suggestions!! Need help!

If you want to animate scroll with jquery you can just do:
$('html, body').animate({scrollTop: '0'}, 400);
If you want to animate with css you need to animate from something to something, your classes don't appear to be doing that.
.original-class{
position: relative;
top: 500px;
transition: top .4s ease-in-out; //only necessary if you plan on animating back
}
.animate-original-class{
top: 0;
transition: top .4s ease-in-out;
}