Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="bg--fix" style=""></div>
<div id="container">
  <section id="main">
    <!--画像1枚の右からスライドアニメーション-->
<div class="formula">
     <div class="formula__ttl fade__box"><div class="fade__inner fadeInLeft"></div><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/visual_img02.png" width="1201" alt="" class="pc"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/sp_formula_ttl.png" alt="" width="333" class="sp"></div>
      <div class="formula_wrapper clearfix">
        <div class="formula_wrapper__photo fade__box">
          <div class="fade__inner fadeInLeft"></div>
          <img src="https://studio-0.com/blog/wp-content/uploads/2020/04/fourmula_img01.png" alt="" width="299"></div>
        <div class="formula_wrapper__text">
          <h2>マカロン3個セット</h2>
          <p>ミント・キャラメル・ストロベリー<br>
            さらに美味しく、プレゼントにもぴったり!</p>
          <ul class="clearfix">
            <li class="fade__box"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/fourmula_img02.png" alt="" width="139"></li>
            <li class="fade__box"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/fourmula_img03.png" alt="" width="139"></li>
            <li class="fade__box"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/fourmula_img04.png" alt="" width="139"></li>
            <li class="fade__box"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/fourmula_img05.png" alt="クラッシュアーモンドすりごま" width="139"></li>
          </ul>
          <div class="btn--common"><a href="h#" target="blank"><i class="fas fa-shopping-cart"></i>オンラインショップで購入する<i class="fas fa-chevron-right"></i></a></div>
        </div><!--formula_wrapper__text-->
      </div><!--formula_wrapper-->
    </div><!--formula-->
   
    
    
    <!--画像2枚のスライドアニメーション-->
    <div class="contrast">
      <div class="contrast_wrapper">
        <h2><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/contrast_img01.png" alt="" width="1201" class="pc"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/sp_contrast_img01.png" alt="" class="sp"></h2>
        <p class="contrast_txt--top">アーモンドは今、もっとも<span>トレンドの食材</span>です。日本において、アーモンドはナッツの中で<span>消費量No.1!</span><br class="pc">
          <span>「毎日」「週に数回」</span>アーモンドを食べる人が半数以上!</p>
        <ul class="clearfix">
          <li class="fade__box"><div class="fade__inner fadeInLeft"></div>
            <img src="https://studio-0.com/blog/wp-content/uploads/2020/04/contrast_img02.png" alt="" width="520" class="pc"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/sp_contrast_img02.jpg" alt="" class="sp"></li>
          <li class="fade__box"><div class="fade__inner fadeInRight"></div>
            <img src="https://studio-0.com/blog/wp-content/uploads/2020/04/contrast_img03.png" alt="" width="520" class="pc"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/sp_contrast_img03.jpg" alt="" class="sp"></li>
        </ul>
        <p class="contrast_note">出典:「####」<br class="sp">
          カリフォルニア・マカロン協会 2018年7月~8月、対象:男女2,000人</p>
      </div>
      
      
      
      
 <!--写真とテキスト画像-->      
      <div class="bl__img__box clearfix">
        
        <div class="bl__photo__img fade__box">
          <div class="fade__inner fadeInLeft"></div>
          <img src="https://studio-0.com/blog/wp-content/uploads/2020/04/contrast_img05.jpg" alt="" width="1280" class="pc"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/sp_contrast_img05.jpg" alt="" class="sp"></div>
        
        <div class="bl__photo__txt">
          <div class="bl__photo__inner fade__box">
            <div class="fade__inner fadeInRight"></div>
            <img src="https://studio-0.com/blog/wp-content/uploads/2020/04/contrast_img04.png" alt="" width="623" class="pc"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/sp_contrast_img04.png" alt="" class="sp"></div>
        </div>
        
      </div>
    </div> 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    </div><!--main-->
  
</div><!--container -->
              
            
!

CSS

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

  .pad {
    display: none !important; } }
@media all and (min-width: 768px) and (max-width: 1280px) {
  body {
    font-size: 1.6rem; } }
@media screen and (max-width: 767px) {
  .pc {
    display: none !important; }

  .pad {
    display: none !important; }

  a:hover,
  a:hover img {
    opacity: 1 !important; }

  a[href^="tel:"] {
    cursor: pointer;
    pointer-events: auto; } }

img {
    vertical-align: top;
    max-width: 100%;
}




html {
    font-size: 62.5%;
}


body {
    color: #231815;
    font-size: 2rem;
    line-height: 1.6;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    background-color: #FFF;
}
body, table, input, textarea, select, option {
    font-family: 'Noto Sans JP', sans-serif;
}
a, a:link {
    color: #231815;
    text-decoration: none;
}

@media (max-width: 1280px) and (min-width: 768px){
#nav ul li a {
    padding: 15px 4px 15px;
    font-size: 1.4rem;
  }}


#container {
  text-align: left;
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-top:1000px;
}



* html .clearfix {
  zoom: 1; }

