Develop Reference

Run animation when element is visible - custom javascript

I am creating a website with few animation, below is the piece of javascript and css which is revealing image from left to right
var i = 0;
var interval = setInterval(function () {
$('.mask').width(i + "%");
i++;
if (i == 101) {
clearInterval(interval);
}
}, 20);
.mask {
background:white;
max-width: 640px;
z-index:1;
height: 426px;
position: relative;
overflow: hidden;
}
.img {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mask">
<div class="img">
<img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
</div>
</div>
and then an javascript which reveals image from right to left.
var i = 0;
var interval = setInterval(function () {
$('.mask3').css({ left: -i + "%" });
i++;
if (i === 0) {
clearInterval(interval);
}
}, 20);
.wrapper {
width: 640px;
height: 430px;
position: relative;
}
.mask3 {
position: absolute;
top: 0;
left: 0;
background:white;
width: 100%;
height: 100%;
z-index:1;
}
.img {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="mask3">
</div>
<div class="img">
<img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
</div>
</div>
Now I am trying to load this animation only when div is being displayed, or user scroll down to specific div, and then the animation shall roll back.
I tried few of the scripts, but all of them guided to use if else statement although I am not able to pick anything which is working, can someone please help me out on this one.

This is a very rough answer, but you can do this if you want. You will still need to work on your animation function more to make it hide and then display based on how you want it to be.
var elem = $('.img'); //use a better identifier like an id.
var counter = 0
elem.hide();
function myAnimation() {
elem.show();
var i = 0;
var interval = setInterval(function () {
$('.mask').width(i + "%");
i++;
if (i == 101) {
clearInterval(interval);
}
}, 20);
counter++;
}
$(window).scroll(function(){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && counter < 1) {
myAnimation();
}
});
The counter is basically to animate it once, because you will trigger this animation on every scroll.

Show/hide div on scroll with JQuery WordPress

I have a div with a social bar at the bottom of the screen on my site but I want to display it only after the user scrolls a little and hide it once the user is about to reach the footer. So around 200px before the page ends.+
This is my div:
<div class="sticky-bar-hr">
.......
</div>
This is my CSS:
.sticky-bar-hr{
display: none;
}
And this is the JQuery I am trying:
<script>
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.sticky-bar-hr').fadeOut();
} else {
$('.sticky-bar-hr').fadeIn();
}
});
</script>
But it does not work. The problem seems to be that the function is not being called. I am setting the script in my homepage HTML in Wordpress
Any help?
Thanks in advance

Try this
$(window).scroll(function() {
var y = $(this).scrollTop();
if(y<200) {
$('.sticky-bar-hr').fadeOut();
}
if (y > 200) {
$('.sticky-bar-hr').fadeIn();
}
if(y+ $(this).height() == $(document).height()) {
$('.sticky-bar-hr').fadeOut();
}
});
body {
height: 2000px;
}
.sticky-bar-hr {
position:fixed;
bottom: 0;
width: 100%;
height: 50px;
background:#000;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sticky-bar-hr">

This is because you have inverted fadeIn and fadeOut.
Here is a working snippet:
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.sticky-bar-hr').fadeOut();
} else {
$('.sticky-bar-hr').fadeIn();
}
});
.sticky-bar-hr{
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sticky-bar-hr">
.......
</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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Horizontal scroll at the middle of the page

I want to change the scroll direction at the middle of the page.
I tried to do it with "jInvertScroll", but this plugin increase left in css, like that:left: /* increase on scroll */ px ;
So if I want to change the scroll direction to the middle of the page, left will already have a value like:left: -1500px;
That's my problem.
Is there another way to do it?
HTML :
<div class="vertical"></div>
<div class="menu-change"></div>
<div class="horizontal">
<p>scroll</p>
</div>
CSS :
body {
overflow-x: hidden;
padding: 0;
margin: 0;
}
.scroll {
position: fixed;
bottom: 0;
left: 0;
}
.vertical {
width: 100vw;
height: 2500px;
background-image: url(https://source.unsplash.com/random);
}
.horizontal {
width: 8500px;
height: 100vh;
background-image: url(https://source.unsplash.com/random);
}
JS :
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('.menu-change');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('.horizontal').addClass('scroll');
var elem = $.jInvertScroll(['.scroll'],
{
onScroll: function(percent) {
console.log(percent);
}
});
$(window).resize(function() {
if ($(window).width() <= 0) {
elem.destroy();
}
else {
elem.reinitialize();
}
});
} else {
$('.horizontal').removeClass('scroll');
}
});
});

how to set jquery slider on auto instead of click or hover on thumbs

