We Keep Coding

TranslateX to appear as animating

I am trying to use more css and less Javascript for animation. I am running into an issue animating three different boxes. I have the boxes fade in with opacity by adding the fadeShow class to bring the opacity to 1. However, I am wanting the boxes to appear as if they are animating from the left side of the page to the right.
Here is a fiddle that shows it in action:
Click here to see
.info-box {
border: 1px solid black;
padding: 50px;
background: #00f;
color: #fff;
display: inline;
margin: 0 100px;
transition: 1s;
opacity: 0;
}
.info-box.fadeShow {
opacity: 1;
transform: translateX(150px);
}
I am trying to make the boxes animate over 150px OR if there is a better way to do this to put the boxes into their perminent state. What I mean by this is, if the boxes are supposed to be at left: 25%;, left: 45%; and left: 65%;, then I would want the boxes to be 150px to the left of that and then transition into place.

Firstly, to have the boxes slide over from the left, you should apply the negative transformation to the .info-box class:
transform:translatex(-150px);
And then reset it in the .fadeShow class:
transform:initial;
Secondly, you have the display property of the .info-box class set to inline, you'll need to change that as transformations can't be applied to inline elements.
Finally, for performance purposes, it's best to explicitly state which properties you want to apply transitions to:
transition:opacity 1s,transform 1s;
Or:
transition-duration:1s;
transition-property:opacity,transform;

Without CSS animations and calc function:
window.addEventListener("scroll", function(event) {
var top, green, red, yellow;
top = this.scrollY;
green = document.querySelector("#green"),
red = document.querySelector("#red"),
yellow= document.querySelector("#yellow");
if(top > 100){
green.classList.add("green", "active");
red.classList.add("red", "active");
yellow.classList.add("yellow", "active");
}
}, false);
*{box-sizing:border-box; height: 400vh}
body{margin: 0; padding-top: 200px}
.box{
width: 150px;
height: 150px;
opacity:0;
position: absolute;
transform: translateX(-150px);
opacity:0
}
#green{
background: green;
left: 25%;
}
#red{
background: red;
left: 45%;
}
#yellow{
background: yellow;
left: 65%;
}
#green.green{transition: all .3s ease}
#red.red{transition: all .6s ease}
#yellow.yellow{transition: all .9s ease}
#green.active,
#red.active,
#yellow.active{opacity: 1;transform: translateX(0);}
<section>
<article>
<div id=green class=box></div>
<div id=red class=box></div>
<div id=yellow class=box></div>
</article>
</section>
With CSS animations and calc function:
*{box-sizing:border-box}
body{margin: 0; padding-top: 20px}
.box{
width: 150px;
height: 150px;
position: absolute
}
#green{
background: green;
left: 25%;
animation:slideinGreen .3s ease
}
#red{
background: red;
left: 45%;
animation:slideinRed .6s ease
}
#yellow{
background: yellow;
left: 65%;
animation:slideinYellow .9s ease
}
#keyframes slideinGreen {
from {
left: calc(25% - 150px); opacity: 0
}
}
#keyframes slideinRed{
from {
left: calc(45% - 150px); opacity: 0
}
}
#keyframes slideinYellow {
from {
left: calc(65% - 150px); opacity: 0
}
}
<section>
<article>
<div id=green class=box></div>
<div id=red class=box></div>
<div id=yellow class=box></div>
</article>
</section>
Now you can add EventTarget.addEventListener() and Element.classList
window.addEventListener("scroll", function(event) {
var top, green, red, yellow;
top = this.scrollY;
green = document.querySelector("#green"),
red = document.querySelector("#red"),
yellow= document.querySelector("#yellow");
if(top > 100){
green.classList.add("green", "active");
red.classList.add("red", "active");
yellow.classList.add("yellow", "active");
}
}, false);
*{box-sizing:border-box; height: 400vh}
body{margin: 0; padding-top: 200px}
.box{
width: 150px;
height: 150px;
opacity:0;
position: absolute
}
#green{
background: green;
left: 25%;
}
#red{
background: red;
left: 45%;
}
#yellow{
background: yellow;
left: 65%;
}
#green.green{animation:slideinGreen .3s ease}
#red.red{animation:slideinRed .6s ease}
#yellow.yellow{animation:slideinYellow .9s ease}
#green.active,#red.active,#yellow.active{opacity: 1}
#keyframes slideinGreen {
from {
left: calc(25% - 150px);opacity:0
}
}
#keyframes slideinRed{
from {
left: calc(45% - 150px);opacity:0
}
}
#keyframes slideinYellow {
from {
left: calc(65% - 150px);opacity:0
}
}
<section>
<article>
<div id=green class=box></div>
<div id=red class=box></div>
<div id=yellow class=box></div>
</article>
</section>

