2021년 7월
패럴랙스 스크롤링#
(parallax scrolling)#
- 사용자가 마우스를 스크롤할때, 화면을 구성하는
배경이미지들과 기타 이미지들간의 움직임이나 동작 시간을
다르게 주어 스크롤이 될 수 있도록 하는 디자인 표현 기법.
기본구조 만들기#
<!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>Moonlight</title>
</head>
<body>
<section>
<img src="bg.jpg" id="bg">
<img src="moon.png" id="moon">
<img src="mountain.png" id="mountain">
<img src="road.png" id="road">
<h2 id="text">Moont Light</h2>
</section>
</body>
</html>
- 이미지와 넣을 텍스트를 입력한다.
화면 정렬과 어두운 밤과 같은효과#
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body {
background: #0a2a43;
min-height: 1500px;
}
section {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #0a2a43, transparent);
z-index: 10;
}
section::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:#0a2a43;
z-index: 10;
mix-blend-mode: color;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
#text {
position: relative;
color: #fff;
font-size: 10em;
z-index: 1;
}
- 이미지들을 한곳에 정렬한후 ,
mix-blend-mode로 밤과 같은효과를 나타난다.
패럴랙스 스크롤링 효과 보이기#
<script type="text/javascript">
let bg = document.getElementById("bg");
let moon = document.getElementById("moon");
let mountain = document.getElementById("mountain");
let road = document.getElementById("road");
let text = document.getElementById("text");
window.addEventListener('scroll', function(){
let value = window.scrollY;
bg.style.top = value * 0.5 + 'px';
moon.style.left = value * 0.5 + 'px';
mountain.style.top = value * 0.15 + 'px';
road.style.top = value * 0.15 + 'px';
text.style.top = value * 1 + 'px'
})
</script>
- 각각의 아이디클래스의 내용을 변수로 받아 ,
스크롤을 할때 마다 이미지들의 위치에 변화를 준다.
#road {
z-index: 2;
}
- 바닥에
z-index값을 2를 주어 글자가 사라지는 효과를준다.
image source#
출처#
P5.js#
P5.js는 디자이너와 아티스트들이 좀 더 손쉽게 프로그래밍에
접근할 수 있도록 만들어진 processing이라는
프로그램을 기반으로 만들어졌다.processing 이란
프로세싱은 자바에 기반을 두고, 자바의 문법을 가지고 있지만
자바보다 더 간결한 것이 특징으로, 이 특징 때문에 예술가들이
작품을 만들 때도 쓰입니다.
예제 1#
<!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">
<link rel="stylesheet" href="css/main1.css">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
<script defer src="/js/main1.js"></script>
</head>
<body>
</body>
</html>
function setup() {
createCanvas(windowWidth,
windowHeight);
}
function draw(){
const col = {};
const {r,g,b} = col;
col.r = random(0,255);
col.g = random(0,255);
col.b = random(0,255);
fill(col.r,col.g,col.b)
//면을 채우는 함수
//ellipse(200,200,200,200)
ellipse(mouseX,mouseY,200,200)
//마우스의 위치값을 이용하여 동그라미생성
//width,height
}
영상출처#
예제2#
function setup(){
createCanvas(windowWidth,windowHeight);
}
function draw(){
background(20);
noStroke();
for (let i=0; i<8000; i++){
rect(random(width), random(height), 4, 4)
}
// 랜덤한 위치에서 4px의 작은 사각형 생성
}
영상출처#
예제3#
<!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">
<link rel="stylesheet" href="css/main3.css">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
<script defer src="/js/main3.js"></script>
</head>
<body>
<section>
<div class="content">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing.</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe dicta officia dolore aperiam eum pariatur molestiae praesentium. Cumque rerum distinctio magnam quas non nobis necessitatibus, eos numquam inventore dolore libero illo facilis explicabo id soluta accusamus, debitis totam ab, aliquid mollitia sunt quasi qui aspernatur neque. Dignissimos quae beatae facilis recusandae dolor nostrum, debitis cupiditate excepturi autem ab quo culpa neque repellat in tempore tempora iusto deserunt modi accusantium ea harum officiis repudiandae illo! Soluta, enim velit sapiente laborum autem suscipit illo eveniet ratione a adipisci nobis fugit? Quaerat hic delectus id blanditiis nobis veniam incidunt, praesentium dolores tenetur sit.</p>
</div>
</section>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
section {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000;
}
section .content {
max-width: 80%;
color: white;
}
section .content h1 {
font-size: 3em;
}
section .content p {
font-size: 1.2em;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
background: #fff;
mix-blend-mode: screen;
}
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw(){
strokeWeight(150);
if (mouseIsPressed === true){
line(mouseX, mouseY, pmouseX, pmouseY)
}
}