Create up-/down-slide or push effect with jQuery
up vote
0
down vote
favorite
I am replacing the src of an image when the user has scrolled to a certain point of the page with this jQuery code:
jQuery(function()
var sticky = jQuery(".sticky-icon-white");
jQuery(window).scroll(function()
var scroll = jQuery(window).scrollTop();
if (scroll >= 115)
jQuery("#sticky-icon").attr("src", "https://dummyimage.com/100x100/000/fff");
else
jQuery("#sticky-icon").attr("src", "https://via.placeholder.com/100/");
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
if (scroll >= 300)
sticky.removeClass('sticky-icon-white').addClass('not-sticky-icon-white');
else
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
);
);
This is my HTML:
<div class="sticky-icon-white">
<img id="sticky-icon" src="https://via.placeholder.com/100/">
</div>
The replacing is working fine but I want to apply a slide or push (not sure what to call it) animation on it. Like this one: https://gosimple.com (the leaf icon in the middle).
But I couldn't figure out how. Could someone help me to find a solution, please?
Here is a JSFiddle: http://jsfiddle.net/bzqad296/
Thanks in advance!
I have tried with slideUp(); or slideDown(); but it doesn't work.
EDIT:
In this image, you can see the effect. How the icon changes from white background, green leafs to green background, white leafs:
https://prnt.sc/lgwr3f
javascript jquery animation
asked Nov 11 at 1:27
TPA
13
add a comment |
up vote
0
down vote
favorite
I am replacing the src of an image when the user has scrolled to a certain point of the page with this jQuery code:
jQuery(function()
var sticky = jQuery(".sticky-icon-white");
jQuery(window).scroll(function()
var scroll = jQuery(window).scrollTop();
if (scroll >= 115)
jQuery("#sticky-icon").attr("src", "https://dummyimage.com/100x100/000/fff");
else
jQuery("#sticky-icon").attr("src", "https://via.placeholder.com/100/");
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
if (scroll >= 300)
sticky.removeClass('sticky-icon-white').addClass('not-sticky-icon-white');
else
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
);
);
This is my HTML:
<div class="sticky-icon-white">
<img id="sticky-icon" src="https://via.placeholder.com/100/">
</div>
The replacing is working fine but I want to apply a slide or push (not sure what to call it) animation on it. Like this one: https://gosimple.com (the leaf icon in the middle).
But I couldn't figure out how. Could someone help me to find a solution, please?
Here is a JSFiddle: http://jsfiddle.net/bzqad296/
Thanks in advance!
I have tried with slideUp(); or slideDown(); but it doesn't work.
EDIT:
In this image, you can see the effect. How the icon changes from white background, green leafs to green background, white leafs:
https://prnt.sc/lgwr3f
javascript jquery animation
asked Nov 11 at 1:27
TPA
13
Can you tell more about the effects you want? In which of that site are you referring to?
– SilentCoder
Nov 11 at 1:37
@SilentCoder, check out the edit in my question please. Thanks.
– TPA
Nov 11 at 8:30
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am replacing the src of an image when the user has scrolled to a certain point of the page with this jQuery code:
jQuery(function()
var sticky = jQuery(".sticky-icon-white");
jQuery(window).scroll(function()
var scroll = jQuery(window).scrollTop();
if (scroll >= 115)
jQuery("#sticky-icon").attr("src", "https://dummyimage.com/100x100/000/fff");
else
jQuery("#sticky-icon").attr("src", "https://via.placeholder.com/100/");
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
if (scroll >= 300)
sticky.removeClass('sticky-icon-white').addClass('not-sticky-icon-white');
else
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
);
);
This is my HTML:
<div class="sticky-icon-white">
<img id="sticky-icon" src="https://via.placeholder.com/100/">
</div>
The replacing is working fine but I want to apply a slide or push (not sure what to call it) animation on it. Like this one: https://gosimple.com (the leaf icon in the middle).
But I couldn't figure out how. Could someone help me to find a solution, please?
Here is a JSFiddle: http://jsfiddle.net/bzqad296/
Thanks in advance!
I have tried with slideUp(); or slideDown(); but it doesn't work.
EDIT:
In this image, you can see the effect. How the icon changes from white background, green leafs to green background, white leafs:
https://prnt.sc/lgwr3f
javascript jquery animation
asked Nov 11 at 1:27
TPA
13
I am replacing the src of an image when the user has scrolled to a certain point of the page with this jQuery code:
jQuery(function()
var sticky = jQuery(".sticky-icon-white");
jQuery(window).scroll(function()
var scroll = jQuery(window).scrollTop();
if (scroll >= 115)
jQuery("#sticky-icon").attr("src", "https://dummyimage.com/100x100/000/fff");
else
jQuery("#sticky-icon").attr("src", "https://via.placeholder.com/100/");
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
if (scroll >= 300)
sticky.removeClass('sticky-icon-white').addClass('not-sticky-icon-white');
else
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
);
);
This is my HTML:
<div class="sticky-icon-white">
<img id="sticky-icon" src="https://via.placeholder.com/100/">
</div>
The replacing is working fine but I want to apply a slide or push (not sure what to call it) animation on it. Like this one: https://gosimple.com (the leaf icon in the middle).
But I couldn't figure out how. Could someone help me to find a solution, please?
Here is a JSFiddle: http://jsfiddle.net/bzqad296/
Thanks in advance!
I have tried with slideUp(); or slideDown(); but it doesn't work.
EDIT:
In this image, you can see the effect. How the icon changes from white background, green leafs to green background, white leafs:
https://prnt.sc/lgwr3f
javascript jquery animation
javascript jquery animation
asked Nov 11 at 1:27
TPA
13
asked Nov 11 at 1:27
TPA
13
edited Nov 12 at 7:13
asked Nov 11 at 1:27
TPA
13
asked Nov 11 at 1:27
TPA
13
asked Nov 11 at 1:27
TPA
13
13
Can you tell more about the effects you want? In which of that site are you referring to?
– SilentCoder
Nov 11 at 1:37
@SilentCoder, check out the edit in my question please. Thanks.
– TPA
Nov 11 at 8:30
add a comment |
Can you tell more about the effects you want? In which of that site are you referring to?
– SilentCoder
Nov 11 at 1:37
@SilentCoder, check out the edit in my question please. Thanks.
– TPA
Nov 11 at 8:30
Can you tell more about the effects you want? In which of that site are you referring to?
– SilentCoder
Nov 11 at 1:37
Can you tell more about the effects you want? In which of that site are you referring to?
– SilentCoder
Nov 11 at 1:37
@SilentCoder, check out the edit in my question please. Thanks.
– TPA
Nov 11 at 8:30
@SilentCoder, check out the edit in my question please. Thanks.
– TPA
Nov 11 at 8:30
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53245065%2fcreate-up-down-slide-or-push-effect-with-jquery%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you tell more about the effects you want? In which of that site are you referring to?
– SilentCoder
Nov 11 at 1:37
@SilentCoder, check out the edit in my question please. Thanks.
– TPA
Nov 11 at 8:30