안녕하세요~^^

말씀하신 건 페이드인 효과입니다.

KBoard 퍼스트 콘텐츠몰 스킨에도 적용하시려면

워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

아래의 코드를 추가해보세요.

#kboard-first-contents-mall-list .kboard-list .kboard-list-item.animation-fadein { visibility: visible; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }

테마의 functions.php 파일 또는 Code Snippets 플러그인을 사용해서

아래의 코드를 추가해보세요.

add_action('kboard_skin_header', 'kboard_skin_header_20201012', 10, 1);
function kboard_skin_header_20201012($builder){
	$board = $builder->board;

	if($board->id == '1'){ // 실제 게시판 id로 적용해주세요.
		add_action('wp_footer', 'wp_footer_20201012');
	}
}
function wp_footer_20201012(){
	?>
	<script>
	jQuery(document).ready(function(){
		setTimeout(function(){
			jQuery('#kboard-first-contents-mall-list .kboard-list .kboard-list-item').kboardViewport(function(px){
				if(px && !jQuery(this).hasClass('animation-fadein')){
					jQuery(this).addClass('animation-fadein');
				}
			});
		});
	});
	</script>
	<?php
}

위의 코드에서 $board->id == '1' 부분은 실제 게시판 id로 적용해주세요.

고맙습니다.

안녕하세요~ 답변감사드립니다.

혹시.. 특별히 css를 건들지 않은 기본 콘텐츠몰 사이트에서

알려주신 코드들이 전혀 적용되지않는데 혹시 다른방법이있을까요..?ㅠ

페이드인 효과가 적용된 스킨이 설치되어 있지 않다면

아래의 CSS 코드도 추가해서 확인해보시겠어요?

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

고맙습니다.

PC에서 정말 잘 작동됩니다. 정말 감사합니다!

한가지만 더 질문드려드릴께요 ㅠ

모바일에서도 작동하는데

모바일에서는 리스트이미지들은 천천히 스크롤 내리면 반쯤 기존 효과없이 이미지가 보이다가 스크롤이 이미지 반이상 넘어가면  effect 효과가 적용되면서

뒤늦게 이미지에 효과가 적용되고있습니다.

PC에서는 정상적으로 조금만 그영역에 들어가도 기존이미지가 안보이고 바로 효과가 적용된 이미지가 잘 나오더라구요..

혹시 모바일에서도 기존이미지가 안보이고 효과가 바로 적용될수있도록 가능할까요??

올려주신 내용이 이해가 잘 가지 않습니다.

저희 쪽 테스트 서버에서는 별 다른 문제를 확인하지 못했습니다.

저희 퓨어 갤러리 데모 페이지에서도 같은 현상이 있는지요?

https://www.cosmosfarm.com/demo/kboard-pure-gallery-skin/

사용 중이신 테마나 다른 플러그인과 충돌은 없는지 확인해보셔야 할 듯합니다.

그래도 해결되지 않는다면

구글에 fadein 효과 키워드로 검색하셔서 다른 방법들도 참고해보셔야 할 듯합니다.

고맙습니다.

현재 현상은 위 코드를 콘텐츠몰게시판에 적용했을경우 모바일기기의 브라우저에서만 keyframe start 지점이 해당 영역의 50% 부터 시작되고있습니다.

퓨어 스킨은 정상적으로 모바일에서도 0%부터 작동되는것을 확인했습니다.

테마나 플러그인충돌인가하고 끄기도하고 변경해보아도 같은 현상이었습니다,

keyframe의 설정도 이것저것 변경해보아도 효과가없네요.. 

keyframe 설정 중 0% 20% 등이있던데 원하는건 모바일경우 -50%(그래야 0%와 동일할것같습니다) 가 시작지점이 되었으면하는데 다른방법이있을까요??ㅠ

혹시가능하시다면 확인한번만 부탁드려도될까요?

http://ipadfree.com/

모바일기기로 보았을때 첫페이지 리스트를 스크롤해보시면 나오는 현상입니다.

감사합니다.

이전 댓글에 안내해드린 코드 중

아래의 CSS 코드를 찾아보시겠어요?

#kboard-first-contents-mall-list .kboard-list .kboard-list-item.animation-fadein { visibility: visible; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }

해당 코드 위에 아래의 코드를 추가해서도 확인해보시겠어요?

#kboard-first-contents-mall-list .kboard-list .kboard-list-item { visibility: hidden; }

고맙습니다.