Develop Reference

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.

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

Growing DIVs on page load?

I wanna display a growing column when loading my website like this:
function init() {
document.getElementsByClassName('col')[0].style.height = '50px';
}
.col {
width: 20px;
min-height: 1px;
transition: height 0.5s ease-out 0s;
background-color: red;
}
<body onload="init()" >
<div class="col" ></div>
</body>
But as you can see it doesn't work. Would it theoretically help to have the onload-attribute placed in the attributes of the div? But that doesn't work, right?
I also could use keyframe animations, I guess. However, I actually have more column than one and all of them should grow to a different height. Therefore I would have to create a keyframe animation for each of my columns, which is kind of messy, I believe.
Does anyone know a clean solution to my problem? Thanks in advance...

This works. Need webkit for Chrome/Safair I believe. Pretty sure you can't animate from min-height either as min-height is not a height. CSS transitions only work from set value to set value.
function init() {
var d = document.getElementsByClassName('col')[0];
d.className = d.className + " col-animate";
}
.col {
width: 20px;
height: 1px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
background-color: red;
}
.col-animate {
height: 50px;
}
<body onload="init()" >
<div class="col" ></div>
</body>

It will be good to write like below example CSS to support more possible browsers
.col {
width: 20px;
height: 1px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s; // webkit - chrome safari
-o-transition: all 0.5s ease-out 0s; // Opera
-moz-transition: all 0.5s ease-out 0s; // Mozilla
background-color: red;
}

Fade one image into another using css or jquery

I need to be able to fade in a second image above the initial image on hover. I need to make sure that second image isn't visible initially until it fades in. The other important note is that neither of the images should fade out entirely at any time. I've tried several approaches such as using 1 image, 2 images, jquery animate and css transition.
I've read that it is possible to animate a change of attribute using jquery? If this is true, how could I animate the change of 'src' in img using jquery?
$(".image").mouseenter(function() {
var img = $(this);
var newSrc = img.attr("data-hover-src");
img.attr("src",newSrc);
img.fadeTo('slow', 0.8, function() {
img.attr("src", newSrc);
});
img.fadeTo('slow', 1);
}).mouseleave(function() {
var img = $(this);
var newSrc = img.attr("data-regular-src");
img.fadeTo('slow', 0.8, function() {
img.attr("src", newSrc);
});
img.fadeTo('slow', 1);
});
This is what i'm currently using. It's the closest i've gotten. But you can see the image change which is not desirable.

Using a single html element with background images
HTML - doesn't get simpler than this
<div id="imgHolder"></div>
CSS
#imgHolder {
width: 200px;
height: 200px;
display: block;
position: relative;
}
/*Initial image*/
#imgHolder::before {
content:"";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
background-image:url(http://placehold.it/200x200);
-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;
z-index:10;
}
#imgHolder:hover::before {
opacity:0;
}
#imgHolder::after {
content:"";
background: url(http://placehold.it/200x200/FF0000);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Demo
OR if you want to use image tags...
Stealing straight from: http://css3.bradshawenterprises.com/cfimg/
HTML
<div id="cf">
<img class="bottom" src="pathetoImg1.jpg" />
<img class="top" src="pathetoImg2.jpg" />
</div>
CSS
#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;
}
There are many other examples in the link as well to play with, but this will get you started.
Final Opacity
You've mentioned you don't want the initial image to disapear comletely. To do this change opacity:0 to opacity:0.5 or something similar. You'll need to experiment with that value to get the result you want.
Demo with final opacity of 0.8
Dynamic Image Sizes
I think you will be stuck with the two image version for this if just using CSS. HTML is the same.
CSS
#cf {
position:relative;
}
#cf img {
-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.bottom {
z-index:-1;
opacity:0;
position:absolute;
left:0;
}
#cf:hover img.top {
opacity:0.8;
}
#cf:hover img.bottom {
display:block;
opacity:1;
}
Demo

Swiping effect on background Images

Hi I would like to reproduce a sort a slider effect between background images like the website http://www.moveline.com/ does on the home page.
Example section bellow the title: "Mapping out the details for your next move".
I look at the code they use jQuery, RequireJS (2.1.4)
I try to isolate the code that is producing that effect but the JavaScript code has been compressed which make it really hard to understand (plus they use backbone).
Any idea how i could reproduce this nicely probably in jQuery with the help of some plugin?
Thank you

Here's a working fiddle for almost what they're doing on their site http://jsfiddle.net/y29kR/2/
Html:
<div class="items">
<div class="menu-item" data-look-at="0 0">item1</div>
<div class="menu-item" data-look-at="-40px -70px">item2</div>
<div class="menu-item" data-look-at="-120px -30px">item3</div>
</div>
<div class="menu-content"></div>
CSS with css transitions on background-position
.items {
float:left;
}
.menu-item {
padding: 15px;
color: #333;
border-bottom: 1px solid #ccc;
width: 70px;
}
.menu-content {
height: 150px;
width: 150px;
background-repeat: no-repeat;
background-image: url("http://placehold.it/350x350");
background-position: center center;
float:left;
-webkit-transition: background-position 600ms ease;
-moz-transition: background-position 600ms ease;
-o-transition: background-position 600ms ease;
}
I'm using jQuery's .css method to detect hover event to produce the (almost) desired effect:
jQuery(document).ready(function() {
$('.menu-item').hover(function(e) {
var target = $(e.target),
newPos = target.data("look-at");
$('.menu-content').css({'background-position': newPos});
});
$('.items').mouseleave(function(e) {
$('.menu-content').css({'background-position': 'center center'});
});
});