I am hoping to re-create a gallery just like the one of the iPhone 6s Image Gallery demo. I like how they have created each image a different size tile and that as you scroll, the image very slowly scrolls with it.
LINK HERE
I have created a similar image gallery like the example, but I am not sure how to:
1) Re-create the parallax easing on the images as it scrolls
2) Have all images fade-in on load
Could someone help?
FIDDLE HERE
There is couple ways to do this.
You could use parallax effects,transform/translateY or
$('#outer').bind('mousewheel', function (e) {
if (!(e.originalEvent.wheelDelta == 120))
The full function is in the link.
Now for fading in the picture on load(You can do on scroll as well), it depends if you want and can use jQuery, as it's the simplest.
$(window).load(function(){
$('img').not(':visible').fadeIn(1000);
});
function makeVisible() {
$('img').load(function () {
$(this).fadeIn(1000);
});
});
makeVisible();
This is just a general direction, there are more than one way to do this, I have listed what would be the simplest way to me.
Related
Does anyone know how to hide an object depending on how much the user has scrolled down the page?
I have some floating social buttons on my website and I want them to hide when the scroll reaches the footer (the very bottom) and then appear once they scroll back up.
Can't be done with CSS alone, you have to use javascript to keep track of how much the user has scrolled.
If you can use jQuery, you have to do something like this:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$("#social").hide();
} else {
$("#social").show();
}
});
See jsfiddle. However, this is just a guess of what you need as you didn't provide the proper code. If you need a javascript only solution (without jQuery) let me know.
Is it possible to set a horizontal scrolling feature so that it scrolls to (overflow, I'm assuming, unless there is another way) the left as well as the right. Sort of like this picture:
a horizontal scrolling feature
... except I want to load the object just like it is in that photo but have other objects (images rather than the divs pictured) back behind to the left of that first object), so you can scroll to unseen things in both directions.
EDIT: in response to some of the people offering to help here (thanks), I have composed a fiddle (in the comments below). The hope is that I could load this horizontal feature with the blue-border box at far left (on initial load) and people could scroll back or forth). I'd prefer (but I'll take either one) it to be marked to load on that box rather than css it so it would load after a certain width or something like that, because I want to it to function this way universally (regardless of how many objects are hidden to the left) but, again, I'll take either solution, because I can probably make it work with either.
Here is a quick mockup of something like that. It can be extended to use scroll events. Used jquery but it can be done in pure js too. Just made the body hide the overflow like this
body {
overflow: hidden;
}
I have buttons to move it around but as I said you can do it with scroll events too.
function left () {
var div = document.getElementById('scrollContainer');
$(div).animate({ "right": "+=100px" }, 500);
}
function right () {
var div = document.getElementById('scrollContainer');
$(div).animate({ "right": "-=100px" }, 500);
}
Fiddle: http://jsfiddle.net/hna6jkzk/
And obviously the divs can be images too.
A fiddle with no JS and visible scrollbar: http://jsfiddle.net/hna6jkzk/1/
A fiddle with no JS and hidden scrollbar: http://jsfiddle.net/hna6jkzk/2/
I have an image at the bottom of my page (or actually, window) and it is like a rising building.
However, sometimes it overlaps page and/or footer content.
This isn't a really big problem since I just added pointer-events: none;.
But I wanted to, when hovered over the image fade it out a bit so it's more obvious you can click through. But because pointer-events: none; it doesn't even register the hover action...
Is there any way I can make it click through, but actually catching the hover-trigger?
Thanks in advance!
JSFiddle
P.S. Just wondering, is there any way to actually detect hover on only the non-transparant parts of the PNG image?
Here's my go at it: http://jsfiddle.net/tZqQc/7/
I did the hover events on the <p> tag instead, but I think I got the same effect you wanted.
The key is the jQuery code:
$("p").mouseenter(function() {
$( "#theimg" ).fadeTo( "slow" , 0.2, function() {});
});
$("p").mouseleave(function() {
$( "#theimg" ).fadeTo( "slow" , 1.0, function() {});
});
and as for the transparent hover question, you technically can do it with imagemapping.. but that's a lot of work for this picture (it's probably not worth it)!
I have a bunch of animated gifs posted on my blog and i would like to add a Play Button over each image to be able to play them when you click over them.
You will need two images. One image that is just the first frame with no animation. Then, wire up the click to replace that static image with your animated image.
Something like so:
$(function(){
$('#StaticImage').click(function(){
$(this).attr('src', 'animated_file.gif');
});
});
I have two images. I would like for the second image to fade-in when I 'mouseover' over the first image and fade-out when I 'mouseout' from the first image.
How can I acomplish this using css3?
I thank you in advance for your replies.
Actually I don't know how to do this using CSS3, but using JQuery:
$('#image1').mouseover(function() {
$('#image2').fadeIn();
});
$('#image1').mouseout(function() {
$('#image2').fadeOut();
});
This is a basic solution for a few images, but you can do it dynamically depending on your needs.