Fiddling around (with click to expand)

In this example below you will see how to do a Fiddling around (with click to expand) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by hyunjo_on, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hyunjo_on ©
  • HTML
  • CSS
  • JavaScript
    <div class='top-banner'>
  <div></div>
  <div class='top-banner-content'>
    <div class='top-banner-content-left'>
      <div class='top-banner-content-left-image'></div>
    </div>
    <div class='top-banner-content-right'>
      <div class='top-banner-content-button-wrapper'>
        <div class='top-banner-content-button button'>
          <i class="fa fa-check" aria-hidden="true"></i>
          Liked
        </div>
      </div>
    </div>
  </div>
</div>

<div id="viewport">
  <div id="wrapper">
    <div id="scroller">
      <section class='section-bg'></section>
      <section class='section-items'>
        <section class="card landing">
          <div class="card-title">Smart Home Living</div>
          <div class="card-content">
            <ul class="upsell-card-list">
              <li class="upsell-card" id="upsell-chair">
                <div class="upsell-card-content">
                  <div class="product-image"></div>
                  <div class="product-details">
                    <div class="product-name">
                      LexMod Aegis Accent Chair, Light Gray
                    </div>
                    <div class="price">152.31</div>
                    <div class="prime-icon"></div>
                    <button class="add-to-cart">Add to cart</button>
                  </div>
                </div>
              </li>
              <li class="upsell-card" id="upsell-vase">
                <div class="upsell-card-content">
                  <div class="product-image"></div>
                  <div class="product-details">
                    <div class="product-name">
                      LexMod Aegis Accent Chair, Light Gray
                    </div>
                    <div class="price">152.31</div>
                    <div class="prime-icon"></div>
                    <button class="add-to-cart">Add to cart</button>
                  </div>
                </div>
              </li>
              <li class="upsell-card" id="upsell-pot">
                <div class="upsell-card-content">
                  <div class="product-image"></div>
                  <div class="product-details">
                    <div class="product-name">
                      LexMod Aegis Accent Chair, Light Gray
                    </div>
                    <div class="price">152.31</div>
                    <div class="prime-icon"></div>
                    <button class="add-to-cart">Add to cart</button>
                  </div>
                </div>
              </li>
              <li class="upsell-card" id="upsell-candle">
                <div class="upsell-card-content">
                  <div class="product-image"></div>
                  <div class="product-details">
                    <div class="product-name">
                      LexMod Aegis Accent Chair, Light Gray
                    </div>
                    <div class="price">152.31</div>
                    <div class="prime-icon"></div>
                    <button class="add-to-cart">Add to cart</button>
                  </div>
                </div>
              </li>
              <li class="upsell-card" id="upsell-mat">
                <div class="upsell-card-content">
                  <div class="product-image"></div>
                  <div class="product-details">
                    <div class="product-name">
                      LexMod Aegis Accent Chair, Light Gray
                    </div>
                    <div class="price">152.31</div>
                    <div class="prime-icon"></div>
                    <button class="add-to-cart">Add to cart</button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <a href="#" class="card-footer shop-all">
            <div>Shop all</div>
            <i class="fa fa-angle-right"></i>
          </a>
        </section>
        
        <section class="card below-critical">
          <div class="card-title">
            Get yourself a little something
          </div>
          <div class="card-content">
            <ul class="tile-list">
              <li class="tile-list-item" id="perfume-1"></li>
              <li class="tile-list-item" id="perfume-2"></li>
              <li class="tile-list-item" id="perfume-3"></li>
              <li class="tile-list-item" id="perfume-4"></li>
            </ul>
          </div>
          <a href="#" class="card-footer shop-all">
            <div>Shop all</div>
            <i class="fa fa-angle-right"></i>
          </a>
        </section>
      </section>
    </div>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/hyunjo_on/fiddling-around-with-click-to-expand-oZVLRK */
    @import url('https://fonts.googleapis.com/css?family=Open+Sans');

@use postcss-flexbox;
@use postcss-nested;
@use postcss-cssnext;

* {
	box-sizing: content-box;
  margin: 0;
  
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

html {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  -ms-touch-action: none;
}

body {
  overflow: hidden;
}

a {
  text-decoration: none;
  color: #8dc3ff;
}

#wrapper {
  position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
}

#scroller {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 100%;
	transform: translateZ(0);
	user-select: none;
	text-size-adjust: none;
}

.button {
  background: #f1f1f1;
  padding: 0.5rem 0.8rem;
  font-size: 1.2rem;
  border-radius: 0.1rem;
}

.top-banner {
  box-sizing: content-box;
  height: 30vw;
  padding: 5vh;
  
  &-content {
    box: horizontal;
    height: 100%;
    will-change: trasform, opacity;
    transition: 0.01s ease;
    transform-origin: center top;
    
    & > div {
      box-item: flex-1 center;
      height: 100%;
    }

    &-left {
      &-image {
        height: 100%;
        background: url('http://opentravel.com/explore/photos/pi/15/awesome-flowers-for-decoration.jpg') no-repeat 50% 50%;
        background-size: contain;
      }
    }
    
    &-button {
      .fa-check { color: green; }
      box-item: center;
    }
    
    &-button-wrapper {
      box: horizontal center;
      height: 100%;
    }
  }
  
}

section {
  background: white;
}

.section-bg {
  height: 40vw;
  background: transparent;
  margin-bottom: 5vh;
}