you need to set css transition to: transition: all 1s;
since you need to tell what properties you need to animate.
and using all means animate all css properties. also you need to set display: inline-block
.info-box {
border: 1px solid black;
padding: 50px;
background: #00f;
color: #fff;
display: inline-block;
margin: 0 100px;
transition:all 1s;
opacity: 0;
}

The transform isn't working because the child divs are set to display:inline.
Change that to inline-block.
JSfiddle Demo

CSS3 transition not working on JS scrollup fixed div transition

I was trying a javascript function to fix a part of header on scrollup. It's working fine but I want to make the movement of fixed part smooth by adding transition property of CSS3. I tried but its not working. Request your help plz.
window.onscroll = myFunction;
function myFunction() {
if(document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
document.getElementById("hdr_nav").style.position = "fixed";
} else {
document.getElementById("hdr_nav").style.position = "";
}
}//end function
*{margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; }
body {height: 3000px;}
.hdr_box {float: left; width: 100%; height: 65px; background: #eff1f2; position: relative; padding: 0; margin: 0;}
.hdr_box > .row1 {
float: left;
width: 100%;
height: 20px;
padding: 15px;
}
nav {
float: left;
width: 100%;
height: auto;
background: #e4e6e8;
position: relative;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
}
nav ul {
list-style: none;
float: left;
width: 100%;
padding: 0;
margin: 0;
}
nav ul li {
float: left;
width: auto;
border-right: solid 1px #cacaca;
}
nav ul li a {
float: left;
width: auto;
padding: 16px;
text-align: center;
font-size: 14px;
}
<div class="hdr_box" id="hdr">
<div class="row1" id="hdr_row1"><h3>CompanyName</h3></div>
</div>
<nav id="hdr_nav">
<ul>
<li>About Us</li>
<li>Business</li>
<li>Our Work</li>
<li>Challenges</li>
</ul>
</nav>

That is because you change the position property from absolute to fixed and that can't be animated / transitioned. Transitions only work for properties with a unit, eg. px, rem, %, or stuff like opacity.
You can fix it however with a keyframe animation:
nav.is-fixed {
position: fixed;
animation: scroll .5s ease-out;
}
#keyframes scroll {
from {
transform: tranlateY(-100%);
}
to {
transform: tranlateY(0%);
}
}
Make sure to prefix #keyframes and transform if needed.
And a little change to the JS:
window.onscroll = myFunction;
function myFunction() {
var scrollAmount = document.body.scrollTop || document.documentElement.scrollTop;
var nav = document.getElementById("hdr_nav");
if(scrollAmount > 200) {
nav.classList.add('is-fixed');
} else {
nav.classList.remove('is-fixed');
}
}
https://jsfiddle.net/41nspon8/3/

