Slide background in and out of view - javascript

I have a button that slides the background out of view once clicked. I wish to make another button appear that, once clicked, will slide the background back into view.
I have experimented with changing the background position using animate(), but can't figure out what is the best way to move the background image completely in and out of view.
In the code below, I've tried to stay away from using "px" as a unit in order to make sure that the slide works on all screen sizes.
What would be the best way to achieve this effect? Should I use px, vh, or %?
$("#slide").click(function() {
$(".container").delay(100).animate({
'background-position-y': '600%'
}, 800, 'linear');
$(".processHeader").delay(1000).toggle("blind", {
direction: "up"
}, 600);
$(".processContent").delay(2000).toggle("blind", {
direction: "up"
}, 600);
});
$(".next").click(function() {
$(".container").delay(100).animate({
'background-position-y': '-600%'
}, 800, 'linear');
$(".processHeader, .processContent, .step4, .next").delay(200).fadeOut(500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You will want to use jQuery(window).width() to determine the screen size, which is cross browser compatible, and pulls the current screen dimensions when it is referenced.
This should work as long as the window is not resized. If you want to also keep the image hidden when resizing occurs, you would nest this in a resize event:
window.onresize = function(event) {
...
};

You should use the top, bottom, left, and right css commands. They can be animated the same way, and are used as reference for a div. For example, giving a div the style top:0;left:0 will anchor it at the top left corner.
You can then animate it to top:100%;left:100% to hide it.
Hiding a background example

Related

Animate div's CSS top property when scrolling down

I have a notification that pops up during difference instances on my site, and I'd like that notification to follow the menu that animates when you scroll down.
The code I have is as follows:
<script type='text/javascript'>
var messageFollow = $('.woocommerce-info').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= messageFollow) {
$('.woocommerce-info').css({top: "150px"});
} else {
$('.woocommerce-info').css({top: "74px"});
}
});
</script>
The notification has a value right now of top: 150px which looks great when you're at the top of the screen but top: 74px looks great when scrolled down.
I also want it to animate, but I have no idea how to implement that as well.
A clip to demonstrate: https://www.dropbox.com/s/p6i95f5gkbyn4nm/MessageNotification.mov?dl=0
jQuery has a built-in animate function.
Just replace css with animate and make sure the value is integer.
You can also give a duration in milliseconds as a second parameter to animate function.
$('.woocommerce-info').animate({top: 150},500);

Row of blocks - click on one and the rest slide off the screen

I have a row of blocks. When one is clicked, I want the rest to slide off the screen and have the clicked box in the first position.
for example
I tried to mess with jQueryUI slide but it didn't seem to help. Here is a JS Fiddle showing the original blocks. Maybe I need to position them differently than floating? I thought about trying to move the distance left and off the screen but the animation looked awful.
$('.block').on('click', function() {
$('.block').not($(this)).hide("slide", { direction: "left" }, 500, function() {
});
$(document).ready(function(e) {
$('.block').each(function(item) {
$(this).click(function() {
$('.block').not($(this)).hide('slide', {direction: 'left'}, 500);
})
});
})
You still need to include jQueryUi, bellow jQuery, in order to achieve the slide effect.

Make a Div slide away on scroll

I want to make my header content (logo) slide away to the left on scroll, leaving the fixed menu left. I have gotten the content to disappear but the slide itself is from top to bottom which makes it just appear as a longer scroll more than a slide away effect.
What I'm trying to accomplish is something like this header or similar: http://lifeinthegrid.com/simple-css-fixed-header/
As you see, once you scroll the header makes a really nice slide away to the left and leaving a fixed menu hanging.
This is the code I have been using so far:
<script>
$(window).scroll(function () {
if ($(this).scrollTop() > 80) {
$("#header_content").hide(300);
} else {
$("#header_content").show(300);
}
});
</script>
The code makes the div disappear but not with a nice slide away to the left.
you can use jquery ui.
$('#header_content').hide("slide", {direction: "right" }, 1000);
read the docs for more information.
Try using
$("#header_content").animate(function(){
right: 9999;
}, 300});
To animate the css right property to 9999, and again back to 0. You will need to have position set to something other than static in your CSS for this to work.
Source(s)
jQuery API - .animate()

JQuery animate firing late in Chrome

I have an image sprite which, on mouseenter, changes the background position and moves text over. On mouse leave, the background position and text both move to the left to display the original image. The text is a seperate element which comes from the right to sit over the image once the position has changed.
The mouseenter part works perfectly, with the image and text both scrolling to the left at the same time, but on mouseleave, however in chrome (and what appears to be only chrome), the text will move first, then the image will follow later, the image animation is firing much later than the text.
I've read a few issues with .animate() in chrome, but none of the issues seem to be related to this.
Is there anything obviously wrong with this? Or is there simply a better way of doing it
//animation on mouse enter
$("#featuredImage").mouseenter(function(){
$(this).animate({ backgroundPositionX:"100%" });
$("#featuredText").show("slide", { direction: "right" });
});
//animation on mouse leave
$("#featuredImage").mouseleave(function(){
$(this).animate({ backgroundPositionX:"0%" });
$("#featuredText").hide("slide", { direction: "right" });
});
Try hover see If this helps :
$("#featuredImage").hover(function(){
$(this).animate({ backgroundPositionX:"100%"});
$("#featuredText").show("slide" ,{ direction: "right"});
},function(){
$(this).animate({ backgroundPositionX:"0%" });
$("#featuredText").hide("slide",{ direction: "right" });
}
);

Scrolling div within bounds

I have div with images inside it and need to scroll it left and right. I,ve managed to get the scrolling to work, but now I need it to stay in the displayable area.
I need to use jQuery
$('#next').click(function() {
$('#slides').animate({left: '-=80',}, 2000, function() {});
});
$('#prev').click(function() {
$('#slides').animate({left: '+=80',}, 2000, function() {});
});
The two "buttons" is used to scroll.
How do I get the slides' position.left to stay between 0 and -1120 ?
This will be the bottom of my slideshow. The large images will be at the top.
How do I change the z-index of a div ?
You change the z-index using css:
div.class {
z-index: 60;
}
You should get the width of your displayable area then by making use of the width() method.
If you have the maximum width you can use you can easily implement a check before your animation. So if the new width (current - 80) is bigger than 0, fine ... animate it. If not, don't.
Same for scrolling to the right. If it's bigger than your displayable area's width, then don't scroll.
EDIT
You changed your question slightly, so to get the current left value you can check it with:
$('#element').offset().left
This returns the current integer value of your left attribute. Thus again you can verify its current value and compare it with the one that it'd be like after you animated it. If it's too big or too small, don't scroll.
You can check the css left value is in the interval:
if(parseInt($('#slides').css('left')) > -1120 && parseInt($('#slides').css('left')) < 0){
....//animate here
}

Categories

Resources