1. TOP
  2. ブログ一覧
  3. 動くかっこいいウェブデザインについてのメモ1 導入部分に使うアイディア

動くかっこいいウェブデザインについてのメモ1
導入部分に使うアイディア

イラストレーターをしている友人のWEBサイトを作ることになりました。

期限がはっきりあるわけじゃ無いので、ゆっくり丁寧に作っていこうと思っています。

今まで、EコマースどっぷりのWEBデザイナーのお仕事をしていたので、イラストレーターさんのサイトについて、サイトの製作者として、どういうスタンスというか、コンセプトで作っていくかを考えました。

今までは合理的に商品ページまで辿り着いてもらうことに重きを置いて、サイト自体もできるだけ軽く、無駄がないようにってイメージで作ってきました。

でも今回は、イラストレーターっていう、イラストっていう作品が顔になるサイトで、この人にイラストを描いて欲しい！って思ってもらえるような、ワクワク感のあるサイトを作っていきたいと思います。

そんなこんなで、今、作業的に待ち時間なので、ワクワク感があるデザインを作るため、いいなと思ったcssとかjQueryとかをメモしていきます。

イメージ写真

目次

パララックス

Webページをスクロールすると、背景と前景の要素が異なる速度で動き、奥行きや立体感を演出する手法をパララックスデザインといいます。

JQueryのものがたくさん出回っていましたが、実装するにあたって、cssの方が良さそうなので、こちらにしました。

デモ 

                               

                                <div class="wrapper">
        <div class="container">
            <section>
                <div class="sectionInner">
                    <div id="imageBg01" class="imageBg"></div>
                    <div class="cntFrame">
                        <h2>見出し1</h2>
                        <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
                    </div>
                </div>
            </section>
            <section>
                <div class="sectionInner">
                    <div id="imageBg02" class="imageBg"></div>
                    <div class="cntFrame">
                        <h2>見出し2</h2>
                        <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
                    </div>
                </div>
            </section>
            <section>
                <div class="sectionInner">
                    <div id="imageBg03" class="imageBg"></div>
                    <div class="cntFrame">
                        <h2>見出し3</h2>
                        <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
                    </div>
                </div>
            </section>
        </div>
    </div>

                               
                               

                               
 .wrapper {
width: 100%;
}

h1 {
font-size: 20px;
color: #333;
font-weight: bold;
}

.container {
width: 100%;
}

section {
position: relative;
width: 100%;
height: 200vh;
}

section .sectionInner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip: rect(auto, auto, auto, auto);
/* これで背景を切り抜く */
}

section .imageBg {
position: fixed;
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
}

section #imageBg01 {
background-image: url(/images/top_slider01.jpg);
}

section #imageBg02 {
background-image: url(/images/top_slider02.jpg);
}

section #imageBg03 {
background-image: url(/images/top_slider03.jpg);
}

section div.cntFrame {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100vh;
padding: 0 100px;
margin-top: 100vh;
background: rgba(255, 255, 255, .8);
color: #111;
}

section div.cntFrame h2 {
font-size: 20px;
font-weight: bold;
margin-bottom: 2em;
;
}

@media (max-width: 768px) {
section div.cntFrame {
    padding: 0 15px;
}

section #imageBg01 {
    background-position: 20% top;
}

section #imageBg02 {
    background-position: 20% top;
}

section #imageBg03 {
    background-position: 62% top;
}
}
イメージ写真

Swiper

ファーストビューで使いたい、動きのある静止画。

デモ 

                                      
        
        <div class="l-wrapper">

        <div id="demo12" class="mv02 l-section">
                        
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="slide">
<div class="slide-media img-cover"><img src="/images/top_slider01.jpg" alt=""></div>
<h2 class="slide-title">1st タイトル</h2>
<p class="slide-text">ダミー１ダミー１ダミー１<br class="pc-tab">ダミー2ダミー2ダミー2ダミー2</p>
<p class="slide-link"><a href="#" class="slide-button">VIEW MORE</a></p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide">
<div class="slide-media img-cover"><img src="/images/top_slider02.jpg" alt=""></div>
<h2 class="slide-title">2nd タイトル</h2>
<p class="slide-text">ダミー１ダミー１ダミー１<br class="pc-tab">ダミー2ダミー2ダミー2ダミー2</p>
<p class="slide-link"><a href="#" class="slide-button">VIEW MORE</a></p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide">
<div class="slide-media img-cover"><img src="/images/top_slider03.jpg" alt=""></div>
<h2 class="slide-title">3rd タイトル</h2>
<p class="slide-text">ダミー１ダミー１ダミー１<br class="pc-tab">ダミー2ダミー2ダミー2ダミー2</p>
<p class="slide-link"><a href="#" class="slide-button">VIEW MORE</a></p>
                        </div>
                    </div>
                </div><!-- /swiper-wrapper -->
                <div class="swiper-pagination"></div>
            </div><!-- /swiper -->
                        
        </div>
                        
                         
 </div><!-- /l-wrapper -->

                                    
                                


                                  

