728x90
반응형
티스토리 꾸미기
tistory
-
이전글 다음글
플로팅
추천 글 기능 만들기
#2
들어가면서..
- "이전글 다음글 플로팅 추천 글 기능 만들기 #1"에서 줄리박님 디자인으로 변경하고, 플로팅 뜨는것 까지 확인했다.
이제 상미넴님 스크립트를 참고해서 이전글보기, 다음글보기, 닫기를 화면에 추가하고 기능을 달아보자
↓↓↓ 이전글 다음글 플로팅 추천 글 기능 만들기 #1
티스토리 꾸미기 tistory - 이전글, 다음글 플로팅 추천 글 기능 만들기 #1
티스토리 꾸미기 tistory - 이전글 다음글 플로팅 추천 글 기능 만들기 #1 들어가면서.. 먼저 상미넴님 티스토리에서 가져온 코드와 구글링하면서 코드팬에 귀염귀염한 박줄리님이 만드신(?) 디자
yourusername.tistory.com
html 화면 수정 - 이전글, 다음글, 닫기 버튼 추가.
- dot two div는 지우고 dot div 아래에 svg로 x 를 만들어 넣고 , message div에 아래와 같이 글을 적어준다.
- button-group div를 만들고 아래 button을 다음과 같이 2개 추가한다.
<div id="recommend-contents" class="recommend-contents-wrap" style="display:none;">
<div id="success-box">
<div class="dot">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 145.2">
<line class="path line" fill="none" stroke="#D06079" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10" x1="34.4" y1="37.9" x2="95.8" y2="92.3"></line>
<line class="path line" fill="none" stroke="#D06079" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2"></line>
</svg>
</div>
<div class="face">
<div class="eye"></div>
<div class="eye right"></div>
<div class="mouth happy"></div>
</div>
<div class="shadow scale"></div>
<div class="message"><h1 class="alert">잠깐만요!</h1><p>이 글도 한번 보고 가세요🧡!</p></div>
<div class="buttons-group">
<button id="pre-content" class="button-box pre-content"></button>
<button id="next-content" class="button-box next-content"></button>
</div>
</div>
</div>
css 수정
- svg로 만든 x 넣을자리를 확보 한다 (.recommend-contents-wrap .dot 에 width, height 를 15px로 좀 키워준다. )
- 그리고 x 버튼에 마우스 올릴경우 x 버튼을 좀 잘보이게 빨갛게 표시해주도록 css에 추가한다.
.recommend-contents-wrap .dot:hover .path {
stroke: red;
}- 이전글 보기 버튼, 다음글 보기 버튼을 묶고 있는 버튼그룹 css를 추가해준다.
.recommend-contents-wrap .buttons-group {
position: absolute;
width: 100%;
height: 20%;
text-align: center;
}- 기존 .recommend-contents-wrap .button-box 에 width를 45%, height를 100%로 수정하고 position이랑 left 속성을 삭제한다.
- 마지막으로 post 제목이 들어가는 a tag css를 추가해준다. (2번째 라인까지 보여주고 그 이후로 넘어가는 글씨는 "..." 으로 보여준다.
.button-box a {
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
line-height: 1.2em;
height: 2.4em;
}
중간확인
마무리
1. 이전글, 다음글은 기능이 제대로 동작하는지 확인한다
2. x 버튼 눌렀을떄 닫는 기능 추가해야한다.
3. 플로팅 시간을 10초로 줄인다
- 1번은 확인함.
- 2번, x 버튼 눌렀을때 닫는기능은 기존 함수를 좀 수정하고, 함수를 하나 추가한다.
먼저 함수를 rerommendHide() 함수를 하나 추가하고, 기존 recommendPost함수 안에 setTimeout(function()... 에 있는 스크립트를 지우고 대신 방금 추가한 rerommendHide() 함수를 호출하도록 넣어준다.
function rerommendHide(){
$('#recommend-contents').animate({'right':'-350px'}, 1000, 'swing', function() {
$('#recommend-contents').css('display','none');
recommendPostTimer = 0;
});
}
끝 - 확인
- css최종소스
.recommend-contents-wrap {
position: fixed;
z-index: 999;
}
.recommend-contents-body {
display: flex;
}
.content-comment {
margin: 0 0 5px 0;
padding: 8px;
width: 294px;
font-weight: bold;
font-style: italic;
border-radius: 5px;
font-size: 0.8em;
}
.content-box {
padding: 5px;
width: 142px;
display: flex;
align-items: center;
border-radius: 5px;
font-weight: bold;
}
.content-box .content-arrow:nth-child(1) {
padding-right: 5px;
}
.content-box .content-arrow:nth-child(2) {
padding-left: 5px;
}
.content-box:nth-child(1) {
margin-right: 5px;
}
.pre-content,
.next-content {
font-size: 0.7em;
overflow: hidden;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-align: center;
width: inherit;
}
.no-post {
opacity: 0.5;
}
.recommend-contents-wrap h1 {
font-size: 0.9em;
font-weight: 100;
letter-spacing: 3px;
padding-top: 5px;
color: #FCFCFC;
padding-bottom: 5px;
text-transform: uppercase;
}
.recommend-contents-wrap .green {
color: #99DBB4;
filter: brightness(90%);
}
.recommend-contents-wrap .red {
color: #EF8D9C;
filter: brightness(90%);
}
.recommend-contents-wrap .alert {
font-weight: 700;
letter-spacing: 5px;
}
.recommend-contents-wrap p {
margin-top: -5px;
font-size: 0.8em;
font-weight: 300;
color: #777777;
filter: brightness(90%);
letter-spacing: 1px;
}
.recommend-contents-wrap button, .recommend-contents-wrap .dot {
cursor: pointer !important;
}
.recommend-contents-wrap #success-box {
width: 294px;
height: 250px;
left: 12%;
background: linear-gradient(to bottom right, #B0DB7D 40%, #99DBB4 100%);
border-radius: 20px;
box-shadow: 5px 5px 20px rgba(#CBCDD3, 10%);
perspective: 40px;
}
.recommend-contents-wrap #error-box {
position: absolute;
width: 35%;
height: 100%;
right: 12%;
background: linear-gradient(to bottom left, #EF8D9C 40%, #FFC39E 100%);
border-radius: 20px;
box-shadow: 5px 5px 20px rgba(#CBCDD3, 10%);
}
.recommend-contents-wrap .dot {
width: 15px;
height: 15px;
background: #FCFCFC;
border-radius: 50%;
position: absolute;
top: 4%;
right: 6%;
}
.recommend-contents-wrap .dot:hover {
background: #FCFCFC;
filter: brightness(80%);
}
.recommend-contents-wrap .dot:hover .path {
stroke: red;
}
.recommend-contents-wrap .two {
right: 12%;
opacity: .5;
}
.recommend-contents-wrap .face {
position: absolute;
width: 22%;
height: 22%;
background: #FCFCFC;
border-radius: 50%;
border: 1px solid #777777;
top: 21%;
left: 37.5%;
z-index: 2;
animation: recommend-contents-wrap-bounce 1s ease-in infinite;
}
.recommend-contents-wrap .face2 {
position: absolute;
width: 22%;
height: 22%;
background: #FCFCFC;
border-radius: 50%;
border: 1px solid #777777;
top: 21%;
left: 37.5%;
z-index: 2;
animation: recommend-contents-wrap-roll 3s ease-in-out infinite;
}
.recommend-contents-wrap .eye {
position: absolute;
width: 5px;
height: 5px;
background: #777777;
border-radius: 50%;
top: 40%;
left: 20%;
}
.recommend-contents-wrap .right {
left: 68%;
}
.recommend-contents-wrap .mouth {
position:absolute;
top: 43%;
left: 41%;
width: 7px;
height: 7px;
border-radius: 50%;
}
.recommend-contents-wrap .happy {
border: 2px solid;
border-color: transparent #777777 #777777 transparent;
transform: rotate(45deg);
}
.recommend-contents-wrap .sad {
top: 55%;
border-radius: 100% !important;
border: 2px solid;
border-color: #777777;
}
.recommend-contents-wrap .shadow {
position: absolute;
width: 21%;
height: 3%;
opacity: .5;
background: #777777;
left: 40%;
top: 43%;
border-radius: 50%;
z-index: 1;
}
.recommend-contents-wrap .scale {
animation: recommend-contents-wrap-scale 1s ease-in infinite;
}
.recommend-contents-wrap .move {
animation: recommend-contents-wrap-move 3s ease-in-out infinite;
}
.recommend-contents-wrap .message {
position: absolute;
width: 100%;
text-align: center;
height: 40%;
top: 47%;
}
.recommend-contents-wrap .buttons-group {
position: absolute;
top: 73%;
width: 100%;
height: 20%;
text-align: center;
}
.recommend-contents-wrap .button-box {
background: #FCFCFC;
width: 45%;
height: 100%;
border-radius: 20px;
display: inline;
outline: 0;
border: none;
box-shadow: 2px 2px 10px rgba(#777777, .5);
transition: all .5s ease-in-out;
}
.recommend-contents-wrap .button-box:hover {
background: #FCFCFC;
filter: brightness(95%);
transform: scale(1.05);
transition: all .3s ease-in-out;
}
.recommend-contents-wrap button {
pointer-events : initial;
}
.button-box a {
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
line-height: 1.2em;
height: 2.4em;
}
@keyframes recommend-contents-wrap-bounce {
50% {
transform: translateY(-10px);
}
}
@keyframes recommend-contents-wrap-scale {
50% {
transform: scale(0.9);
}
}
@keyframes recommend-contents-wrap-roll {
0% {
transform: rotate(0deg);
left: 25%;
}
50% {
left: 60%;
transform: rotate(168deg);
}
100% {
transform: rotate(0deg);
left: 25%;
}
}
@keyframes recommend-contents-wrap-move {
0% {
left: 25%;
}
50% {
left: 60%;
}
100% {
left: 25%;
}
}
- Html 최종소스
<div id="recommend-contents" class="recommend-contents-wrap" style="display:none;">
<div id="success-box">
<div class="dot" onclick="rerommendHide()">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 145.2">
<line class="path line" fill="none" stroke="#D06079" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10" x1="34.4" y1="37.9" x2="95.8" y2="92.3"></line>
<line class="path line" fill="none" stroke="#D06079" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2"></line>
</svg>
</div>
<div class="face">
<div class="eye"></div>
<div class="eye right"></div>
<div class="mouth happy"></div>
</div>
<div class="shadow scale"></div>
<div class="message"><h1 class="alert">잠깐만요!</h1><p>이 글도 한번 보고 가세요🧡!</p></div>
<div class="buttons-group">
<button id="pre-content" class="button-box pre-content"></button>
<button id="next-content" class="button-box next-content"></button>
</div>
</div>
</div>
- 스크립트 최종소스
<script>
var prePostFlag = true;
var nextPostFlag = true;
function makeRecommendBlock(type, currentIndex) {
if(prePostFlag && type == 'pre') {
prePostFlag = false;
$('#pre-content').append($('.another_category tr').eq(currentIndex+1).find('a').clone());
$('#next-content').append('<a href="#" class="no-post">다음 글 없음</a>');
$('.content-box .content-arrow').eq(1).addClass('no-post');
} else if(nextPostFlag && type == 'next') {
nextPostFlag = false;
$('#next-content').append($('.another_category tr').eq(currentIndex-1).find('a').clone());
$('#pre-content').append('<a href="#" class="no-post">이전 글 없음</a>');
$('.content-box .content-arrow').eq(0).addClass('no-post');
} else if(prePostFlag && nextPostFlag && type == 'both') {
prePostFlag = false;
nextPostFlag = false;
$('#pre-content').append($('.another_category tr').eq(currentIndex+1).find('a').clone());
$('#next-content').append($('.another_category tr').eq(currentIndex-1).find('a').clone());
}
}
var recommendPostFlag = true;
var recommendPostTimer = 0;
var preRecommendPosition = -1;
function rerommendHide(){
$('#recommend-contents').animate({'right':'-350px'}, 1000, 'swing', function() {
$('#recommend-contents').css('display','none');
recommendPostTimer = 0;
});
}
function recommendPost() {
if($('.another_category').length > 0) {
var position = window.scrollY/($('.another_category').offset().top-window.innerHeight);
if(position > 1 && window.scrollY-$('.another_category').offset().top < 0 && preRecommendPosition < window.scrollY) {
if(recommendPostFlag) {
recommendPostFlag = false;
var anotherCategory = $('.another_category tr');
var currentIndex = -1;
if(anotherCategory.length > 1) {
for(var i=0;i<anotherCategory.length;i++) {
if(anotherCategory.eq(i).find('a.current').length > 0) {
currentIndex = i;
break;
}
}
if(currentIndex > 0 && currentIndex < anotherCategory.length-1) { //이전 글, 다음 글 가능
makeRecommendBlock('both', currentIndex);
} else {
if(currentIndex == 0) { //이전 글 가능
makeRecommendBlock('pre', currentIndex);
} else if(anotherCategory.length > 1) { //다음 글 가능
makeRecommendBlock('next', currentIndex);
}
}
}
if((!prePostFlag || !nextPostFlag) && recommendPostTimer == 0) {
var rightMargin = 0;
if(window.innerWidth > 310) {
rightMargin = 10;
} else {
rightMargin = (window.innerWidth - 310) / 2;
}
var bottomMargin = 75;
$('#recommend-contents').css('bottom', bottomMargin+'px');
$('#recommend-contents').css('right', '-350px');
$('#recommend-contents').css('display','block');
recommendPostTimer = $('#recommend-contents').animate({'right':rightMargin+'px'}, 1000, 'swing', function() {});
recommendPostTimer = setTimeout(function() {
rerommendHide();
}, 10000);
}
}
} else {
recommendPostFlag = true;
}
preRecommendPosition = window.scrollY;
}
}
$(window).on('scroll resize', function() {
recommendPost();
});
</script>
- 참고
"만약에 이 글도 한번 보고 가세요" 글씨가 너무 작다고 생각되면
css에서 아래 클래스를 찾아서 font-size(폰트사이즈) 하고 font-weight(폰트굵기) 를 취향에 맞게
수정해주면된다
저도 보다보니 좀 작다고 생각되서 아래처럼 수정했음
.recommend-contents-wrap p {
margin-top: -5px;
font-size: 0.8em;
font-weight: 300;
color: #777777;
filter: brightness(90%);
letter-spacing: 1px;
}
마지막으로, 초록색 디자인만 나오면 심심하니까, 다음 글에서는 현재 분(min)이 홀수면 위에 작업한 초록색, 짝수면 아래 처럼 핑크색 디자인이 나오도록 하는 작업을 해보겠다.
728x90
반응형