.card {
  position: relative;
  border: 1px solid lightgray;
  padding: 0.5rem;
  margin: 0.5rem;
  transition: 0.3s ease all;
  height: auto;
  
  &-title {
    font-weight: lighter;
    font-size: 1.4rem;
    padding: 0.5rem 0.2rem 1rem 0.2rem;
  }
  
  &-content {
    position: relative;
    padding: 0.5rem;
    border-top: 1px solid lightgray;
    
    &:last-of-type {
      border-bottom: 1px solid lightgray;
    }
  }
  
  &-footer {
    position: relative;
    display: block;;
    padding-top: 0.5rem;
    
    &.shop-all {
      i.fa-angle-right {
        position: absolute;
        bottom: 0;
        right: 0.5rem;
        font-size: 1.5rem;
      }
    }
  }
  
  &.item-view-on {
    top: 0;
    height: 500vh;
    
  }
  
  .product-details {
    display: none;
    .item-view-on & {
      box: space-between wrap;
    }
  }
  
  .price {
    &:before {
      position: absolute;
      left: -0.5rem;
      font-size: 0.8rem;
      content: "\0024"; /* $ */
      padding-right: 0.2rem;
    }
    position: relative;
    color: #b7b7b7;
  }
  
  .prime-icon {
    display: none;
    opacity: 0;
    visibility: none;
    background-image: url('http://cdn.ndtv.com/tech/images/amazon_prime_check.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    .item-view-on & {
      display: block;
      opacity: 1;
      visibility: visible;
      height: 1.5rem;
      width: 4.5rem;
    }
  }
  
  .add-to-cart {
    .item-view-on & {
      display: block;
    }
    display: none;
    width: 100%;
    background: orange;
    border: none;
    border-radius: 0.2rem;
    padding: 1rem;
  }
  
  .hero-image {
    text-align: center;
    width: 100%;
    height: 40vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
  
  .upsell-card {
    display: inline-table;
    height: 20vw;
    box-item: flex-auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    
    &:first-of-type {
      .product-image {
        text-align: center;
        width: 100%;
        height: 40vw;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
      }
      
      .product-details {
        box: space-between;
      }
      
      width: 100%;
      height: 40vw;
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid lightgray;
    }
  }
  
  .upsell-card-list {
    box: horizontal space-around wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .upsell-card-content {
    .product-image {
      width: 20vw;
      height: 20vw;
    }
  }
  
  .tile-list {
    box: horizontal wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
    
    &-item {
      box-item: flex-auto;
      height: 20vw;
      width: 40vw;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
  }
}

#upsell-chair .product-image {
  background-image: url('https://www.zurleys.co.uk/media/catalog/product/cache/1/thumbnail/9df78eab33525d08d6e5fb8d27136e95/Z/U/ZUR204724_1/Acke-Scandinavian-Grey-Chair-ZUR204724.jpg');
}

#upsell-vase .product-image {
  background-image: url('http://diyhousehelp.com/wp-content/uploads/2016/12/chive-hanging-hodor-vase.jpg');
}

#upsell-pot .product-image{
  background-image: url('http://www.ikea.com/us/en/images/products/vardagen-pot-with-lid__0416938_PE582513_S4.JPG');
}

#upsell-candle {
  background-image: url('https://cdn.shopify.com/s/files/1/0987/6688/products/IdahoSoloLarge_grande.jpg?v=1488232881');
}

#upsell-mat {
  background-image: url('https://www.bluecanyon.co.uk/images/products/3622.jpg');
}

#perfume-1 {
  background-image: url('http://cdn.luxatic.com/wp-content/uploads/2010/09/Joy-Perfume-for-Jean-Patou.jpg');
}

#perfume-2 {
  background-image: url('https://vivamanchester.co.uk/wp-content/uploads/2015/09/perfume-3-edited.jpg');
}

#perfume-3 {
  background-image: url('https://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2016/03/07/16/OG-Jasmine.jpg');
}

#perfume-4 {
  background-image: url('http://www.chanel.com/en_US/fragrance-beauty/cms2export/Site1Files/P113430/S113530_XLARGE.jpg');
}


/*Downloaded from https://www.codeseek.co/hyunjo_on/fiddling-around-with-click-to-expand-oZVLRK */
    const topBanner = document.querySelector('.top-banner')
const topBannerContent = document.querySelector('.top-banner-content')

const topBannerHeight = $(topBanner).height()

const options = {
  probeType: 3,
  // disableMouse: true,
  // disablePointer: true,
  // disableTouch: false,
  mouseWheel: true,
  snap: '',
  indicators: {
    el: topBanner,
    listenX: false,
    fade: false,
    resize: false,
    ignoreBoundaries: true,
    speedRatioY: 0.15
  }
}

const onScroll = function() {
  // top banner
  if (-this.y < topBannerHeight) {
    topBannerContent.style.transform = 'translateY(' + this.y * 0.2 + 'px)'
    topBannerContent.style.opacity = (topBannerHeight + this.y) / topBannerHeight
  }
}

class MyScroller {
  renew() {
    this.scroller.destroy()
    this.scroller = null
    return this.get()
  }
  
  get() {
    if (!this.scroller) {
      this.scroller = new IScroll('#wrapper', options)
      this.scroller.on('scroll', onScroll)
    }
    return this.scroller
  }
}

const myScroller = new MyScroller()
myScroller.get()

document.addEventListener('touchmove', function (e) {
    e.preventDefault();
}, false)

const itemViewOn = 'item-view-on'
const mainCard = document.querySelector('.card.landing').addEventListener('tap', function(e) {
  const me = $(this).toggleClass(itemViewOn)
  options.snap = me.hasClass(itemViewOn) ? '.upsell-card' : ''
  myScroller.renew()
  return false
}, false)


Comments