Skip to content

Background parallax effect #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
filippoerbisti wants to merge 24 commits into
base: master
Choose a base branch
from
Open

Background parallax effect #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
a08b607
rainy-cloud-animation
filippoerbisti May 19, 2022
f9a7558
rainy-cloud-animation
filippoerbisti May 19, 2022
783b129
ambient-light-effect
filippoerbisti May 20, 2022
9086ac9
Update README.md
filippoerbisti May 20, 2022
7cb656a
neon-light-button-animation-hover
filippoerbisti May 20, 2022
7a804c7
Update README.md
filippoerbisti May 20, 2022
947e3df
neon-light-button-animation-infinite
filippoerbisti May 20, 2022
07c3e68
Update README.md
filippoerbisti May 20, 2022
938e160
glowing-gradient-loader-ring
filippoerbisti May 20, 2022
4d57146
Update README.md
filippoerbisti May 20, 2022
1509cc7
water-wave-text-animation
filippoerbisti May 20, 2022
3b8d574
update README.md
filippoerbisti May 20, 2022
bb71bde
glowing-text-animation
filippoerbisti May 20, 2022
6c8fe36
update README.md
filippoerbisti May 20, 2022
72d65f0
3d-wavy-circle-loader
filippoerbisti May 20, 2022
3b140ff
update README.md
filippoerbisti May 20, 2022
fabaecd
update README.md
filippoerbisti May 20, 2022
78d6e7c
3d-flip-checkbox
filippoerbisti May 20, 2022
176c77e
update README.md
filippoerbisti May 20, 2022
bcaba89
animated-eyes-follow-mouse-cursor
filippoerbisti May 20, 2022
b135fa5
update README.md
filippoerbisti May 20, 2022
b4594de
background-parallax-effect
filippoerbisti May 20, 2022
ab0bb7c
background-parallax-effect
filippoerbisti May 20, 2022
ab9f1f9
update README.md
filippoerbisti May 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
# Some cool CSS effects
# Background Parallax Effect on Mouse Cursor

Check my branches and have fun!

View [DEMOS](https://codepen.io/filippoerbisti) on Codepen.
View and try [DEMO](https://codepen.io/filippoerbisti/pen/jOZwwxX) on Codepen.
59 changes: 59 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Parallax Effect on Mouse Cursor</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>
<body>
<section>
<img src="https://res.cloudinary.com/dl38nyo08/image/upload/v1653052962/Background%20Parallax%20Effect%20on%20Mouse%20Cursor%20%28Codepen%29/1_jqk3u5.png"
data-speed="-5" class="layer" alt="">
<img src="https://res.cloudinary.com/dl38nyo08/image/upload/v1653052962/Background%20Parallax%20Effect%20on%20Mouse%20Cursor%20%28Codepen%29/2_ioeclf.png"
data-speed="5" class="layer" alt="">
<img src="https://res.cloudinary.com/dl38nyo08/image/upload/v1653052963/Background%20Parallax%20Effect%20on%20Mouse%20Cursor%20%28Codepen%29/3_nvr1th.png"
data-speed="2" class="layer" alt="">
<img src="https://res.cloudinary.com/dl38nyo08/image/upload/v1653052962/Background%20Parallax%20Effect%20on%20Mouse%20Cursor%20%28Codepen%29/4_anme3g.png"
data-speed="6" class="layer" alt="">
<img src="https://res.cloudinary.com/dl38nyo08/image/upload/v1653052962/Background%20Parallax%20Effect%20on%20Mouse%20Cursor%20%28Codepen%29/5_ue0nac.png"
data-speed="8" class="layer" alt="">
<img src="https://res.cloudinary.com/dl38nyo08/image/upload/v1653052962/Background%20Parallax%20Effect%20on%20Mouse%20Cursor%20%28Codepen%29/6_agrsww.png"
data-speed="-2" class="layer" alt="">
<img src="https://res.cloudinary.com/dl38nyo08/image/upload/v1653052962/Background%20Parallax%20Effect%20on%20Mouse%20Cursor%20%28Codepen%29/7_ee2s7q.png"
data-speed="4" class="layer" alt="">
<img src="https://res.cloudinary.com/dl38nyo08/image/upload/v1653052962/Background%20Parallax%20Effect%20on%20Mouse%20Cursor%20%28Codepen%29/8_g2howo.png"
data-speed="-9" class="layer" alt="">
<img src="https://res.cloudinary.com/dl38nyo08/image/upload/v1653052962/Background%20Parallax%20Effect%20on%20Mouse%20Cursor%20%28Codepen%29/9_qjza4n.png"
data-speed="6" class="layer" alt="">
<img src="https://res.cloudinary.com/dl38nyo08/image/upload/v1653052962/Background%20Parallax%20Effect%20on%20Mouse%20Cursor%20%28Codepen%29/10_bbstin.png"
data-speed="-5" class="layer" alt="">
<img src="https://res.cloudinary.com/dl38nyo08/image/upload/v1653052962/Background%20Parallax%20Effect%20on%20Mouse%20Cursor%20%28Codepen%29/11_r8mzzi.png"
data-speed="-7" class="layer" alt="">
<img src="https://res.cloudinary.com/dl38nyo08/image/upload/v1653052962/Background%20Parallax%20Effect%20on%20Mouse%20Cursor%20%28Codepen%29/12_xrhzro.png"
data-speed="5" class="layer" alt="">
<h2 data-speed="2" class="layer">Parallax</h2>
</section>

<script>
document.body.addEventListener("mousemove", parallax);

function parallax() {
const parllx = document.querySelectorAll(".layer");

parllx.forEach(function (parllx) {
const speed = parllx.getAttribute('data-speed');
const x = (window.innerWidth - event.pageX*speed) / 100;
const y = (window.innerHeight - event.pageY*speed) / 100;

parllx.style.transform = "translateX("+x+"px) translateY("+y+"px)";
console.log(parllx.style.transform);
});
}
</script>

</body>
</html>
37 changes: 37 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body {
background: #111;
}

section {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}

section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

section h2 {
position: relative;
color: #fff;
font-size: 12em;
}