아무래도 7note입니다. 스크롤하면 중간에 표정으로 나오는 이미지를 만드는 방법을 설명

지난 몇 년 동안 웹 배너 광고가 매우 늘어난 것 같습니다. 그 중에서도 스크롤하고 있으면 갑자기 나오는 배너계.

개인적으로는 시선을 빼앗기므로 스트레스가 되고 싫지만, 제대로 원하는 정보가 나오면 좋은 구조라고 생각합니다.

이번은 간이적으로 "일정 거리 스크롤하면 화면 아래에서 나오는 배너 이미지"를 만들어갑니다.

스크롤하면 나오는 배너 이미지를 만드는 방법

index.html

〜〜〜〜省略〜〜〜〜

<div class="banner">
  <img src="banner.png" alt="">
</div>

〜〜〜〜省略〜〜〜〜

style.css

.banner {
  width: 100%;
  background: #aaa;
  display: none;    /* 最初は非表示にする */
  position: fixed;  /* 表示位置を固定 */
  bottom: 0;
  left: 0;
  padding: 5px;
  box-sizing: border-box;
}
.banner img {
  width: 100%;
}

script.js

$(window).scroll(function () {
  var pos = 800; // ①上からの距離(px)で指定する場合
  var pos = document.body.clientHeight / 3; // ②上からの割合(%)で指定する場合
  if ($(this).scrollTop() > pos) {
    $('.banner').fadeIn();
  } else {
    $('.banner').fadeOut();
  }
});

※①이나 ②는 원하는 분을 지정해 주십시오.

해설

배너를 내는 타이밍을 결정하기 위해 스크롤 량을 측정합니다.
스크롤량의 설정 방법으로서는 크게 2개의 선택이 있어,

· 위에서 XXpx 진행하거나 아래에서 XXpx까지 가면
· 전체 페이지를 몇 스크롤 했습니까?

위와 같은 두 가지 방법이 있습니다. 비율로 결정하는지, 위, 혹은 아래로부터의 거리로 지정을 할 수 있습니다.

또 or를 사용해 양쪽의 사양을 적응시켜, 「50%의 곳까지 스크롤 되면, 혹은 페이지가 길 때에는 위로부터 1500px스크롤 되면,,,」같은 쓰는 방법도 가능합니다.

배너 이미지를 내는 타이밍의 스크립트를 쓸 수 있으면, 다음은 이미지를 표시하는 처리를 씁니다.

이번에는 fadein, fadeout을 사용하여 표시를 전환하고 있습니다만, 클래스를 부여하면 나오도록 표시시용 CSS를 작성하는 방법도 있습니다.

이것으로 완성이군요.

요약

이번은 자작으로 만드는 방법을 해설했습니다만, 많은 사이트는 전용의 툴을 도입하고 있는 것일까? 라고 생각합니다.

툴을 도입하는 것으로, 실제로 어느 정도의 연대나 성별의 사람이 어느 비율로 클릭했는지 등의 계측을 할 수 있는 툴로서 팔리고 있습니다.

처음에도 썼습니다만, 개인적으로는 유저의 움직임에 반하는 광고이므로 그 중 폐해지는 것은 아닙니다. . . 얼마나 마음대로 생각하고 있습니다. (※개인의 감상입니다)

웹의 업계는 유행 폐기가 격렬하기 때문에, 또 새로운 수법이 점점 나올 것입니다.
시대에 맞춘 웹을 만들 수 있게 되고 싶은 것이군요.

소마츠!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임