HTML, CSS, JS 활용 - 11 ~ 14강

11강 - 로딩화면 구현해야 하는 이유와, AOS, imagesLoaded, imgur, Image Downloader

• AOS
• animate css
• 이미지가 필요할 때 - Lorem picsum
• Image Downloader
• 이미지 호스팅 - imgur
• CDN - imagesloaded
  • https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/5.0.0/imagesloaded.pkgd.min.js

CODEPEN - 1부

[html]

<!-- aos -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<div>
    <img src="https://picsum.photos/500/2300" alt="">
</div>
<div>
    <div data-aos="fade-up" data-aos-once="true">FADE</div>
    <img src="https://picsum.photos/500/2300" alt="">
</div>

[css]

body {
    font-size: 5rem;
    font-weight: bold;
}

[js]

console.clear();

setTimeout(function() {
    AOS.init();
}, 4000);

 

CODEPEN - 2부

[html]

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 이미지로딩 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
<!-- aos -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<div>
    <img src="https://picsum.photos/id/217/500/2300" alt="">
</div>
<div>
    <div data-aos="fade-up" data-aos-once="true">FADE</div>
    <img src="https://picsum.photos/id/201/500/2300" alt="">
</div>

[css]

body {
    font-size: 5rem;
    font-weight: bold;
}

 

[js]

console.clear();

$('body').imagesLoaded(function() {
    AOS.init();
});

 

CODEPEN - 3부

 

[html]

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 이미지로딩 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
<!-- aos -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<div class="loading"></div>

<div>
    <img src="https://picsum.photos/id/217/500/2300" alt="">
</div>
<div>
    <div data-aos="fade-up" data-aos-once="true">FADE</div>
    <img src="https://picsum.photos/id/201/500/2300" alt="">
</div>

 

[css]

body {
    font-size: 3rem;
    font-weight: bold;
}

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading::after {
    content: "로딩중..";
    font-size: 1rem;
    font-weight: normal;
}

 

[js]

console.clear();

$('body').imagesLoaded(function() {
    // $('.loading').css('display', 'none');
    // $('.loading').hide();
    $('.loading').remove();
    AOS.init();
});

동영상

2603, HTML, CSS, JS 활용, 로딩 화면 구현하기, AOS, imagesLoaded, animate 소개

12강 - mousemove effect (CODEPEN)

[html]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<img class="mousemove-effect-1-el" data-mousemove-effect1-hor-res="0.05" data-mousemove-effect1-ver-res="0.05" src="https://www.gimhae.go.kr/_res/portal/img/sub/05/p01047_img8.png" alt="">

<img class="mousemove-effect-1-el" data-mousemove-effect1-hor-res="0.01" data-mousemove-effect1-ver-res="0.01" src="https://file.miricanvas.com/template_thumb/2023/07/25/14/10/kkq8tytycnooum74/thumb.jpg" alt="">

 

[css]

img {
  width: 200px;
}

 

[js]

function MousemoveEffect1__start() {
  const $window = $(window);

  let windowWidth = $window.width();
  let windowHeight = $window.height();

  $window.resize(_.throttle(function () {
    windowWidth = $window.width();
    windowHeight = $window.height();
  }, 100));

  $window.resize(_.throttle(function () {
    MousemoveEffect1__update();
  }, 100));

  let MousemoveEffect1__$el = null;
  let MousemoveEffect1__lastPosX = 0;
  let MousemoveEffect1__lastPosY = 0;

  function MousemoveEffect1__update() {
    MousemoveEffect1__$el.each(function (index, node) {
      const $node = $(node);
      const horRes = $node.data('data-mousemove-effect1-hor-res');
      const verRes = $node.data('data-mousemove-effect1-ver-res');

      const x = (MousemoveEffect1__lastPosX - (windowWidth / 2)) * horRes;
      const y = (MousemoveEffect1__lastPosY - (windowHeight / 2)) * verRes;
      $(node).css('transform', 'translateX(' + x + 'px) translateY(' + y + 'px)');

      console.log("MousemoveEffect1__lastPosX : " + MousemoveEffect1__lastPosX);
      console.log("MousemoveEffect1__lastPosY : " + MousemoveEffect1__lastPosY);
    });
  }

  function MousemoveEffect1__init() {
    MousemoveEffect1__$el = $('.mousemove-effect-1-el');

    MousemoveEffect1__$el.each(function (index, node) {
      const $node = $(node);
      $node.data('data-mousemove-effect1-hor-res', $node.attr('data-mousemove-effect1-hor-res') * 1);
      $node.data('data-mousemove-effect1-ver-res', $node.attr('data-mousemove-effect1-ver-res') * 1);
    });

    const MousemoveEffect1__updateThrottled = _.throttle(function () {
      MousemoveEffect1__update();
    }, 10);

    $window.mousemove(function (e) {
      MousemoveEffect1__lastPosX = e.clientX;
      MousemoveEffect1__lastPosY = e.clientY;

      MousemoveEffect1__updateThrottled();
    });
  }
  
  MousemoveEffect1__init();
}

