سورس سافت | سورس پروژه | دانلود پروژه | سورس کد


م
ن
و
سورس سافت

ادامه مطلب

آموزش ساخت افکت پارالاکس با CSS



آموزش ساخت افکت پارالاکس با CSS

آموزش ساخت افکت پارالاکس با 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>

فایل کامل و سورس کد را میتونید از بخش دانلود دریافت کرده و استفاده کنید.


لینک کوتاه مطلب :
https://sourcesoft.ir/?p=1225

درباره نویسنده

علیرضا نجاتی 136 نوشته در سورس سافت دارد . مشاهده تمام نوشته های

دیدگاه ها


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

logo-samandehi