We Keep Coding

trying to add a class to a div when it is in view

I am VERY very new to JavaScript or any code other than html for that matter. I found a script that worked for what I needed. But it only seems to work on Firefox. In Firefox when the element scrolled into view it adds the .animate and .slideToLeft classes to the div. The CSS is from animate.css.
Why won't it work in chrome?
Code
function isElementInViewport(elem) {
var $elem = $(elem);
// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('move_Damn') != -1) ? 'body' : 'html');
var viewportTop = $(scrollElem).scrollTop();
var viewportBottom = viewportTop + $(window).height();
// Get the position of the element on the page.
var elemTop = Math.round($elem.offset().top);
var elemBottom = elemTop + $elem.height();
return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
// Check if it's time to start the animation.
var $elem = $("maybe");
function checkAnimation() {
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('animated', 'slideInLeft');
} else {
$elem.removeClass('animated', 'slideInLeft');
}
}
// Capture scroll events
$(window).scroll(function() {
checkAnimation();
});
#move_Damn {
width: 50px;
height: 50px;
background: #f00;
padding: 3px;
text-align: center;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.slideInLeft {
animation-name: slideInLeft;
}
#keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="move_Damn" class="wontWork">
why not
</div>

The problem is how you're adding the classes
Change this
$elem.addClass('animated', 'slideInLeft');
To this
$elem.addClass('animated slideInLeft');
function isElementInViewport(elem) {
var $elem = $(elem);
// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('move_Damn') != -1) ? 'body' : 'html');
var viewportTop = $(scrollElem).scrollTop();
var viewportBottom = viewportTop + $(window).height();
// Get the position of the element on the page.
var elemTop = Math.round($elem.offset().top);
var elemBottom = elemTop + $elem.height();
return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
// Check if it's time to start the animation.
var $elem = $("#move_Damn");
function checkAnimation() {
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('animated slideInLeft');
} else {
$elem.removeClass('animated slideInLeft');
}
}
// Capture scroll events
$(window).scroll(function() {
checkAnimation();
});
#move_Damn {
width: 50px;
height: 50px;
background: #f00;
padding: 3px;
text-align: center;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.slideInLeft {
animation-name: slideInLeft;
}
#keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="move_Damn" class="wontWork">
why not
</div>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

How to animate cloned element?

What i want to do is looped horizontaly text slider.
My attempt - when end of text is displayed, clone this element move to right end and play animation for cloned element again - but i can't achieve that because for some reason cloned element don't want to animate.
This is chrome only app
Here is jsfiddle.
CSS
#elm {
width: 100px;
height:20px;
overflow: auto;
overflow-y: hidden;
position:absolute;
top:10px;
left:10px;
}
#elm::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
#elm .inner-elm {
position:absolute;
white-space: nowrap;
}
HTML
<div id="elm">
<div class="inner-elm"> 11111111 2222222 333333 4444444</div>
</div>
JS
var elm_right = $('#elm').offset().left + $('#elm').outerWidth();
var settings = {
duration: 5000,
easing: 'linear',
step: function() {
var this_right = $(this).offset().left + $(this).outerWidth();
// make some clone
if(!$(this).hasClass('cloned') && ((this_right + 50) < elm_right)) {
$(this).addClass('cloned');
var clone = $(this).clone(true);
clone.addClass('cloned')
.css('left', $('#elm').width())
.appendTo('#elm')
.animate({right:100}, settings);
}
// remove parent
if( (this_right - 20) < $('#elm').offset().left) {
$(this).remove();
}
}
};
var that = $('#elm .inner-elm');
that.animate({right: that.outerWidth()}, settings);

You could use CSS3 transitions for a simple animation like this. fiddle
var interval = 2000;
var nextTimeout = 200;
var wrapper = $('#elm');
var elem = $('.inner-elm', wrapper);
elem.addClass('move');
setInterval(function(){
var clone = elem.clone(true);
elem.remove();
elem = clone;
elem.removeClass('move');
wrapper.append(elem);
setTimeout(function(){
elem.addClass('move');
}, nextTimeout);
}, interval);
#elm {
height:20px;
overflow: auto;
overflow-y: hidden;
position:absolute;
top:10px;
left:10px;
}
.inner-elm{
transition: all 2s linear;
-ms-transform: translate(110%, 0); /* IE 9 */
-webkit-transform: translate(110%x, 0); /* Safari */
transform: translate(110%, 0);
}
.move{
-ms-transform: translate(-130%, 0); /* IE 9 */
-webkit-transform: translate(-130%, 0); /* Safari */
transform: translate(-130%, 0);
}
#elm::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
#elm .inner-elm {
position:relative;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="elm">
<div class="inner-elm">Stackoverflow</div>
</div>