* + html .clearfix {
  zoom: 1; }

.clearfix:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both; }
#container {
  height:5000px;
}

.bg--fix {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url(https://studio-0.com/blog/wp-content/uploads/2020/04/visual_bg.jpg) no-repeat top center;
  background-size: cover;
  opacity: 0;
  -webkit-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s; }
  .bg--fix.on {
    opacity: 1; }
  @media all and (min-width: 768px) and (max-width: 1280px) {
    .bg--fix {
      background-image: url(https://studio-0.com/blog/wp-content/uploads/2020/04/pad_visual_bg.jpg); } }
  @media screen and (max-width: 767px) {
    .bg--fix {
      background-image: url(https://studio-0.com/blog/wp-content/uploads/2020/04/sp_visual_bg.jpg); } }


/* アニメーション用 */
.fade__box {
  position: relative;
  overflow: hidden; }
  .fade__box .fade__inner {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #fff; }



/* コンテンツ */
.formula {
  margin: 0 auto 231px;
  max-width: 1200px; }
  .formula .formula__ttl {
    margin: 0 0 128px;
    text-align: center; }
  .formula .formula_wrapper {
    padding: 0 0 0 10.9%; }
    .formula .formula_wrapper .formula_wrapper__photo {
      width: 28%;
      float: left; }
    .formula .formula_wrapper .formula_wrapper__text {
      margin-top: 2px;
      width: 61.7%;
      float: right; }
      .formula .formula_wrapper .formula_wrapper__text h2 {
        margin-bottom: 23px;
        font-size: 3.6rem;
        line-height: 1.5;
        font-weight: 900; }
        .formula .formula_wrapper .formula_wrapper__text h2 span {
          display: block;
          font-weight: normal;
          font-size: 2.4rem;
          margin-top: 14px; }
      .formula .formula_wrapper .formula_wrapper__text ul {
        margin: 41px 0 46px -1px; }
        .formula .formula_wrapper .formula_wrapper__text ul li {
          margin-right: 0.7%;
          width: 21.06%;
          float: left; }
          .formula .formula_wrapper .formula_wrapper__text ul li:last-child {
            margin-right: 0; }
  @media all and (min-width: 768px) and (max-width: 1280px) {
    .formula {
      padding: 0 30px; } }
  @media screen and (max-width: 767px) {
    .formula {
      margin: 0 38px 19px; }
      .formula .formula__ttl {
        margin: 0 -18px 35px; }
      .formula .formula_wrapper {
        padding: 0; }
        .formula .formula_wrapper .btn--common {
          display: none; }
        .formula .formula_wrapper .formula_wrapper__text {
          margin-top: 0;
          width: auto;
          float: none; }
          .formula .formula_wrapper .formula_wrapper__text h2 {
            margin-bottom: 9px;
            font-size: 2rem; }
          .formula .formula_wrapper .formula_wrapper__text p {
            margin-right: -15px;
            font-size: 1.4rem;
            line-height: 1.4; }
          .formula .formula_wrapper .formula_wrapper__text ul {
            margin: 23px 1px 45px 1px; }
            .formula .formula_wrapper .formula_wrapper__text ul li {
              margin: 10px 0 0 0;
              width: 49%; }
              .formula .formula_wrapper .formula_wrapper__text ul li img {
                width: 100%; }
              .formula .formula_wrapper .formula_wrapper__text ul li:nth-child(2n) {
                float: right; }
        .formula .formula_wrapper .formula_wrapper__photo {
          margin-bottom: 33px;
          width: auto;
          float: none;
          text-align: center; }
          .formula .formula_wrapper .formula_wrapper__photo img {
            width: 49%; } }
  @media all and (min-width: 768px) and (max-width: 1280px) {
    .formula .formula_wrapper {
      padding: 0 5%; }
      .formula .formula_wrapper .formula_wrapper__text {
        width: 67%; }
        .formula .formula_wrapper .formula_wrapper__text h2 {
          font-size: 2.4rem; }
        .formula .formula_wrapper .formula_wrapper__text ul {
          margin: 15px 0 25px; } }


/* 購入するボタン */

.btn--common {
  width: 540px; }
  .btn--common a {
    padding: 23px 60px;
    display: block;
    color: #fff;
    font-size: 2.4rem;
    text-align: center;
    position: relative;
    border: 2px solid #000;
    background-color: #000; }
    .btn--common a .fa-shopping-cart {
      margin-top: -12px;
      position: absolute;
      left: 31px;
      top: 50%;
      font-size: 2.4rem; }
    .btn--common a .fa-chevron-right {
      margin-top: -8px;
      font-size: 1.6rem;
      position: absolute;
      right: 32px;
      top: 50%; }
    .btn--common a:hover {
      opacity: 1;
      color: #000;
      background: #fff; }
      .btn--common a:hover i {
        color: #000; }
    @media all and (min-width: 768px) and (max-width: 1024px) {
      .btn--common a {
        font-size: 1.8rem; } }
  @media all and (min-width: 768px) and (max-width: 1024px) {
    .btn--common {
      max-width: 400px;
      width: 100%; } }
  @media screen and (max-width: 767px) {
    .btn--common {
      margin: 0 auto;
      width: auto;
      max-width: 296px; }
      .btn--common a {
        padding: 16px 20px 15px 23px;
        font-size: 1.6rem; }
        .btn--common a:hover {
          color: #fff;
          background: #000; }
          .btn--common a:hover i {
            color: #fff; }
        .btn--common a .fa-shopping-cart {
          margin-top: -7px;
          left: 9px;
          font-size: 1.6rem; }
        .btn--common a .fa-chevron-right {
          margin-top: -7px;
          font-size: 1.4rem;
          right: 8px; } }



/*画像2枚のスライドアニメーション*/
.contrast {
  margin-bottom: 237px; }
  .contrast .contrast_wrapper {
    margin: 0 auto 163px;
    max-width: 1200px; }
    .contrast .contrast_wrapper h2 {
      margin-bottom: 70px; }
    .contrast .contrast_wrapper .contrast_txt--top {
      margin-bottom: 82px;
      font-size: 2rem;
      line-height: 1.6;
      text-align: center; }
      .contrast .contrast_wrapper .contrast_txt--top span {
        display: inline-block;
        font-weight: 900;
        background: url("./images/line.jpg") repeat-x left bottom 2px; }
    .contrast .contrast_wrapper ul {
      margin: 0 auto 79px;
      max-width: 1080px; }
      .contrast .contrast_wrapper ul li {
        width: 48.1%;
        float: left; }
        .contrast .contrast_wrapper ul li img {
          width: 100%; }
        .contrast .contrast_wrapper ul li:last-child {
          float: right; }
    .contrast .contrast_wrapper .contrast_note {
      font-size: 1.4rem;
      text-align: center; }
  @media all and (min-width: 768px) and (max-width: 1280px) {
    .contrast {
      padding: 0 30px; } }
  @media screen and (max-width: 767px) {
    .contrast {
      margin: 0 20px 58px; }
      .contrast .contrast_wrapper {
        margin-bottom: 82px; }
        .contrast .contrast_wrapper h2 {
          margin: 0 2px 25px 0; }
          .contrast .contrast_wrapper h2 img {
            width: 100%; }
        .contrast .contrast_wrapper .contrast_txt--top {
          margin: 0 auto 60px;
          max-width: 88%;
          font-size: 1.4rem;
          line-height: 1.4;
          text-align: left; }
          .contrast .contrast_wrapper .contrast_txt--top span {
            background-position: left bottom; }
        .contrast .contrast_wrapper ul {
          margin-bottom: 23px; }
          .contrast .contrast_wrapper ul li {
            margin-bottom: 39px;
            width: auto;
            float: none; }
            .contrast .contrast_wrapper ul li:last-child {
              margin-bottom: 0; }
        .contrast .contrast_wrapper .contrast_note {
          font-size: 1rem; } }


/*写真とテキスト画像*/
.bl__img__box .bl__photo__img {
  max-width: 1280px;
  width: 66.66%;
  float: right; }

.bl__img__box .bl__photo__txt {
  width: 33.33%;

  position: relative;
  z-index: 5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
  .bl__img__box .bl__photo__txt .bl__photo__inner {
    margin: 14px -30.6% 0 0;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center; }

@media screen and (max-width: 767px) {
  .bl__img__box {
    margin: 0 -20px; }
    .bl__img__box .bl__photo__img {
      width: 77.1%; }
    .bl__img__box .bl__photo__txt {
      margin: -23% 0 0 0;
      width: 79.46%;
      float: left; }
      .bl__img__box .bl__photo__txt .bl__photo__inner {
        margin: 0; }
        .bl__img__box .bl__photo__txt .bl__photo__inner img {
          width: 100%; } }




/*fadeInLeft*/
.fadeInLeft {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }
  .fadeInLeft.on {
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    left: 0; }

/*fadeInRight*/
.fadeInRight {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }
  .fadeInRight.on {
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0); }
              
            
!

JS

              
                //KV背景の表示
$(function(){
		$('.bg--fix').addClass('on');
		setTimeout(function(){
			$('.visual_wrapper').addClass('on');
		},300);
 
	});




//fadeInLeft
$(window).scroll(function () {

	
		$('.fadeInLeft').each(function () {
			if ($(window).scrollTop() > $(this).offset().top - $(window).height() + 200) {
				$(this).addClass('on');
			}
		});

		$('.fadeInRight').each(function () {
			if ($(window).scrollTop() > $(this).offset().top - $(window).height() + 200) {
				$(this).addClass('on');
			}
		});
	}).trigger('scroll');





$(function(){
	if($(window).width() > 767){
			$('.bl__img__box > div').matchHeight();
			
		}
	
	});
              
            
!
999px

Console