GSAP Parallax

Developer
Chrysto
Size
2,513 Kb
Views
131,560
  1. GSAP Parallax Previews
  2. GSAP Parallax HTML Codes
  3. GSAP Parallax CSS Codes
  4. GSAP Parallax JS Codes

How do I make an gsap parallax?

Just a quick pen showing how to create a parallax effect on mouse move with TweenMax. Position element / set elements via CSS, set speed via data attribute. What is a gsap parallax? How do you make a gsap parallax? This script and codes were developed by Chrysto on 16 July 2022, Saturday.

GSAP Parallax Previews
IQ Test

GSAP Parallax - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GSAP Parallax </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="parallax-container"> <div class="box box-1 parallax" data-speed-x="200" data-speed-y="200"></div>	<div class="box box-2 parallax" data-speed-x="80" data-speed-y="80"></div>	<div class="box box-3 parallax" data-speed-x="30" data-speed-y="40"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

GSAP Parallax - Script Codes CSS Codes

#parallax-container{	position: relative;	width: 100%;	height: 100%;	padding: 0px;	margin: 0px;
} .box{ position: absolute;	width: 200px;	height: 200px;	} .box-1{ background-color: #df7b7b;	top: 100px;	left: 30%;	}	.box-2{ background-color: rgba(217,109,187,0.5);	top: 120px;	left: 40%;	}	.box-3{ background-color: rgba(13,98,189,0.5);	top: 130px;	left: 50%;	}

GSAP Parallax - Script Codes JS Codes

$(function(){ /* Author: Chrysto Panayotov ( [email protected] ) For GreenSock forums user azuki License : http://bassta.bg/license/ */	var $parallaxContainer = $("#parallax-container"); //our container	var $parallaxItems = $parallaxContainer.find(".parallax"); //elements	var fixer = 0.0008;	//experiment with the value	$(document).on("mousemove", function(event){	var pageX = event.pageX - ($parallaxContainer.width() * 0.5); //get the mouseX - negative on left, positive on right	var pageY = event.pageY - ($parallaxContainer.height() * 0.5); //same here, get the y. use console.log(pageY) to see the values //here we move each item	$parallaxItems.each(function(){	var item	= $(this);	var speedX	= item.data("speed-x");	var speedY	= item.data("speed-y"); /*TweenLite.to(item, 0.5, {	x: (item.position().left + pageX * speedX )*fixer, //calculate the new X based on mouse position * speed	y: (item.position().top + pageY * speedY)*fixer	});*/ //or use set - not so smooth, but better performance TweenLite.set(item, {	x: (item.position().left + pageX * speedX )*fixer,	y: (item.position().top + pageY * speedY)*fixer	});	});	});	});
GSAP Parallax - Script Codes
GSAP Parallax - Script Codes
Home Page Home
Developer Chrysto
Username bassta
Uploaded July 16, 2022
Rating 3.5
Size 2,513 Kb
Views 131,560
Do you need developer help for GSAP Parallax?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chrysto (bassta) Script Codes
Name
Medium.com style header effect
Smooth scroll
Footer concept
Fullscreen Parallax
TweenLite staggerTo
A Pen by Chrysto
Page Header animation
Single page website
Fullscreen image in Canvas
Fullscreen slides with TweenLite, CSSPlugin and ScrollToPlugin
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!