style conflict between javascript and css

I have built a little element 3d rotator for infinite rotating in either direction on the X or Y axis. However I am running into what I think is a css style conflict. #face2 has a css property that rotates it -180deg . however its not being implemented by the browser.
is this a css conflict perhaps?
you can see the code and the effect in this code pen :
//declaring global variables
window.RotXFrontVal = 0; // by how much to rotate the X value of the front face
window.RotXBackVal = -180; // by how much to rotate the X value of the back face
window.RotYFrontVal = 0; // by how much to rotate the Y value of the front face
window.RotYBackVal = 180; // by how much to rotate the Y value of the back face
$(document).ready(function() {
//$('#face2').css({'transform': 'rotateX(-180deg)'}, 0);
//$('#face2').animate({'transform', 'rotateX(-180deg)'}, 0);
//$('#face2').animate({'transform': 'rotateX(-180deg)'}, 0);
var MyDivSlider = function() { // Here will come the Div Slider by Scroll
var scl = $.now(); // Take a time stamp to prevent function from triggering too often
$(document).on('DOMMouseScroll mousewheel', function MyScroll(event) {
if (($.now() - scl) > 500) {
if (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0) {
//Scroll Down
window.RotXFrontVal = window.RotXFrontVal - 180;
window.RotXBackVal = window.RotXBackVal - 180;
console.log("Down. Front: " + RotXFrontVal + "and" + RotXBackVal + " is Back");
}
//Up Scroll
else {
window.RotXFrontVal = window.RotXFrontVal + 180;
window.RotXBackVal = window.RotXBackVal + 180;
console.log("Up. Front: " + RotXFrontVal + "and" + RotXBackVal + " is Back");
}
$('#face2').css('transform', 'rotateX(' + RotXBackVal + 'deg)');
$('#face1').css('transform', 'rotateX(' + RotXFrontVal + 'deg)');
console.log('rotateX(' + RotXFrontVal + ')')
console.log('rotateX(' + RotXBackVal + ')')
scl = $.now();
}
});
}();
});
body { height:100%; overflow:hidden;}
#card {
height:300px;
width: 300px;
display: block;
position: relative;
transform-style: preserve-3d;
transition: all 1.5s linear;
perspective: 1000px;
}
#face1 {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: red;
backface-visibility: hidden;
transition: transform 1.5s;
z-index: 2;
}
#face2 {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: blue;
backface-visibility: hidden;
transition: transform 1.5s;
z-index: 1;
transform: rotateX ( -180deg );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<div id="card">
<div id = "face1">Use the mouse scroll button to rotate me</div>
<div id = "face2">Use the mouse scroll button to rotate me</div>
</div>
</body>

It's because of the whitespace inbetween rotateX and (
try: transform: rotateX( -180deg );

Slide Background Image

