Animated Rainbow Nyan Cat
본문 바로가기
Effect/search

서치 이펙트 06

by 이유나1 2022. 10. 14.
728x90
반응형

서치 이펙트

원본 페이지 보기
원본 소스 보기

script 코드

 

const cssList = document.querySelector(".search__list .line"); 

        const cssProp = [];

        // 데이터 출력하기
        const updateList = () => {
            let listCSS = "";

            cssProperty.forEach((data, index) => {
                listCSS += `<li>${data.num}. <strong>${data.name}</strong> : ${data.desc}</li>`;
                cssProp.push(`<li>${data.num}. <strong>${data.name}</strong> : ${data.desc}</li>`);
            });
            cssList.innerHTML = listCSS;
        }
        updateList();

        // 반대로 정렬
        function sortReverse() {
            cssProperty.reverse();
            updateList();
        }

        // 내림차순 정렬
        function sortDescending() {
            cssProperty.sort((a, b) => {
                return b.num - a.num;
            });
            updateList();
        }

        // 오름차순 정렬
        function sortAscending() {
            cssProperty.sort((a, b) => {
                return a.num - b.num;
            });
            updateList();
        }

        // 알파벳 정렬(a~z)
        function sortAlphabet() {
            cssProperty.sort((prev, cur) => {
                const [upperPrev, upperCur] = [prev.name.toUpperCase(), cur.name.toUpperCase()]
                if (upperPrev > upperCur) return 1;
                if (upperPrev < upperCur) return -1;
            });
            updateList();
        }

        // 알파벳 정렬(z~a)
        function sortAlphabetZ() {
            cssProperty.sort((prev, cur) => {
                const [upperPrev, upperCur] = [prev.name.toUpperCase(), cur.name.toUpperCase()]
                if (upperPrev < upperCur) return 1;
                if (upperPrev > upperCur) return -1;
            });
            updateList();
        }

        // 반대로 정렬 클릭
        document.querySelector(".btn1").addEventListener("click", () => {
            sortReverse();
        });

        // 내림차순 정렬 클릭
        document.querySelector(".btn2").addEventListener("click", () => {
            sortDescending();
        });

        // 오름차순 정렬 클릭
        document.querySelector(".btn3").addEventListener("click", () => {
            sortAscending();
        });

        // 알파벳 정렬(a~z) 클릭
        document.querySelector(".btn4").addEventListener("click", () => {
            sortAlphabet();
        });

        // 알파벳 정렬(z~a) 클릭
        document.querySelector(".btn5").addEventListener("click", () => {
            sortAlphabetZ();
        });

        // 피셔 예이츠 알고리즘
        function shuffle(data) {
            for (let i = data.length - 1; i >= 0; i--) {
                const randomIndex = Math.floor(Math.random() * (i + 1));
                // console.log(randomIndex);
                [data[i], data[randomIndex]] = [data[randomIndex], data[i]];
                cssList.innerHTML += data[i];
            }
        }

        document.querySelector(".btn6").addEventListener("click", () => {
            cssList.innerHTML = "";
            shuffle(cssProp);
        });

CSS

