Jump to content
GreenSock

Hibernate

I yust try a small parallax effect, but...

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

don´t works perfect :-(

 

In this time, I have two scrits to make a sooth scrool at mouse wheel for IE, Safari, Chome and one for a parallax move.

 

So, I think its possible to change to GSAP

 

This is a site with two Scrips

http://www.gut-cert.de/auf-einen-blick.html

 

and this with one

http://www.gut-cert.de/dienstleistungen.html

 

I implement the code from

http://stackoverflow.com/questions/19445546/greensock-js-smooth-parallax-on-mousewheel

 

but I see no parallax effect

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
<script>
$(function(){

var $window = $(window);        //Window object
var $parallax = document.getElementById('container_header');        //parallax object

var scrollTime = 1.2;           //Scroll time
var scrollDistance = 170;       //Distance. Use smaller value for shorter scroll and greater value for longer scroll
var parallaxDistance = 150;

$window.on("mousewheel DOMMouseScroll", function(event){

    event.preventDefault(); 

    var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
    var scrollTop = $window.scrollTop();
    var finalScroll = scrollTop - parseInt(delta*scrollDistance);
    var finalParallax = scrollTop - parseInt(delta*parallaxDistance);

    TweenMax.to($window, scrollTime, {
        scrollTo : { y: finalScroll, autoKill:true },
            ease: Power1.easeOut,   //For more easing functions see http://api.greensock.com/js/com/greensock/easing/package-detail.html
            autoKill: true,
            overwrite: 5                            
        });

    TweenMax.to($parallax , scrollTime, {
    		//y: finalParallax, //TEST
        scrollTo : { y: finalParallax, autoKill:true },
            ease: Power1.easeOut,   //For more easing functions see http://api.greensock.com/js/com/greensock/easing/package-detail.html
            autoKill: true,
            overwrite: 5                            
        });


});

});
</script>
Link to comment
Share on other sites

Hello Hibernate, and welcome to the GreenSock Forums!

 

It looks like you have a typo in your ending <script> tag code:

// this
</scrip>
// should be 
</script>

Also i noticed your using jQuery in your JS.. but you have no script tag referencing jQuery?

 

:)

Link to comment
Share on other sites

sorry - look at the source code => I have a separate file without <spript>-Tags...

Link to comment
Share on other sites

HI,

 

I would suggest you to use the code for the mousewheel only to scroll the page, and to move the header on window scroll. Something like

 

$window.on("scroll", function(event){

 var scrollTop = $window.scrollTop(); 
//code for the parallax based on the scrollTop value
});
Link to comment
Share on other sites

hmmm... my goal is the same "move" at parallax image (header) and normal content with "ease: Power1.easeOut"

Link to comment
Share on other sites

Hello again Hibernate,

 

You might want to try and setup a reduced codepen example so we can see your code within a editable environment.

 

Here is a nice video tut by GreenSock on How to create a codepen example demo.

 

By setting up this limited codepen example we will be able to better help you. This way we are able test your code live

 

Also do you have an example of the parallax effect you trying to mimic?

 

Is it a:

  • parallax slider (horizontal scrolling) ?
  • parallax website (vertical scrolling) ?
  • or is it a mix of vertical and horizontal scrolling?

Thanks :)

Link to comment
Share on other sites

Hi, here is the script:

$(function()
{

	var $window = $(window);        //Window object
	var $parallax = $("#container_header");        //parallax object

	var scrollTime = 1.2;           //Scroll time
	var scrollDistance = 170;       //Distance. Use smaller value for shorter scroll and greater value for longer scroll

	//Added parallax velocity - it's the same as it is in the original files
	var velocity = 0.3;

	$window.on("mousewheel DOMMouseScroll", function(event)
	{

		event.preventDefault();

		var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 3;
		var scrollTop = $window.scrollTop();
		var finalScroll = scrollTop - parseInt(delta * scrollDistance);

		TweenMax.to($window, scrollTime, {
			scrollTo : { y: finalScroll, autoKill: true },
			ease     : Power1.easeOut,   //For more easing functions see http://api.greensock.com/js/com/greensock/easing/package-detail.html
			overwrite: 5
		});

	});

	//Add onScroll listener. Because the scrolling have applied easing, the parallax will have easing, too
	$window.on("scroll", moveParallax);

	function moveParallax(event){
		var scrollTop = $window.scrollTop();
		TweenMax.set( $parallax, {top: scrollTop * velocity} );
	}

});
  • Like 2
Link to comment
Share on other sites

Yes, Kirupa has nice scripts, but I wouldn't use translating, because of the scrollbar ( it is not moving, it will confuse users ) . On laptops with touchscreen and mouse ( ex. Lenovo z500 touch ) mixing scrollTop and translate3D can create a mess. The scrolling script can be a optimised, so it uses default scroll for short distances. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×