i am new learner of jquery and javaScript.
i want to create a slider with a big image section and a section of thumbs.
slider should slide automatically i have coded so far is working on click or hover but i dont know how to set it on auto please help me how to modify my code. code and slider screen shoot is given below.
slider image
$("document").ready(function()
{
$("#thumbs a").mouseenter(function()
{
var smallimgpath = $(this).attr("href");
$("#bigimage img").fadeOut(function()
{
$("#bigimage img").attr("src",smallimgpath);
$("#bigimage img").fadeIn();
});
return false;
});
});
</script>
#imagereplacement{
border: 1px solid red;
width:98%;
height:400px;
margin:auto;
padding-top:8px;
padding-left:10px;
}
#imagereplacement p{
text-align:inline;
}
#bigimage{
/* border: 1px solid green; */
margin:auto;
text-align:center;
float: left;
}
#thumbs{
/*border: 1px solid yellow;*/
margin: 110px 10px;
text-align:center;
width:29%;
float: right;
}
#thumbs img{
height:100px;
width:100px;
}
//This is where all the JQuery code will go
</head>
<body>
<div id="imagereplacement">
<p id="bigimage">
<img src="images/slider1.jpg">
</p>
<p id="thumbs">
<img src="images/slider1.jpg">
<img src="images/slider2.jpg">
<img src="images/slider3.jpg">
</p>

try with this example, please let me know in case of any more question from you :
$("document").ready(function(){
var pages = $('#container li'),
current = 0;
var currentPage, nextPage;
var timeoutID;
var buttonClicked = 0;
var handler1 = function() {
buttonClicked = 1;
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if ($(this).hasClass('prevButton')) {
if (current <= 0)
current = pages.length - 1;
else
current = current - 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", -604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {
currentPage.hide();
});
currentPage.animate({
marginLeft: 604
}, 800, function() {
$('#container .button').bind('click', handler1);
});
} else {
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
}
}
var handler2 = function() {
if (buttonClicked == 0) {
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
}
}
$('#container .button').click(function() {
clearTimeout(timeoutID);
handler1();
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
});
* {
margin: 0;
padding: 0;
}
#container {
width: 604px;
height: 453px;
position: relative;
}
#container .prevButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: left top;
left: 0
}
#container .prevButton:hover {
background-position: left bottom;
left: 0;
}
#container .nextButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: right top;
right: 0
}
#container .nextButton:hover {
background-position: right bottom;
right: 0;
}
#container ul {
width: 604px;
height: 453px;
list-style: none outside none;
position: relative;
overflow: hidden;
}
#container li:first-child {
display: list-item;
position: absolute;
}
#container li {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h1>HTML Slideshow AutoPlay (Slide Left/Slide Right)</h1>
<br />
<br />
<div id="container">
<ul>
<li><img src="http://vietlandsoft.com/images/picture1.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture2.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture3.jpg" width="604" height="453" /></li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>
</center>

Here an example i've created that create an auto slider CodePen Demo and JSFiddle Demo
I've used an object literal pattern to create slide variable just to avoid creating many global function and variable. Inside document.ready i've initialised my slider just by calling slide.init({....}) this way it makes it easy to reuse and work like plugin.
$.extend(slide.config,option)
this code in simple words override you're default configuration defined in config key
as i mentioned in my above comment make a function slider() and place seTimeout(slide,1000) at bottom of your function before closing
Here in this code its done in animate key of slide object it is passed with two parameter cnt and all image array, If cnt is greater then image array length then cnt is set to 0 i.e if at first when cnt keeps on increment i fadeout all image so when i make it 0 the next time the fadeToggle acts as switch
if On then Off
if Off the On
and calling function slider after a delay makes it a recursive call its just one way for continuously looping there are many other ways i guess for looping continuous you can try
well i haven't check if all images Loaded or not which is most important in slider well that you could try on your own.
var slide = {
'config': {
'container': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'linear'
},
init: function(option) {
$.extend(slide.config, option);
var imag = slide.getImages();
slide.animate(0, imag);
},
animate: function(cnt, imag) {
if (cnt >= imag.length) {
cnt = 0;
}
imag.eq(cnt).fadeToggle(slide.config.fade, slide.config.easing);
setTimeout(function() {
slide.animate(++cnt, imag);
}, slide.config.delay);
},
getImages: function() {
return slide.config.container.find('img');
}
};
$(document).ready(function() {
slide.init({
'contianer': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'swing'
});
})
body {
margin: 0;
padding: 0;
}
.contianer {
width: 100%;
height: 100%;
position: relative;
}
.container > div,
.container > div >img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="slideX">
<div id="img1">
<img src="http://imgs.abduzeedo.com/files/articles/magical-animal-photography-gregory-colbert/5.jpg" />
</div>
<div id="img2">
<img src="http://cdn-5.webdesignmash.com/trial/wp-content/uploads/2010/10/great-dog-photography-016.jpg" />
</div>
<div id="img3">
<img src="http://onlybackground.com/wp-content/uploads/2014/01/marble-beautiful-photography-1920x1200.jpg" />
</div>
</div>