코드 보기

 

 /* .parallax__nav */
        #parallax__nav {
            position: fixed;
            right: 20px;
            top: 20px;
            z-index: 20000;
            background-color: rgba(0, 0, 0, 0.4);
            padding: 20px 30px;
            border-radius: 50px;
            transition: top .4s ease;
        }

        #parallax__nav li {
            display: inline;
            margin: 0 5px;
        }

        #parallax__nav li a {
            display: inline-block;
            height: 30px;
            padding: 5px 20px;
            text-align: center;
            line-height: 30px;
        }

        #parallax__nav li.active a {
            background: #fff;
            color: #000;
            border-radius: 20px;
            box-sizing: content-box;
        }

        #parallax__cont {
            max-width: 1600px;
            width: 98%;
            margin: 0 auto;
            /* background-color: rgba(255, 255, 255, 0.1); */
        }

        .content__item {
            width: 1000px;
            max-width: 70vw;
            margin: 30vw auto;
            /* background-color: rgba(255, 255, 255, 0.3); */
            text-align: left;
            margin-right: 0;
            position: relative;
            padding-top: 7vw;
        }

        /*  .content__item 의 짝수만 선택 even , 2n = +,* 가능 */
        .content__item:nth-child(even) {
            margin-left: 0;
            text-align: right;
        }

        /* left 값 초기화 */
        .content__item:nth-child(even) .content__item__num {
            left: auto;
            right: -5vw;
        }

        .content__item__num {
            font-size: 35vw;
            font-family: 'Lato';
            font-weight: 100;
            position: absolute;
            left: -5vw;
            top: -16vw;
            opacity: 0.07;
            z-index: -2;
        }

        .content__item__title {
            font-weight: 400;
            text-transform: capitalize;
        }

        /* 이미지가 넘쳐서 감춰줌 */
        .content__item__imgWrap {
            width: 100%;
            padding-bottom: 56.25%;
            background: #000;
            position: relative;
            overflow: hidden;
            z-index: -1;
        }

        /* 실제 이미지 크기 */
        .content__item__img {
            position: absolute;
            background: url(../assets/img3/effect_bg01-min.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            width: 110%;
            height: 110%;
            left: -5%;
            top: -5%;
            filter: saturate(0%);
            /* transition: all 1s; */
        }

        .content__item:nth-child(1) .content__item__img {
            background-image: url(../assets/img3/effect_bg01-min.jpg);
        }

        .content__item:nth-child(2) .content__item__img {
            background-image: url(../assets/img3/effect_bg02-min.jpg);
        }

        .content__item:nth-child(3) .content__item__img {
            background-image: url(../assets/img3/effect_bg03-min.jpg);
        }

        .content__item:nth-child(4) .content__item__img {
            background-image: url(../assets/img3/effect_bg04-min.jpg);
        }

        .content__item:nth-child(5) .content__item__img {
            background-image: url(../assets/img3/effect_bg05-min.jpg);
        }

        .content__item:nth-child(6) .content__item__img {
            background-image: url(../assets/img3/effect_bg06-min.jpg);
        }

        .content__item:nth-child(7) .content__item__img {
            background-image: url(../assets/img3/effect_bg07-min.jpg);
        }

        .content__item:nth-child(8) .content__item__img {
            background-image: url(../assets/img3/effect_bg08-min.jpg);
        }

        .content__item__desc {
            font-size: 4vw;
            line-height: 1.4;
            margin-top: -5vw;
            margin-left: -4vw;
            word-break: keep-all;
        }

        .content__item:nth-child(even) .content__item__desc {
            margin-left: auto;
            margin-right: -4vw;
        }

        #parallax__info {
            position: fixed;
            left: 20px;
            bottom: 20px;
            z-index: 2000;
            background: rgba(0, 0, 0, 0.4);
            color: #fff;
            padding: 20px;
            border-radius: 10px;
        }

        #parallax__info li,
        .scrollTop {
            line-height: 1.4;
        }

        @media (max-width: 800px) {
            #parallax__cont {
                margin-top: 70vw;
            }

            #parallax__nav {
                padding: 10px;
                right: auto;
                left: 10px;
                top: 10px;
                border-radius: 5px;
                background-color: rgba(0, 0, 0, 0.8);
            }

            #parallax__nav li {
                display: block;
                margin: 5px;
            }

            #parallax__nav li a {
                font-size: 14px;
                padding: 5px;
                border-radius: 5px;
                height: auto;
                line-height: 1;
            }

            #parallax__nav li.active a {
                border-radius: 5px;
            }
        }

        /* option */
        /* .split span {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.6s ease-in-out;
            display: inline-block;
            min-width: 1vw;
        }

        .split.show span {
            opacity: 1;
            transform: translateY(0);
        } */

        /* .split span:nth-child(1) {
            transition-delay: 100ms;
        }

        .split span:nth-child(2) {
            transition-delay: 150ms;
        }

        .split span:nth-child(3) {
            transition-delay: 200ms;
        }

        .split span:nth-child(4) {
            transition-delay: 250ms;
        }

        .split span:nth-child(5) {
            transition-delay: 300ms;
        }

        .split span:nth-child(6) {
            transition-delay: 350ms;
        }

        .split span:nth-child(7) {
            transition-delay: 400ms;
        }

        .split span:nth-child(8) {
            transition-delay: 450ms;
        }

        .split span:nth-child(9) {
            transition-delay: 500ms;
        }

        .split span:nth-child(10) {
            transition-delay: 550ms;
        }

        .split span:nth-child(11) {
            transition-delay: 600ms;
        }

        .split span:nth-child(12) {
            transition-delay: 650ms;
        }

        .split span:nth-child(13) {
            transition-delay: 700ms;
        }

        .split span:nth-child(14) {
            transition-delay: 750ms;
        }

        .split span:nth-child(15) {
            transition-delay: 800ms;
        }

        .split span:nth-child(16) {
            transition-delay: 850ms;
        }

        .split span:nth-child(17) {
            transition-delay: 900ms;
        }

        .split span:nth-child(18) {
            transition-delay: 950ms;
        }

        .split span:nth-child(19) {
            transition-delay: 1000ms;
        }

        .split span:nth-child(20) {
            transition-delay: 1050ms;
        }

        .split span:nth-child(21) {
            transition-delay: 1100ms;
        }

        .split span:nth-child(22) {
            transition-delay: 1150ms;
        }

        .split span:nth-child(23) {
            transition-delay: 1200ms;
        }

        .split span:nth-child(24) {
            transition-delay: 1250ms;
        }

        .split span:nth-child(25) {
            transition-delay: 1300ms;
        }

        .split span:nth-child(26) {
            transition-delay: 1350ms;
        }

        .split span:nth-child(27) {
            transition-delay: 1400ms;
        }

        .split span:nth-child(28) {
            transition-delay: 1450ms;
        }

        .split span:nth-child(29) {
            transition-delay: 1500ms;
        }

        .split span:nth-child(30) {
            transition-delay: 1550ms;
        } */

        /* 순차적으로 나타나기 */
        .style1.split span {
            opacity: 0;
            min-width: 1vw;
            transition: all 0.3s ease-in-out;
        }

        .style1.split span.show {
            opacity: 1;
        }

        .style2.split span {
            opacity: 0;
            min-width: 1vw;
            transform: translateY(50px);
            display: inline-block;
            transition: all 0.3s ease-in-out;
        }

        .style2.split span.show {
            opacity: 1;
            transform: translateY(0);
        }

        .style3.split span {
            opacity: 0;
            min-width: 1vw;
            transform: translateY(50px) translatex(-130px) rotate(360deg);
            display: inline-block;
            transition: all 0.3s cubic-bezier(0, 0.28, 0, 1.2);
        }

        .style3.split span.show {
            opacity: 1;
            transform: translateY(0) translatex(0) rotate(0);
        }

        .style4.split span {
            opacity: 0;
            min-width: 1vw;
            display: inline-block;
        }

        .style4.split span.show {
            opacity: 1;
            animation: wobble 0.5s 1 ease-in forwards;
        }

        @keyframes wobble {
            0% {
                transform: translate3d(0, 0, 0);
                opacity: 0;
            }

            15% {
                transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            }

            30% {
                transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            }

            45% {
                transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            }

            60% {
                transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            }

            75% {
                transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            }

            100% {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }

        .style5.split span {
            display: inline-block;
            opacity: 0;
            min-width: 1vw;
        }

        .style5.split span.show {
            animation: flip 1s 1 ease-in forwards;
        }

        @keyframes flip {
            0% {
                transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
                animation-timing-function: ease-out;
                opacity: 0;
            }

            40% {
                transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
                animation-timing-function: ease-out;
            }

            50% {
                transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
                animation-timing-function: ease-in;
            }

            80% {
                transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
                animation-timing-function: ease-in;
            }

            100% {
                transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
                animation-timing-function: ease-in;
                opacity: 1;
            }
        }

        .style6.split span {
            display: inline-block;
            opacity: 0;
            min-width: 1vw;
        }

        .style6.split span.show {
            animation: pulse 1s 1 ease-in forwards;
        }

        @keyframes pulse {
            0% {
                opacity: 0;
                transform: scale3d(1, 1, 1);
            }

            50% {
                transform: scale3d(1.05, 1.05, 1.05);
            }

            100% {
                transform: scale3d(1, 1, 1);
                opacity: 1;
            }
        }

        .style7.split span {
            display: inline-block;
            opacity: 0;
            min-width: 1vw;
        }

        .style7.split span.show {
            animation: bounceInLeft 1s 1 ease-in forwards;
        }

        @keyframes bounceInLeft {

            0%,
            60%,
            75%,
            90%,
            100% {
                animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            }

            0% {
                opacity: 0;
                transform: translate3d(-3000px, 0, 0) scaleX(3);
            }

            60% {
                transform: translate3d(25px, 0, 0) scaleX(1);
            }

            75% {
                transform: translate3d(-10px, 0, 0) scaleX(0.98);
            }

            90% {
                transform: translate3d(5px, 0, 0) scaleX(0.995);
            }

            100% {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }

        .style8.split span {
            opacity: 0;
            min-width: 1vw;
            display: inline-block;
        }

        .style8.split span.show {
            animation: lightSpeedInLeft 0.5s 1 ease-in forwards;
        }

HTML

코드 보기

 

<main id="main">
    <div class="search__wrap">
        <span>sort(), reverse()를 이용하여 정렬하기</span>
        <h1>CSS 속성 검색하기</h1>

        <div class="search__click">
            <ul>
                <li><a href="#" class="btn1">반대로 정렬하기</a></li>
                <li><a href="#" class="btn2">오름차순 정렬하기</a></li>
                <li><a href="#" class="btn3">내림차순 정렬하기</a></li>
                <li><a href="#" class="btn4">알파벳순 (a~z)</a></li>
                <li><a href="#" class="btn5">알파벳순 (z~a)</a></li>
                <li><a href="#" class="btn6">랜덤 정렬하기</a></li>
            </ul>
        </div>

        <div class="search__info">
            <div>전체 속성 갯수 : <span class="num">0</span></div>
        </div>

        <div class="search__list">
            <ul class="line"></ul>
        </div>
    </div>
</main>
728x90

'Effect > search' 카테고리의 다른 글

서치 이펙트 07  (0) 2022.10.14
search 03  (3) 2022.08.22
search 02  (2) 2022.08.18
search 01  (3) 2022.08.16

관련글

댓글

/

JA
/

HTML
/

CSS
광고준비중입니다.

티스토리툴바