when cursor hovers the slider, background also moves with cursor hover.(link below)
here is link to site using this effect.
telemaruk
what is this effect called? and how to achieve this effect? any useful link plz
it is some kind of jquery plugin or simple css3 effect. I'cant figure it out please help.
I just created a Fiddle to show you what I meant with my comment on your question. You should be able to go further from there.
document.addEventListener('mousemove', function (event) {
if (window.event) { // IE fix
event = window.event;
}
// Grab the mouse's X-position.
var mousex = event.clientX;
var header = document.getElementById('header');
header.style.backgroundPosition = mousex/3 + 'px 0';
}, false);
As to explain what's happening here:
It binds a function on the mousemove event on document.
It grabs the current mouse position using event.clientX.
It changes the background-position of element #header with 1/3rd of the speed (mousex/3).
Check it live: FIDDLE
If you want the exact same thing as that website you linked, you should have a few divs over each other, and move their background positions at another speed. In this example it moves 1/3 from the speed of your mouse.
have a look at these plugins, Its parallax effect your going for.
http://stephband.info/jparallax/
http://bmc.erin.utoronto.ca/~walid/newmediasite/parallax/files/parallax.html
What you need is to have three images one over the other.
You need to set their opacity based on you requirement.
Set the z-index of the images so that they overlap and make the position absolute.
On mouseover, move the images, the top image more than the other two, the second one more than the last.
This will give the desired effect.
Related
I am using the blueImp image gallery in a carousel.
I am allowing images to be dragged for a mobile user, but images can be dragged vertically as well as horizontally, meaning you can get the image half dragged off screen.
As you drag, the .slide element changes inline to dimensions like:
style="transform:translate(-100px, 256px)"
I have tried setting a translateY(0) !important but this just overwrites the dragging altogether.
I am using jQuery, so maybe there is a way of watching the drag event? Any help useful.
the only way I managed to do it was to overwrite blueimp's ontouchmove function. You just need to comment out the translateY call. I took the source from https://github.com/blueimp/Gallery/blob/master/js/blueimp-gallery.js.
Place the whole overwite somewhere in your js, ideally separate file with comment for future.
blueimp.Gallery.prototype.ontouchmove = function (event) {
...
} else {
// Removed move up/down funictionality
//this.translateY(index, this.touchDelta.y + this.positions[index], 0);
}
};
Hope it helps you!
Maybe blueimp can add an option to toggle this behavious in future :)
Pav
For example:1)i Have a div 100px*900px2) i have an image 100px*200px what i want is i want to move my image the exact number of pixels i scroll up or down
Can any one tell me Update Check this. I want to move that image also when i scroll down animatedly(slowly) not fixed position.
You want to look at the scrollY property on the window object in Javascript. This holds the amount the window has scrolled.
You can then use something like jQuery .animate to move your image the desired amount.
$('#yourImage').animate({"top":window.scrollY+"px"});
Note: This code assumes your image is absolutely positioned.
EDIT
$(window).scroll(function(data){
//It is important to use .stop() for this as otherwise every slight scroll will add the animation to the animation queue.
//What you want is for it to forget the others and go to the latest scroll position
$('#im').stop().animate({"top":(window.scrollY + 10)+"px"}, 500);
});
This code will move an image every time the scroll event is triggered. I have tested this in Firefox using this jsFiddle
The effect is similar to the Facebook timeline, and you move your mouse near the the blue vertical line, it will turn to a blue cross, and you can add post on click.
I know I can customize cursor using css like: cursor:url('cross.png'), auto; but is there a method I can control the cursor on the web page, and make it move only vertically? Thanks
I don't think you can change the cursor position using JS and using png as a cursor is not browser friendly at my knowledge.
So the best solution is using cursor:none; in your css to hide the cursor. So you can show the image at the required position, and change it's y position using the mousemove event.
e.g.
in css
.line{position:relative;cursor:none;}
.btn-plus{background:url('cursor.png') no-repeat;position:absolute;}
in js
$('.line').mousemove(function(e){
var btn_cross = $(this).find('.btn-plus');
if (btn_cross.length == 0)
{
btn_cross = $('<div class="btn-plus"></div>');
$(this).append(btn);
btn_cross.mouseenter(function(){
e.stopPropagation();
});
}
btn_cross.css('top', e.pageY-$(this).offset().top+'px');
});
I have a div with a relative position (div 1). It contains an image (shown as the green block) with an absolute position which by default is hidden way off to the left of the browser window.
I'd like to make it so that when div 1 is in the center of the browser window as the user scrolls down, the image is moved in slightly from the left and appears on the screen. As the user begins to scroll down past div 1, I'd like the image to move back to its original offscreen position.
I have attached a picture to try and make a bit more sense.
I have a feeling this is possible using JavaScript or jQuery but I'm not sure how. Any help would be greatly appreciated.
Ian
You'll want to bind a handler to the scroll event of the window, and measure the ratio of how far down the page the user has scrolled - then, position the image accordingly. I built a rough prototype; you should be able to tweak sizes and positions to make it work for you.
The JS for the prototype, which depends on the HTML and CSS in the JSFiddle linked above, is as follows:
var $main = $('.main');
var $tgt = $('.targetMover');
var origLeft = $tgt.position().left;
var maxLeft = 200;
$main.scroll(function(ev){
var ratio = $main[0].scrollTop / $main[0].scrollHeight;
var newLeft = origLeft + ( (maxLeft - origLeft) * ratio);
$tgt.css({left:newLeft});
});
You would want to position the image on scroll. You would basically check what the position of the div is, set the top of the image to the same as the div, and set the left to whatever you like. you could use jquery animate for this to make it "move" to that position. You then would have to manage to do an scrollstop event (which doesn't exist), and hide the image again. See: http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ for scrollstop implementation (taken from the below post).
You might want to read through jQuery - fadeOut on Scroll / fadeIn on "scrollstop"
I've Googled for this but must be using the wrong keywords.
Basically I want to use the effect that Magento and now Stack Overflow uses. That is, there is an element in a column, and when you scroll down, it sticks to the top of the viewport. And once scrolled up again, it goes back into the normal page flow.
This Ask A Question is a good page for example. Scroll down and watch the "How to Format" element come down (might need to make your viewport smaller if you have a large screen to see the effect).
I've noticed it is setting position: fixed in the CSS. The JavaScript however is obfuscated.
What's the easiest way to achieve this effect? Is there a jQuery plugin available?
Here is an article that should help: http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/
I noticed google doing this in certain places, like here http://news.google.com/nwshp?hl=en (the left side navigation bar). From what I can tell, they checking the position on the page and then setting the item to a fixed position once the page is scrolled down enough for the element to start scrolling off the screen.
It looks like the other method, using jQuery to set the top margin will allow the element to lag behind and get choppy (if you don't use animation) since the javascript must continue to position the element.
Here is an example in Ext, it would probably help a lot if I didn't have the select in the event handler, but it works.
Ext.fly(document).on("scroll", function(e,t,o){
Ext.select(".pinnable").each(function(el,c,idx){
var y = window.scrollY;
if(!el.hasClass("pinned")){
var ypos = el.getY();
if(y>ypos){
el.addClass("pinned");
el.set({
originalY:ypos
});
}
} else {
var origy = el.getAttribute("originalY");
if(origy && y<origy){
el.removeClass("pinned")
}
}
});
});