Using Parallax with Image Slideshow

I'm trying to create a parallax effect with a simple slideshow that I made.
First, I have one with just the basic parallax.js implementation:
fiddle: https://jsfiddle.net/jzhang172/bcdkvqtq/1/
.parallax-window {
min-height: 400px;
position:relative;
}
.ok{
font-size:50px;
background:gray;
color:blue;
height:300px;
width:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="parallax-window" data-parallax="scroll" data-image-src="http://vignette4.wikia.nocookie.net/pokemon/images/5/5f/025Pikachu_OS_anime_11.png/revision/latest?cb=20150717063951g">
</div>
<div class="ok">Hey there</div>
This works, however, now I want this effect on image slideshow, with or without parallax.js is fine but I would like the same parallax effect:
I'm not sure how to apply it to the images:
fiddle: https://jsfiddle.net/jzhang172/k4fygvhg/1/
$(document).ready(function() {
var slides = $('.featured-wrapper img');
var slideAtm = slides.length;
var currentPos = 0;
slides.hide();
function roll(){
var slide = slides.eq(currentPos);
slide.fadeIn(2000);
setTimeout(up,1500);
}
roll();
function up(){
currentPos +=1;
slides.fadeOut(1500);
setTimeout(roll, 500);
if(currentPos > slideAtm -1){
currentPos = 0;
}
}
});
.featured-wrapper img{
max-width:200%;
max-height:200%;
min-width:100vw;
}
.featured-wrapper{
height:500px;
width:100%;
overflow:hidden;
}
.things{
font-size:50px;
height:500px;
width:100%;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="featured-wrapper" data-parallax="scroll">
<img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png" alt="">
<img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png" alt="">
<img src="https://assets.pokemon.com/static2/_ui/img/account/sign-up.png" alt="">
<img src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" alt="">
<img src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" alt="">
</div>
<div class="things">I'm the stuff underneath</div>

My proposal is to preload the images and, using the complete events of fadeIn / fadeOut instead of setTimeOut.
I hope this could help you.
var imagesArray = ["http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png",
"http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png",
"https://assets.pokemon.com/static2/_ui/img/account/sign-up.png",
"http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png",
"http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png"];
function preloadImg(pictureUrls, callback) {
var i, j, loaded = 0;
var imagesArray = [];
for (i = 0, j = pictureUrls.length; i < j; i++) {
imagesArray.push(new Image());
}
for (i = 0, j = pictureUrls.length; i < j; i++) {
(function (img, src) {
img.onload = function () {
if (++loaded == pictureUrls.length && callback) {
callback(imagesArray);
}
};
img.src = src;
}(imagesArray[i], pictureUrls[i]));
}
};
function roll(imagesArray, currentPos, max){
if (max < 0) {
return;
}
var slide = $('.parallax-mirror').find('img').attr('src', imagesArray[currentPos].src);
slide.fadeIn(2000, function() {
slide.fadeOut(1500, function() {
currentPos++;
if(currentPos >= imagesArray.length){
currentPos = 0;
max--;
}
roll(imagesArray, currentPos, max);
});
});
}
$(function () {
preloadImg(imagesArray, function (imagesArray) {
roll(imagesArray, 0, 3);
});
});
.parallax-window {
min-height: 400px;
position:relative;
}
.ok {
font-size:50px;
background:gray;
color:blue;
height:500px;
width:100%;
}
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="parallax-window" data-parallax="scroll"
data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</div>
<div class="ok">I'm the stuff underneath</div>

Parallax effects are easy to maintain if you conceptually boil them down to their basics. I've added 2 lines of code to your project which (hopefully) will provide you with the result you're after.
The code I added was
.featured-wrapper img{
z-index: -1;
position: fixed;
}
https://jsfiddle.net/simonstern/k4fygvhg/6/

Try this, Hope this Helps..:)
fiddle link https://jsfiddle.net/e05m68wd/1/
$(document).ready(function() {
var imgSrc = ["https://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png", "https://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png", "https://assets.pokemon.com/static2/_ui/img/account/sign-up.png"];
var counter = 1;
var duration = 2000;
var tTime = 300;
var v = setInterval(function() {
$('.parallax-mirror').animate({
'opacity': 0
}, {
duration: tTime,
complete: function() {
$(this).find('img').attr('src', imgSrc[counter]).end().animate({
'opacity': 1
}, tTime);
}
});
if (counter > imgSrc.length - 1) {
counter = 0
} else {
counter++
};
},
duration);
});
.featured-wrapper {
height: 500px;
width: 100%;
overflow: hidden;
}
.things {
font-size: 50px;
height: 500px;
width: 100%;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="featured-wrapper" data-parallax="scroll" data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</div>
<div class="things">I'm the stuff underneath</div>