have 3 images using JavaScript am making them to slide from left to right for the body background of html but the images are just appearing is there any thing i have to do so that they smoothly slide.
FYI: I have added a div to Preview.
Hear is the
JSFiddle
var bgArr = [
"http://foxarc.com/en/cfxs/images/masks.jpg",
"http://foxarc.com/en/cfxs/images/brushes.jpg",
"http://foxarc.com/en/cfxs/images/text.jpg"
];
var i = 0;
// Start the slide show
setInterval(function() {
$("#demo").css("background-image", "url(" + bgArr[i] + ")");
(i < bgArr.length - 1) ? i++ : i = 0
}, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div
id="demo"
style="text-align:center;
width:90%;
height:310px;
overflow:hidden;
border-style:dashed;
border-width:1px;">
<p style="margin-top:83px;"></p>
</div>

I think the best solution is to create 2 divs inside of body
<div class="background-1"></div>
<div class="background-2"></div>
and put them under it
body {
position: relative;
background: transparent;
overflow-x: hidden;
}
.background-1, .background-2 {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
Then create a custom slider
$(document).ready(function(){
var bgArr = ["http://foxarc.com/en/cfxs/images/masks.jpg",
"http://foxarc.com/en/cfxs/images/brushes.jpg",
"http://foxarc.com/en/cfxs/images/text.jpg"];
var i = 0;
var $bg1 = $('.background-1').css('background-image', 'url('+bgArr[0]+')')
.css('left', '0%');
var $bg2 = $('.background-2').css('background-image', 'url('+bgArr[1]+')')
.css('left', '-100%');
var bgSlide = function($bg) {
$bg.animate({ left: '+=100%' }, 600, function(){
if(parseInt($bg.css('left')) > 0) {
$bg.css('left', '-100%');
(i < bgArr.length-1) ? i++ : i=0;
$bg.css("background-image", "url("+bgArr[i]+")");
}
} );
}
setInterval(function() {
bgSlide($bg1);
bgSlide($bg2);
}, 2000);
});
Example: jsfiddle

See this example https://jsfiddle.net/kevalbhatt18/0Lr9uvt0/1/ with animate()
without animate() : https://jsfiddle.net/kevalbhatt18/0Lr9uvt0/2/
What is .animate()
See this example https://jsfiddle.net/kevalbhatt18/0Lr9uvt0/5/ in this example i use jquery ui for left right effect
$('.test').css({
'background-image': "url('" + bgArr[i] + "')"
});
(i < bgArr.length - 1) ? i++ : i = 0
}, 2000);
And apply css
.test{
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}

Ball roll animation using jquery or CSS3

Is it possible to change this code so that the balls rolled out.
but:
Indicate the number of balls (for example 10).
Once rolled out one ball and stopped, then rolls out the next ball
(and gets close to another).
And that they rolling from the right side to the left side.
html
<div id="balls">
<img src="http://i058.radikal.ru/1407/0d/33cc119c6686.png" id="ball" />
</div>
css
body {
background: #383838;
}
#balls {
position: absolute;
}
#balls img {
position: absolute;
}
#ball {
width: 90px;
height: 90px;
left: 170px;
top: 45px;
}
jQuery
var diameter = $('#ball').height(),
perimeter = Math.PI * diameter;
var goLeft;
var times = 0;
var to = [600, 600];
function moveBalls() {
goLeft = !goLeft;
times++;
if (times > to.length) {
return false;
}
$('#balls').animate({
right: to[times]
}, {
duration: 2000,
step: rotateBall,
complete: moveBalls
});
}
moveBalls();
function rotateBall(distance) {
var degree = distance * 360 / perimeter;
$('#ball').css('transform', 'rotate(' + degree + 'deg)');
}
Example Here

jsBin demo
To get a better result you should have 3 elements for ball:
one that moves right with a static light source and shadow
rotate the inner DIV element
a SPAN with number -> inside the rotating DIV.
Use CSS3 transitions like I did.
<div id="balls">
<div class="ball blue"> <!-- THIS ONE JUST MOVES RIGHT -->
<div><span>7</span></div> <!-- THIS ONE ROTATES -->
</div>
<!-- MORE BALLS HERE -->
</div>
Following the above logic the CSS ends up being quite trivial:
.ball{
position:absolute;
left:-100px;
width:90px;
height:90px;
background:#004E99;
border-radius:50%;
box-shadow: 20px 30px 30px -10px rgba(0,0,0,0.4);
}
.ball>div{
position:absolute;
width:100%;
height:100%;
border-radius:50%;
}
.ball>div>span{
position:absolute;
left:23px;
top:14px;
width:45px;
height:45px;
border-radius:50%;
text-align:center;
line-height:45px;
font-size:24px;
font-weight:bold;
background:#fff;
}
/* YOUR COLORS */
.ball.blue{ background: radial-gradient(circle at 20px 20px, #09f, #001);}
JS/jQ:
var $ball = $('#balls > div'),
diameter = $ball.height(),
perimeter = Math.PI * diameter,
n = $ball.length,
i = 0,
itv;
itv = setInterval(function(){
if(i>n)clearInterval(itv);
rotateBall( 500-(diameter*i) );
i++;
},2000);
function rotateBall(distance) {
var degree = distance * 360 / perimeter;
$ball.eq(i).css({
transition: "2s",
transform: 'translateX('+ distance +'px)'
}).find('div').css({
transition: "2s",
transform: 'rotate('+ degree +'deg)'
});
}