728x90
<!DOCTYPE html>
<html lang="ko">
<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>Parallax Effect</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap" rel="stylesheet">
</head>
<style>
@font-face {
font-family: 'NEXONLv1Gothic';
font-weight: 300;
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff') format('woff');
font-style: normal;
}
@font-face {
font-family: 'NEXONLv1Gothic';
font-weight: 400;
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
font-style: normal;
}
* {
margin: 0; padding: 0;
}
.parallax {
background: #222;
color: #fff;
font-family: 'NEXONLv1Gothic';
font-weight: 400;
}
#paraHeader {
padding: 20px;
}
#paraHeader h1 {
display: inline-block;
font-size: 20px;
border-bottom: 1px dashed #fff;
margin-bottom: 8px;
}
#paraCont {
max-width: 1600px;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
#paraFooter {
padding: 10vw 0;
}
#paraFooter h2 {
font-size: 8vw;
line-height: 1.2;
padding: 10vw 8vw 0 8vw;
text-transform: uppercase;
margin-bottom: 3vw;
}
#paraFooter h2 em {
display: block;
font-family: 'Lato';
font-weight: 100;
padding-left: 18vw;
}
#paraFooter .footerInfo {
padding: 20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background: #000;
padding: 15px 20px;
margin-bottom: 2px;
}
#paraFooter .footerInfo h3 {
padding: 0 10px;
}
#paraFooter .footerInfo li {
display: inline;
list-style: none;
}
#paraFooter .footerInfo li a {
text-decoration: none;
color: #fff;
border: 1px dashed #fff;
width: 30px; height: 30px;
border-radius: 50%;
line-height: 32px;
display: inline-block;
}
#paraFooter .footerInfo li.active a,
#paraFooter .footerInfo li a:hover {
background: #fff;
color: #000;
}
.content__item {
width: 1000px;
max-width: 70vw;
margin: 30vw 0;
/* background: rgba(255,255,255,0.3); */
text-align: right;
position: relative;
padding-top: 10vw;
}
.content__item:nth-child(even){
margin-left: auto;
text-align: left;
}
.content__item__num {
font-family: 'Lato';
font-size: 25vw;
opacity: 0.07;
position: absolute;
right: -5vw; top: -10vw;
}
.content__item:nth-child(even) .content__item__num {
right: auto;
left: -5vw;
}
.content__item__title {
padding-bottom: 1vw;
font-size: 2vw;
}
.content__item__imgWrap {
width: 100%;
padding-bottom: 56%;
background: #000;
position: relative;
overflow: hidden;
}
.content__item__img {
position: absolute;
left: -10%; top: -10%;
width: 120%;
height: 120%;
background-repeat: no-repeat;
background-size: cover;
filter: saturate(0%);
}
.content__item__desc {
font-size: 4vw;
line-height: 1.4;
word-break: keep-all;
margin-top: -6vw;
margin-right: -3vw;
position: relative;
z-index: 100;
}
.content__item:nth-child(even) .content__item__desc {
margin-right: 0;
margin-left: -3vw;
}
.content__item:nth-child(1) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg1.jpg);
}
.content__item:nth-child(2) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg2.jpg);
}
.content__item:nth-child(3) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg3.jpg);
}
.content__item:nth-child(4) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg4.jpg);
}
.content__item:nth-child(5) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg5.jpg);
}
.content__item:nth-child(6) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg6.jpg);
}
.content__item:nth-child(7) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg7.jpg);
}
.content__item:nth-child(8) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg8.jpg);
}
.content__item:nth-child(9) .content__item__img {
background-image: url(https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg9.jpg);
}
/* nav */
.paraNav {
position: fixed;
right: 20px; top: 20px;
z-index: 1000;
background: rgba(0,0,0,.4);
padding: 15px 20px;
border-radius: 50px;
transition: top 0.4s ease;
}
.paraNav li {
display: inline-block;
list-style: none;
}
.paraNav li a {
color: #fff;
text-decoration: none;
display: inline-block;
padding: 5px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 30px;
}
.paraNav li.active a {
background: #fff;
color: #000;
}
/* info */
.paraScroll {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 1000;
background: rgba(0,0,0,.4);
color: #fff;
height: 40px;
line-height: 40px;
border-radius: 50px;
text-align: center;
font-size: 12px;
padding: 0px 20px;
}
/* 한번에 나타나기 */
/* .content__item__desc {
opacity: 0;
transform: translateY(100px) skew(30deg);
transition: all 0.63s ease-in-out;
}
.content__item__desc.show {
opacity: 1;
transform: translateY(0) skew(0);
} */
/* 한글자씩 나타나기 */
/* .content__item__desc span{
display: inline-block;
min-width: 1vw;
opacity: 0;
transform: translateY(100px) skew(30deg);
transition: all 0.43s ease-out;
}
.content__item__desc.show span:nth-child(1){transition-delay: 0.15s;}
.content__item__desc.show span:nth-child(2){transition-delay: 0.2s;}
.content__item__desc.show span:nth-child(3){transition-delay: 0.25s;}
.content__item__desc.show span:nth-child(4){transition-delay: 0.3s;}
.content__item__desc.show span:nth-child(5){transition-delay: 0.35s;}
.content__item__desc.show span:nth-child(6){transition-delay: 0.4s;}
.content__item__desc.show span:nth-child(7){transition-delay: 0.45s;}
.content__item__desc.show span:nth-child(8){transition-delay: 0.5s;}
.content__item__desc.show span:nth-child(10){transition-delay: 0.6s;}
.content__item__desc.show span:nth-child(11){transition-delay: 0.65s;}
.content__item__desc.show span:nth-child(12){transition-delay: 0.7s;}
.content__item__desc.show span:nth-child(13){transition-delay: 0.75s;}
.content__item__desc.show span:nth-child(15){transition-delay: 0.8s;}
.content__item__desc.show span:nth-child(16){transition-delay: 0.85s;}
.content__item__desc.show span:nth-child(17){transition-delay: 0.9s;}
.content__item__desc.show span:nth-child(18){transition-delay: 0.95s;}
.content__item__desc.show span:nth-child(19){transition-delay: 1.00s;}
.content__item__desc.show span:nth-child(20){transition-delay: 1.05s;}
.content__item__desc.show span:nth-child(21){transition-delay: 1.15s;}
.content__item__desc.show span:nth-child(22){transition-delay: 1.20s;}
.content__item__desc.show span:nth-child(23){transition-delay: 1.25s;}
.content__item__desc.show span{
opacity: 1;
transform: translateY(0) skew(0);
} */
/* 한 글자씩 나타나기
.content__item__desc span {
display: inline-block;
min-width: 1.1vw;
opacity: 0;
transform: translateY(100px) skew(30deg);
transition: all 0.33s ease-in-out;
}
.content__item__desc span.show {
opacity: 1;
transform: translate(0, 0) rotate(0);
} */
/* 한 글자씩 나타나기 (animate.css) */
.content__item__desc span {
display: inline-block;
min-width: 1.1vw;
opacity: 0;
}
.content__item__desc span.show {
opacity: 1;
animation: zoomInUp 1.3s;
}
@keyframes opacity {
0% {opacity: 0; transform: translateY(50px);}
100% {opacity: 1; transform: translateY(0px);}
}
@keyframes rotate {
0% {opacity: 0; transform: translateY(150px) rotate(360deg);}
100% {opacity: 1; transform: translateY(0px) rotate(0);}
}
@keyframes rubberBand {
0% {transform: scale3d(1, 1, 1);}
30% {transform: scale3d(1.25, 0.75, 1);}
40% {transform: scale3d(0.75, 1.25, 1);}
50% {transform: scale3d(1.15, 0.85, 1);}
65% {transform: scale3d(0.95, 1.05, 1);}
75% {transform: scale3d(1.05, 0.95, 1);}
100% {transform: scale3d(1, 1, 1);}
}
@keyframes flipOutX {
0% {transform: perspective(400px);}
30% {transform: perspective(400px) rotate3d(0, 1, 0, -20deg); opacity: 1;}
100% {transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0;}
}
@keyframes rotateOut {
0% {opacity: 0; transform: rotate3d(0, 0, 1, 200deg);}
100% {opacity: 1;}
}
@keyframes zoomInUp {
0% {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
</style>
<body class="parallax">
<!-- info -->
<div class="paraScroll">scrollTop() : <span>0</span>px</div>
<!-- //info -->
<header id="paraHeader">
<h1>Parallax Effect07 - jQuery</h1>
<p>패럴랙스 스크롤링 효과 - 텍스트 효과</p>
</header>
<!-- //header -->
<!-- nav -->
<nav class="paraNav">
<ul>
<li class="active"><a href="#section1">s1</a></li>
<li><a href="#section2">s2</a></li>
<li><a href="#section3">s3</a></li>
<li><a href="#section4">s4</a></li>
<li><a href="#section5">s5</a></li>
<li><a href="#section6">s6</a></li>
<li><a href="#section7">s7</a></li>
<li><a href="#section8">s8</a></li>
<li><a href="#section9">s9</a></li>
</ul>
</nav>
<!-- //nav -->
<main id="paraCont">
<section id="section1" class="content__item">
<span class="content__item__num">01</span>
<h2 class="content__item__title">Section1</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">높은 목표를 세우고, 스스로 채찍질 한다.</p>
</section>
<!-- //section1 -->
<section id="section2" class="content__item">
<span class="content__item__num">02</span>
<h2 class="content__item__title">Section2</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">결과도 중요하지만, 과정을 더 중요하게 생각한다.</p>
</section>
<!-- //section2 -->
<section id="section3" class="content__item">
<span class="content__item__num">03</span>
<h2 class="content__item__title">Section3</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">매 순간에 최선을 다하고, 끊임없이 변화한다.</p>
</section>
<!-- //section3 -->
<section id="section4" class="content__item">
<span class="content__item__num">04</span>
<h2 class="content__item__title">Section4</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">모든지 기본을 중요하게 생각하고 행동한다.</p>
</section>
<!-- //section4 -->
<section id="section5" class="content__item">
<span class="content__item__num">05</span>
<h2 class="content__item__title">Section5</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">열정을 잃지 않고 실패에서 실패로 걸어가는 것이 성공이다.</p>
</section>
<!-- //section5 -->
<section id="section6" class="content__item">
<span class="content__item__num">06</span>
<h2 class="content__item__title">Section6</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">천 마디 말보단 하나의 행동이 더 값지다.</p>
</section>
<!-- //section6 -->
<section id="section7" class="content__item">
<span class="content__item__num">07</span>
<h2 class="content__item__title">Section7</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">조그만 성공에 만족하지 않으며, 방심을 경계한다.</p>
</section>
<!-- //section7 -->
<section id="section8" class="content__item">
<span class="content__item__num">08</span>
<h2 class="content__item__title">Section8</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">나는 내가 더 노력할수록 운이 더 좋아진다는 걸 발견했다</p>
</section>
<!-- //section8 -->
<section id="section9" class="content__item">
<span class="content__item__num">09</span>
<h2 class="content__item__title">Section9</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">꿈이 있다면, 그 꿈을 잡고 절대 놓아주지마라.</p>
</section>
<!-- //section9 -->
</main>
<!-- //main -->
<footer id="paraFooter">
<h2>Parallax <em>Scrolling</em></h2>
<div class="footerInfo">
<h3>제이쿼리</h3>
<ul>
<li><a href="parallaxEffect01-jquery.html">1</a></li>
<li><a href="parallaxEffect02-jquery.html">2</a></li>
<li><a href="parallaxEffect03-jquery.html">3</a></li>
<li><a href="parallaxEffect04-jquery.html">4</a></li>
<li><a href="parallaxEffect05-jquery.html">5</a></li>
<li><a href="parallaxEffect06-jquery.html">6</a></li>
<li class="active"><a href="parallaxEffect07-jquery.html">7</a></li>
<li><a href="parallaxEffect08-jquery.html">8</a></li>
</ul>
</div>
<div class="footerInfo">
<h3>자바스크립트</h3>
<ul>
<li><a href="parallaxEffect01-javascript.html">1</a></li>
<li><a href="parallaxEffect02-javascript.html">2</a></li>
<li><a href="parallaxEffect03-javascript.html">3</a></li>
<li><a href="parallaxEffect04-javascript.html">4</a></li>
<li><a href="parallaxEffect05-javascript.html">5</a></li>
<li><a href="parallaxEffect06-javascript.html">6</a></li>
<li><a href="parallaxEffect07-javascript.html">7</a></li>
<li><a href="parallaxEffect08-javascript.html">8</a></li>
</ul>
</div>
</footer>
<!-- //footer -->
<!-- script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
// //글씨 나누기(한개)
// let text = $("#section1 .content__item__desc").text();
// let split = text.split('').join("</span><span>");
// split = "<span>" + split + "</span>";
// $("#section1 .content__item__desc").html(split);
//글씨 나누기(여러개)
$(".content__item__desc").each(function(){
let text = $(this).text();
let split = text.split('').join("</span><span aria-hidden='true'> ");
split = "<span aria-hidden='true'>" + split + "</span>";
$(this).html(split).attr("aria-label", text);
})
//나타나기
$(window).scroll(function(){
// if($(window).scrollTop() >= $("#section1").offset().top){
// $("#section1 .content__item__desc").addClass("show");
// }
// if($(window).scrollTop() >= $("#section2").offset().top){
// $("#section2 .content__item__desc").addClass("show");
// }
// if($(window).scrollTop() >= $("#section3").offset().top){
// $("#section3 .content__item__desc").addClass("show");
// }
// if($(window).scrollTop() >= $("#section4").offset().top){
// $("#section4 .content__item__desc").addClass("show");
// }
// if($(window).scrollTop() >= $("#section5").offset().top){
// $("#section5 .content__item__desc").addClass("show");
// }
// if($(window).scrollTop() >= $("#section6").offset().top){
// $("#section6 .content__item__desc").addClass("show");
// }
// if($(window).scrollTop() >= $("#section7").offset().top){
// $("#section7 .content__item__desc").addClass("show");
// }
// if($(window).scrollTop() >= $("#section8").offset().top){
// $("#section8 .content__item__desc").addClass("show");
// }
// if($(window).scrollTop() >= $("#section9").offset().top){
// $("#section9 .content__item__desc").addClass("show");
// }
//each()
// $(".content__item__desc").each(function(){
// if($(window).scrollTop() >= $(this).offset().top -$(window).height()/2){
// $(this).addClass("show");
// }
// });
// //한글자씩 나타나기
// if( $(window).scrollTop() >= $("#section1").offset().top){
// $("#section1 .content__item__desc span").each(function(index){
// setTimeout(function(){
// $("#section1 .content__item__desc span").eq(index).addClass("show");
// }, 50 * index);
// });
// }
// if( $(window).scrollTop() >= $("#section2").offset().top){
// $("#section2 .content__item__desc span").each(function(index){
// setTimeout(function(){
// $("#section2 .content__item__desc span").eq(index).addClass("show");
// }, 50 * index);
// });
// }
// if( $(window).scrollTop() >= $("#section3").offset().top){
// $("#section3 .content__item__desc span").each(function(index){
// setTimeout(function(){
// $("#section3 .content__item__desc span").eq(index).addClass("show");
// }, 50 * index);
// });
// }
//for문
for( let i=1; i<=9; i++ ){
if( $(window).scrollTop() >= $("#section"+i).offset().top ){
$("#section"+i+" .content__item__desc span").each(function(index){
setTimeout(function(){
$("#section"+i+" .content__item__desc span").eq(index).addClass("show");
}, 50 * index);
});
}
}
//each()문
});
</script>
</body>
</html>'내마음대로만들어보자 > JS' 카테고리의 다른 글
| Parallax Effect - Jquery (리빌효과) (0) | 2022.02.19 |
|---|---|
| Parallax Effect - Javascript (텍스트효과) (0) | 2022.02.19 |
| Parallax Effect - Javascript (이질감효과) (0) | 2022.02.12 |
| Parallax Effect - Javascript (나타나기) (0) | 2022.01.31 |
| Parallax Effect - Jquery (이질감효과) (0) | 2022.01.31 |