<link href="https://unpkg.com/swiper@8.4.7/swiper.min.css" rel="stylesheet" />
<script src="https://unpkg.com/swiper@8.4.7/swiper-bundle.min.js"> </script>

<script>                           
document.addEventListener('DOMContentLoaded', function () {

        const myDelay = 7000;
        let timer;

        const switchAnimation = () => {
            clearTimeout(timer);
            let activeSlide = document.querySelectorAll('.mv02 .swiper-slide[class*=-active]');
            for (let i = 0; i < activeSlide.length; i++) {
                activeSlide[i].classList.remove('anm-finished');
                activeSlide[i].classList.add('anm-started');
            }
            timer = setTimeout(() => {
                for (let i = 0; i < activeSlide.length; i++) {
                    activeSlide[i].classList.remove('anm-started');
                    activeSlide[i].classList.add('anm-finished');
                }
            }, myDelay - 1000);
        }

        const finishAnimation = () => {
            let activeSlide = document.querySelectorAll('.mv02 .swiper-slide.anm-started');
            for (let i = 0; i < activeSlide.length; i++) {
                activeSlide[i].classList.remove('anm-started');
                activeSlide[i].classList.add('anm-finished');
            }
        }

        const mySwiper = new Swiper('.mv02 .swiper', {
            effect: 'fade',
            fadeEffect: {
                crossFade: true,
            },
            loop: true,
            loopAdditionalSlides: 1,
            speed: 2000,
            autoplay: {
                delay: myDelay,
                disableOnInteraction: false,
                waitForTransition: false,
            },
            followFinger: false,
            pagination: {
                el: '.mv02 .swiper-pagination',
                clickable: true,
            },
            on: {
                slideChange: () => {
                    finishAnimation();
                },
                slideChangeTransitionStart: () => {
                    switchAnimation();
                },
            }
        })
    });
                                    
    </script>   
                                  
                                

                                  
                                   
@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap");

:root {
    --easing: cubic-bezier(.2, 1, .2, 1);
    --transition: .8s var(--easing);
    --color-base: #f8f8f8;
    --color-gray: #ddd;
    --color-theme: #f5695f;
    --color-theme-darken: #f12617;
    --box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;
    --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, .08), -1rem -1rem 1.5rem #fff;
    --box-shadow-inset: inset .8rem .8rem 1.2rem rgba(0, 0, 0, .05), inset -.8rem -.8rem 1.2rem #fff;
    --box-shadow-dark: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff, .2);
}

html {
    font-family: "Spartan", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
    font-size: 62.5%;
    line-height: 1.8;
    height: 100%;
    word-break: break-word;
    color: #333;
    background-color: var(--color-base);
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-size: 1.6rem;
    margin: 0;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

::-moz-selection {
    color: #fff;
    background: #ebaec1;
}

::selection {
    color: #fff;
    background: #ebaec1;
}

img {
    border: 0;
    margin: 0;
}

figure {
    margin: 0;
}

p {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #333;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
}

main {
    display: block;
}

.l-inner {
    position: relative;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10rem;
}

.l-section {
    border-top: 1px solid #eee;
}

.l-section .l-inner {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

[class*=swiper]:focus {
    outline: none;
}

.slide-media,
.thumb-media {
    position: relative;
    overflow: hidden;
}

.slide-media img,
.thumb-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}


.swiper-button-prev,
.swiper-button-next {
    display: grid;
    place-content: center;
    width: 6.4rem;
    height: 6.4rem;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
}

.swiper-button-prev::before,
.swiper-button-next::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    border-radius: 50%;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
}

.swiper-button-prev::after,
.swiper-button-next::after {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    border: solid var(--color-gray);
    border-width: 3px 3px 0 0;
}