add new CSS rule
.nav-fixed {
position: fixed;
-webkit-animation: slideInDown 450ms 1 ease-in-out;
}
#-webkit-keyframes slideInDown {
from {transform: translate(0%, -100%); }
to {transform: translate(0%, 0%); }
}
modify your js code
//document.getElementById("hdr_nav").style.position = "fixed";
document.getElementById("hdr_nav").classList.add("nav-fixed");
} else {
//document.getElementById("hdr_nav").style.position = "";
document.getElementById("hdr_nav").classList.remove("nav-fixed");
https://jsfiddle.net/13m8u7xm/

Fixed header shaking when scrolling down

When I use a fixed header, it's shaking when adding my is-sticky
CSS class. It's starting with top:0; for it's animation when scrolling down. I want it to stay fixed smoothly on top in a way that will not cause noticeable jitter. For Example: http://www.lazada.com.my/
Here is my demo.
$(window).load(function(){
$(window).scroll(function(){
if($(window).scrollTop()>0){
if( ! ($('#scroller').hasClass('is-sticky'))) {
$('#scroller')
.addClass('is-sticky')
.css('top',9)
.animate({
'top': 84
},'1000');
}
} else {
if($('#scroller').hasClass('is-sticky')) {
$('#scroller')
.removeClass('is-sticky')
.css('top',9)
.animate({
'top':84
},1000);
}
}
});
});
body{
height:1000px;
margin:0;
padding:0;
position:relative;
}
#scroller {
position: absolute;
left: 0;
top: 84px;
width: 100%;
z-index: 30;
background:#CCC;
height:20px;
}
#scroller.is-sticky {
position: fixed;
width: 100%;
left: 0;
top: 9px;
margin-top: -31px;
height: 53px;
z-index: 701;
background: #CCC;
opacity: .97;
filter: alpha(opacity = 97);
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<body>
<div id="scroller">Some controls</div>
</body>

The effect, from the website you linked, is actually quite easy to do.
Firstly, you want your header element to have position: fixed; there is no need to add this dynamically via javascript. It should have this property by default (as it shows in the website you linked).
What they are doing is hiding the top navigation which is within the header at a certain scroll point.
You can use jquery to do this very simply.
DEMO
var $el = $('header .two');
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$el.addClass('hide');
} else {
$el.removeClass('hide');
}
});
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
header .one {
height: 20px;
width: 100%;
background: lime;
position: relative;
z-index: 10;
}
header .one.hide {
height: 0;
}
header .two {
background: red;
height: 40px;
position: relative;
z-index: 20;
-webkit-transition: -webkit-transform .25s;
transition: transform .25s;
}
header .two.hide {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
main {
background: lightblue;
height: 1200px;
width: 100%;
padding-top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<div class="one">div</div>
<div class="two">fixed</div>
</header>
<main>
content
</main>
<footer>footer</footer>

You have to check .scrollTop when is reached to 84. In addition, you don't need to use jquery .animate function, you can achieve that effect by css transition.
Jsfiddle

You can create a fixed navbar and divide it into two parts vertically and when user scroll just hide the above part with .slideUp() animation and when user again scrolls on top show it with .slideDown() animation.
Here is the code :
$(window).load(function(){
$(window).scroll(function(){
if($(window).scrollTop()>0){
//check if it is visisble
if($('#nav-part-to-hide').is(':visible')) {
//if yes then lets hide it
$('#nav-part-to-hide').slideUp();
}
} else {
if(!$('#nav-part-to-hide').is(':visible')) {
$('#nav-part-to-hide').slideDown();
}
}
});
});
body
{
height:1000px;
}
#sticky-navbar
{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
}
#nav-part-to-hide
{
height:40px;
width:100%;
background:#333;
color:#fff;
}
#nav-part-stays
{
height:40px;
width:100%;
background:#bbb;
color:#333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="sticky-navbar">
<div id="nav-part-to-hide">
this conetent hides
</div>
<div id="nav-part-stays">
this conetent stays on page
</div>
</div>
</body>

Animating background color, pulse effect

I have made a script for animating my menu li element after mouseovering the a element inside it.
Everything works fine, but I want something else. I want the effect not to disappear but to linger as long as the mouse is over the a element.
What function to use?
Script so far:
jQuery(document).ready(function($){
$(".main-navigation a").mouseover(function() {
$(this).parent().animate({
backgroundColor: "green"
}, "normal"),
$(this).parent().animate({
backgroundColor: "transparent"
})
.mouseleave(function() {
$(this).parent().animate({
backgroundColor: "transparent"
}, "normal")
});
});
});
http://jsfiddle.net/neugu8r9/

You could do this using CSS's #keyframes without jQuery.
ul {
position: relative;
width: 250px;
height: 50px;
padding: 0;
margin: 0;
list-style: none;
}
li a {
width: 100%;
height: 100%;
line-height: 50px;
text-align: center;
}
li a:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
display: block;
z-index: -1;
}
li {
position: relative;
height: 50px;
width: 250px;
text-align: center;
border: 1px solid black;
}
a:hover:before {
-webkit-animation: pulse 0.8s ease-in-out infinite alternate;
animation: pulse 0.8s ease-in-out infinite alternate;
}
#-webkit-keyframes pulse {
0% {
background: transparent;
}
50% {
background: green;
}
100% {
background: transparent;
}
}
#keyframes pulse {
0% {
background: transparent;
}
50% {
background: green;
}
100% {
background: transparent;
}
}
<nav class="main-navigation">
<ul>
<li><a>Menu-item#1</a></li>
<li><a>Menu-item#2</a></li>
<li><a>Menu-item#3</a></li>
<li><a>Menu-item#4</a></li>
</ul>
</nav>