MousemoveEffect1__start();

동영상

2603, HTML, CSS, JS 활용, mousemove effect

 

13강 - 앵커로 페이지 이동( CODEPEN )

[html]

<nav style="position: fixed; top: 0; right: 0; background-color: orange;">
<a href="#sec1">섹션1</a>
<a href="#sec2">섹션2</a>
<a href="#sec3">섹션3</a>
</nav>

<section id="sec1" style="height: 1000px; background-color: pink;">섹션1</section>
<section id="sec2" style="height: 1000px; background-color: skyblue;">섹션2</section>
<section id="sec3" style="height: 1000px; background-color: gold;">섹션3</section>

[css]

html {
    scroll-behavior: smooth;
}

동영상

2603, HTML, CSS, JS 활용, 앵커로 페이지 이동

14강 - 너비 재는 법

마우스 올리면 따라다니는 아이템 밑줄 애니메이션

CODEPEN - 1부

CODEPEN - 2부

CODEPEN - 3부

CODEPEN - 4부

CODEPEN - 5부

너비 재는 법

• width()
  • content 영역만(padding, border, margin x)
• innterWidth()
  • content + padding
• outerWidth()
  • content + padding + border
• outerWidth(true)
  • content + padding + border + margin

[html]

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<header class="top-bar con-min-width">
    <div class="con height-100p flex">
        <nav class="top-bar__menu-box-1">
            <div class="top-bar__menu-box-1__line"></div>
            <ul class="flex height-100p">
                <li><a href="#" class="height-100p flex flex-ai-c"><span>HOME</span></a></li>
                <li><a href="#" class="height-100p flex flex-ai-c"><span>BRAND</span></a></li>
                <li><a href="#" class="height-100p flex flex-ai-c"><span>ARTICLES</span></a></li>
                <li><a href="#" class="height-100p flex flex-ai-c"><span>WRITE</span></a></li>
                <li><a href="#" class="height-100p flex flex-ai-c"><span>FAQ</span></a></li>
            </ul>
        </nav>
    </div>
</header>

 

[css]

/* 노말라이즈 */
body, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

/* 라이브러리 */
.border-red {
    border: 5px solid red;
}

.height-100p {
    height: 100%;
}

.flex {
    display: flex;
}

.flex-ai-c {
    align-items: center;
}

.con {
    margin-left: auto;
    margin-right: auto;
}

/* 커스텀 */
.con-min-width {
    min-width: 1080px;
}

.con {
    width: 1080px;
}

.top-bar {
    background-color: black;
    color: white;
    height: 100px;
}

.top-bar__menu-box-1 {
    position: relative;
}

.top-bar__menu-box-1 > ul > li > a {
    padding: 0 20px;
}

.top-bar__menu-box-1 > ul > li:hover > a {
    background-color: white;
    color: black;
}

.top-bar__menu-box-1 .top-bar__menu-box-1__line {
    position: absolute;
    left: -100px;
    bottom: 0;
    background-color: #afafaf;
    height: 3px;
    width: 80px;
    transition: left .3s, width .3s;
}

 

[js]

console.clear();

function TopBar__init() {
    $('.top-bar__menu-box-1 > ul > li').mouseenter(function() {
        var $li = $(this);
        var $menuItemLine = $('.top-bar__menu-box-1__line');
        
        var left = $li.position().left;
        var width = $li.outerWidth();
        
        // console.log(`left : ${left}, width : ${width}`);
        
        $menuItemLine.css({
            left: left,
            width: width
        });
    });
    
    $('.top-bar__menu-box-1 > ul > li').eq(4).mouseenter();
}

TopBar__init();

동영상

2603, HTML, CSS, JS 활용, 구현, 마우스 올리면, 따라다니는 아이템 밑줄 애니메이션