.swiper-button-prev::after {
    margin-left: 0.4rem;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.swiper-button-next::after {
    margin-right: 0.4rem;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.swiper-button-disabled {
    pointer-events: none;
    opacity: 0;
}

.mv02 {
    margin-bottom: 16rem;
}

.mv02 .l-inner {
    padding-bottom: 0;
}

.mv02 .swiper-pagination {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    margin: auto;
}

.mv02 .swiper-pagination-bullet {
    display: block;
    width: 1.6rem;
    height: 2px;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    background-color: #fff;
}

.mv02 .swiper-pagination-bullet:not(:first-child) {
    margin-top: 1.6rem;
}

.mv02 .swiper-pagination-bullet-active {
    width: 4rem;
    background-color: #ebaec1;
}

.mv02 .swiper-fade .swiper-slide {
    -webkit-transition-property: opacity, -webkit-transform !important;
    transition-property: opacity, -webkit-transform !important;
    transition-property: opacity, transform !important;
    transition-property: opacity, transform, -webkit-transform !important;
    pointer-events: none;
}

.mv02 .swiper-fade .swiper-slide-active {
    pointer-events: auto;
}

.mv02 .slide {
    display: grid;
    place-content: center;
    height: 800px;
    padding: 0 8rem;
    text-align: center;
}

.mv02 .slide-media {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mv02 .slide-media img {
    -webkit-transition: 7s 1s linear;
    transition: 7s 1s linear;
    -webkit-transform: translateX(-1.5%) scale(1.1);
    transform: translateX(-1.5%) scale(1.1);
}

.mv02 .slide-title,
.mv02 .slide-text,
.mv02 .slide-link {
    -webkit-animation: 2s var(--easing) both;
    animation: 2s var(--easing) both;
    opacity: 0;
}

.mv02 .slide-title {
    font-size: 6rem;
    line-height: 1.1;
    color: #ebaec1;
    font-family: 'Lato', sans-serif;
    font-weight:bolder;
}

.mv02 .slide-text {
    font-size: 1.8rem;
    margin: 4rem 0;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    color: #fff;
}

.mv02 .slide-link {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.mv02 .slide-button {
    font-size: 1.2rem;
    font-weight: bold;
    display: inline-block;
    color: #ebaec1;
}

.mv02 .slide-button::before {
    display: inline-block;
    width: 6rem;
    height: 1px;
    margin: -2px 1.6rem 0 0;
    content: "";
    vertical-align: middle;
    background-color: currentColor;
}

.mv02 .swiper-slide[class*=-active] .slide-media img {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: translateX(1.5%) scale(1.05);
    transform: translateX(1.5%) scale(1.05);
}

.mv02 .swiper-slide.anm-started .slide-title,
.mv02 .swiper-slide.anm-started .slide-text,
.mv02 .swiper-slide.anm-started .slide-link {
    -webkit-animation-name: mv02-fadeIn;
    animation-name: mv02-fadeIn;
}

.mv02 .swiper-slide.anm-finished .slide-title,
.mv02 .swiper-slide.anm-finished .slide-text,
.mv02 .swiper-slide.anm-finished .slide-link {
    -webkit-animation-name: mv02-fadeOut;
    animation-name: mv02-fadeOut;
}

@-webkit-keyframes mv02-fadeIn {
    0% {
-webkit-transform: translateY(6rem);
transform: translateY(6rem);
opacity: 0;
    }

    100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
    }
}

@keyframes mv02-fadeIn {
    0% {
-webkit-transform: translateY(6rem);
transform: translateY(6rem);
opacity: 0;
    }

    100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
    }
}

@-webkit-keyframes mv02-fadeOut {
    0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
    }

    100% {
-webkit-transform: translateY(-6rem);
transform: translateY(-6rem);
opacity: 0;
    }
}

@keyframes mv02-fadeOut {
    0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
    }

    100% {
-webkit-transform: translateY(-6rem);
transform: translateY(-6rem);
opacity: 0;
    }
}

@media only screen and (max-width: 1024px) {
    html {
-webkit-text-size-adjust: 100%;
    }

    .l-inner {
padding: 0 4rem;
    }

    .pc {
display: none !important;
    }

    .mv02 {
margin-bottom: 8rem;
    }

    .mv02 .slide {
height: max(70vh, 70vw);
    }

    .mv02 .slide-title {
font-size: 4rem;
    }

    .mv02 .slide-text {
font-size: 1.6rem;
margin: 3.2rem 0;
    }
}

@media only screen and (max-width: 599px) {
    html {
font-size: 50%;
    }

    .pc-tab {
display: none !important;
    }
}

@media only screen and (min-width: 1025px) {
    .tab-sp {
display: none !important;
    }

    .swiper-button-prev::before,
    .swiper-button-next::before {
-webkit-transition: var(--transition);
transition: var(--transition);
    }

    .swiper-button-prev:hover::before,
    .swiper-button-next:hover::before {
-webkit-transform: scale(1.2);
transform: scale(1.2);
    }
}

@media only screen and (min-width: 600px) {
    .sp {
display: none !important;
    }
}
イメージ写真

「動くWEBデザインについてのメモ2」はこちらから