Here is the Full jQuery solution for you buddy, hope it helps:=)
jQuery(document).ready(function($){
var intervalID;
$(".main-navigation ul li a").hover(function(){
var that = $(this);
var opacityToggle = function(){
if(!that.children('.green').length){
$(that).prepend('<span class="green"></span>');
$('.green').animate({opacity:1},500);
}
else if(that.children('.green').length){
$('.green').animate({opacity:0},500,function(){
$('.green').remove();
});
}
}
intervalID = setInterval(opacityToggle, 500);
},function(){
$('.green').remove();
clearInterval(intervalID);
intervalID = 0;
});
});
ul{
list-style:none;
}
li a {
height:100%;
text-align:center;
position:relative;
width:inherit;
display:block;
}
li {
height: 50px;
width: 250px;
text-align: center;
border: 1px solid black;
}
.green{
position:absolute;
background-color:green;
width:100%;
height:100%;
display:block;
opacity:0;
z-index:-1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-navigation">
<ul>
<li><a>Menu-item#1</a></li>
<li><a>Menu-item#2</a></li>
<li><a>Menu-item#3</a></li>
<li><a>Menu-item#4</a></li>
</ul>
</nav>

Jquery color change slowly

Is there any way to change color of my div container slowly. When i move my cursor over details text then there is a mousehover method which changes the color of container to black but i need to do it bit slow. Is there any way to slow down the transition. This is my code
<div id="wrapper">
<div id="mainContainer">
<p class="copy">Disclaimer.</p>
<div id="text">
<img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" />
</div>
<div id="headlineText">
<p id="headline1Txt" >Striped Bag</p><br />
<p id="headline2Txt" >$14</p><br />
<p id="headline3Txt" >Sale $25</p><br />
</div>
<div id="Div1">
<p id="disclaimer">Details*</p>
</div>
<div id="ctaBtn">
<button class="btn btn-primary" type="button"><div id="fadeIn"> Learn More </div></button>
</div>
</div>
</div>

you must add css transition to .hovered class and you can't add display:none to #disclaimer after hover it ...
i changed your code, you can see it on JSFIDDLE
CSS:
#wrapper {
width: 300px;
height:250px;
position: absolute;
top: 2px;
left: 0px;
}
#Div1 {
top:143px;
left:233px;
width:50px;
height:10px;
position: absolute;
}
#mainContainer {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:5px solid #BACAE4;
width:300px;
height:250px;
overflow: hidden;
position: fixed;
}
#headline1Txt
{ color: transparent;
top:40px;
position:absolute;
overflow: hidden;
margin:60px 2px;
font-size:26px;line-height: 1.5;
left:12px;
}
#headline2Txt
{
top:60px;
position:absolute;
overflow: hidden;
margin:60px 2px;
left: -150px;
font-size:21px;line-height: 2.0;
}
#headline3Txt
{
top:80px;
position:absolute;
overflow: hidden;
margin:60px 2px;
left: -150px;
font-size:21px;line-height: 2.0;
}
#Image_Car {
position:absolute;
overflow: hidden;
margin:60px 8px;
top:-40px;
left: -120px;
width:150px;
height:100px;
}
#ctaBtn{
top:200px;
left:11px;
width:120px;
height:23px;
position:absolute;
}
/* new css */
.copy {display: none;color: white; padding: 10px;}
.hovered .copy { display: block; }
.hovered #mainContainer { background: black; border-color: black;}
.hovered #Image_Car { display: none; }
.hovered #ctaBtn { display: none; }
.hovered #headlineText { display: none; }
.hovered #disclaimer { display: none4; }
.hovered #mainContainer{
-moz-transition-property:background,opacity,display,border-color,background-color;
-moz-transition-timing-function:ease-in-out;
-moz-transition-duration:0.4s;
-webkit-transition-property:background,opacity,display,border-color,background-color;
-webkit-transition-timing-function:ease-in-out;
-webkit-transition-duration:0.4s;
-o-transition-property:background,opacity,display,border-color,background-color;
-o-transition-timing-function:ease-in-out;
-o-transition-duration:0.4s;
transition-property:background,opacity,display,border-color,background-color;
transition-timing-function:ease-in-out;
transition-duration:0.4s;
}
JQUERY:
$(document).ready(function () {
bannerAnimation();
});
function bannerAnimation() {
//Jquery Animation
$("#Image_Car").animate({
left: "100"
}, 500
, function () {
$("#Image_Car").animate({
left: "50"
}, 200);
}
);
};
$("#headline1Txt").css('color', 'red');
//$("#headline1Txt").html("New Text").fadeIn("slow");
$("#headline1Txt").fadeIn(3000);
setTimeout(function () {
$("#headline2Txt").animate({ left: "20" }, 500, function () {
$("#headline3Txt").animate({ left: "20" }, 500, function () {
$("#headline3Txt").animate({ left: "10" }, 200);
});
$("#headline2Txt").animate({ left: "10" }, 200);
$('#fadeIn').text("");
button_effect();
});
}, 1000);
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hovered');
}, function () {
$('#wrapper').removeClass('hovered');
}
);
function button_effect()
{
var string = "Learn More";
var q = jQuery.map(string.split(''), function (letter) {
return $('<span>' + letter + '</span>');
});
var dest = $('#fadeIn');
var c = 0;
var i = setInterval(function () {
q[c].appendTo(dest).hide().fadeIn(200);
c += 1;
if (c >= q.length) clearInterval(i);
}, 30);
}
but i thinks it's better that use css :hover selector to do that

You can acheive this using jquery and jquery UI.
Code:
$("#disclaimer").hover(function () {
console.log("hi");
$("#wrapper").fadeIn("slow").animate({
backgroundColor: 'black'
});
});
Fiddle : http://jsfiddle.net/w9LHU/

CSS Class
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: green;
cursor: pointer;
}
HTML CODE
<div class="box"></div>
Sample JS FIddle
Sample

check you may need another div above this
check this code http://jsfiddle.net/veDY6/76/
<div id="hidderDiv">
</div>
and give css as background black and manage its opacity on hover

Apply css3 transition propery on your div.
check this link : http://css-tricks.com/almanac/properties/t/transition/
Please add this is on your css
#wrapper {
width: 300px;
height:250px;
position: absolute;
top: 2px;
left: 0px;
-webkit-transition: background-color 1s ease-out 2s;
-moz-transition: background-color 1s ease-out 2s;
-o-transition: background-color 1s ease-out 2s;
transition: background-color 1s ease-out 2s;
}
and appned this code into your js
$("#headlineText").hover(function(){
$("#wrapper").css("background-color","#000");
},function(){
$("#wrapper").css("background-color","#fff");
});