mbg1346 - 레이아웃 배경 이미지 좌로 흐르는 기법 적용

첨부파일	등록일	파일크기	다운 수
back.css	2023.07.18	2.1KB	18

첨부파일

등록일

파일크기

다운 수

back.css

2023.07.18

2.1KB

Extra Form
원작자	80san
적용여부	적용
적용페이지	https://moonhouse.co.kr/total1
적용시점 버전	Rhymix 2.1.2

원작자

80san

적용여부

적용

적용페이지

https://moonhouse.co.kr/total1

적용시점 버전

Rhymix 2.1.2

레이아웃에 배경이미지를 적용하고 배경 이미지가 좌로 슬라이딩 되면서 흘러가게 적용하는 방법입니다.

먼저 사용하고자 하는 레이아웃의 layout.html 파일을 편집기로 엽니다.

제일 하단에 아래 소스를 추가합니다.

<block cond="$li->back_img">
    <load target="css/back.css" />
    <block cond="!$li->back_col">{@ $li->back_col = 'transparent'}</block>
    <block cond="!$li->back_opacity">{@ $li->back_opacity = '0.2'}</block>

    <style>
        #bg { background:{$li->back_col} url("{$li->back_img}") bottom left; opacity:{$li->back_opacity}; background-repeat:repeat-x; }
    </style>

    <div id="bg"></div>
</block>

info.xml 파일에 아래 코드 추가

<var name="back_img" type="image">
    <title xml:lang="ko">★배경이미지</title>
    <description xml:lang="ko">배경 이미지 등록(가로 1500px 정도의 크기가 적당)</description>
</var>
<var name="back_col" type="text">
    <title xml:lang="ko">　┖  배경 색상</title>
    <description xml:lang="ko">배경 색상을 선택 (기본 투명 transparent) </description>
</var>
<var name="back_opacity" type="text">
    <title xml:lang="ko">　┖  배경 투명도</title>
    <description xml:lang="ko">배경 투명도를 선택 (기본 0.2) </description>
</var>

css폴더에 back.css 파일 업로드 합니다.

#bg {
    -moz-animation: bg 60s linear infinite;
    -webkit-animation: bg 60s linear infinite;
    -ms-animation: bg 60s linear infinite;
    animation: bg 60s linear infinite;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    z-index:-1
}

@-moz-keyframes bg {
    0% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    100% {
        -moz-transform: translate3d(-2250px,0,0);
        -webkit-transform: translate3d(-2250px,0,0);
        -ms-transform: translate3d(-2250px,0,0);
        transform: translate3d(-2250px,0,0);
    }
}

@-webkit-keyframes bg {
    0% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    100% {
        -moz-transform: translate3d(-2250px,0,0);
        -webkit-transform: translate3d(-2250px,0,0);
        -ms-transform: translate3d(-2250px,0,0);
        transform: translate3d(-2250px,0,0);
    }
}

@-ms-keyframes bg {
    0% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    100% {
        -moz-transform: translate3d(-2250px,0,0);
        -webkit-transform: translate3d(-2250px,0,0);
        -ms-transform: translate3d(-2250px,0,0);
        transform: translate3d(-2250px,0,0);
    }
}

@keyframes bg {
    0% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    100% {
        -moz-transform: translate3d(-2250px,0,0);
        -webkit-transform: translate3d(-2250px,0,0);
        -ms-transform: translate3d(-2250px,0,0);
        transform: translate3d(-2250px,0,0);
    }
}

#bg {
    background-size: 2250px auto;
    width: 6750px;
}

샘플 이미지

배경 색상 #348cb2 적용해 보세요

레이아웃 배경 이미지 좌로 흐르는 기법 적용

단축키

단축키

Xe Tips

레이아웃 배경 이미지 좌로 흐르는 기법 적용

레이아웃 배경 이미지 좌로 흐르는 기법 적용

단축키

단축키

Xe Tips

레이아웃 배경 이미지 좌로 흐르는 기법 적용

LOGIN