آموزش ساخت افکت پارالاکس با CSS
در این بخش از آموزش های طراحی وب با آموزش ساخت افکت پارالاکس با CSS در خدمت شما دوستان سایت هستیم.
حتما تابحال برخی از سایت های را دیدید که وقتی به سمت پایین اسکرول میشوند، تصاویری که تو دیزاین وجود دارند با سرعتی متفاوت جابجا میشوند و حالت زیبا و خلاقی را به وجود می آوردند. این طرح ها با ویژگی های افکت پارالاکس ایجاد میشوند که ما در این پست یک نمونه را برای ایده گرفتن شما دوستان آماده کردیم.
سورس کد CSS :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sourcesoft.ir - Parallax scene with CSS variables</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style type="text/css">
/*https://codepen.io/electerious/pen/gLLozQ*/
body {
height: 2000px;
background: black;
}
.scene {
position: absolute;
width: 100%;
-webkit-transform: translateY(var(--translateY));
transform: translateY(var(--translateY));
will-change: transform;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<img class="scene" data-modifier="30" src="p0.png">
<img class="scene" data-modifier="18" src="p1.png">
<img class="scene" data-modifier="12" src="p2.png">
<img class="scene" data-modifier="8" src="p3.png">
<img class="scene" data-modifier="6" src="p4.png">
<img class="scene" data-modifier="0" src="p6.png">
<script type="text/javascript" src="https://s.electerious.com/basicScroll/dist/basicScroll.min.js"></script>
<script type="text/javascript">
'use strict';
// More information about this technique/pen:
// https://medium.com/@electerious/parallax-scrolling-with-js-controlled-css-variables-63cfe96820c7#.o1kkd4cte
var scenes = document.querySelectorAll('.scene');
Array.prototype.forEach.call(scenes, function (elem) {
var modifier = elem.getAttribute('data-modifier');
basicScroll.create({
elem: elem,
from: 0,
to: 519,
props: {
'--translateY': {
from: '0',
to: 10 * modifier + 'px',
direct: true
}
}
}).start();
});
</script>
</body>
</html>
فایل کامل و سورس کد را میتونید از بخش دانلود دریافت کرده و استفاده کنید.
