Comments on: Parallax Hero Image https://codyhouse.co/gem/parallax-hero-image/ A free library of HTML/CSS/Javascript resources to boost your web projects and learn new tricks. Tue, 07 Nov 2017 15:34:59 +0000 hourly 1 http://wordpress.org/?v=4.2.12 By: JohnDrach https://codyhouse.co/gem/parallax-hero-image/#comment-8646 Fri, 02 Dec 2016 20:31:00 +0000 http://codyhouse.co/?post_type=gem&p=581#comment-8646 Is there a way to make the background image full screen? It’s kind of hard to use if there is a block of nothing at the bottom. I was trying to adjust but can’t seem to get it to work

]]>
By: Jay Emblem https://codyhouse.co/gem/parallax-hero-image/#comment-8602 Mon, 21 Nov 2016 05:45:00 +0000 http://codyhouse.co/?post_type=gem&p=581#comment-8602 How can you make this work in squarespace? i can’t figure it out. Thanks!

]]>
By: Pascal Pixel https://codyhouse.co/gem/parallax-hero-image/#comment-8494 Mon, 31 Oct 2016 16:21:00 +0000 http://codyhouse.co/?post_type=gem&p=581#comment-8494 As an alternative to the method in this article, you can also just change the transform-origin based on the mouse position, meaning you’ll only need a single line of js:

$(document).mousemove(function(e){ $(‘.perspective’).css({ perspectiveOrigin: Math.floor((e.pageX / $(this).width()) * 100) + ‘% ‘ + Math.floor((e.pageY / $(this).height()) * 100) + ‘%’ }); });

]]>
By: Claudia Romano https://codyhouse.co/gem/parallax-hero-image/#comment-7745 Fri, 15 Jul 2016 16:25:00 +0000 http://codyhouse.co/?post_type=gem&p=581#comment-7745 Hi there, just tested it on Chrome 51 (Mac) and it’s working just fine. What issue are you experiencing? And are you testing our demo or a local version? thanks

]]>
By: Claudia Romano https://codyhouse.co/gem/parallax-hero-image/#comment-7742 Fri, 15 Jul 2016 16:03:00 +0000 http://codyhouse.co/?post_type=gem&p=581#comment-7742 @rmdproduction:disqus @yehudamenahem:disqus thanks for the heads-up! Fixed now ;)

]]>
By: RMDProduction https://codyhouse.co/gem/parallax-hero-image/#comment-7608 Mon, 27 Jun 2016 18:42:00 +0000 http://codyhouse.co/?post_type=gem&p=581#comment-7608 HI, ive tried your code but it dosent word for me :/
could you explain it “more” ? :)
Here s my rotateX :
rotateX = ((event.pageY-$(“cd-background-wrapper”).position().top-halfWindowH)/halfWindowH)*maxRotationX;

]]>
By: Brandyss Nikol Adams https://codyhouse.co/gem/parallax-hero-image/#comment-7109 Fri, 06 May 2016 18:21:00 +0000 http://codyhouse.co/?post_type=gem&p=581#comment-7109 This doesn’t work in the latest Chrome for me…is there something I am missing?

]]>
By: Yehuda Menahem https://codyhouse.co/gem/parallax-hero-image/#comment-6698 Tue, 05 Apr 2016 10:18:00 +0000 http://codyhouse.co/?post_type=gem&p=581#comment-6698 Hey,
The solution is in the javascript file when you set the RotateX. notice –> X (not the Y)
if you image is position not in the top of the window,
Now the event.pageY(now it’s the Y :) taking the position of the mouse from top of the window
You need the position of the mouse from the top of the element:
instead of
pageY
write:
(pageY-$(“#idOfDiv”).position().top)

It will work

]]>