Skip to content

Instantly share code, notes, and snippets.

@s3nh

s3nh/custom-calculator-section-1.markdown

Created July 17, 2020 06:55
Show Gist options
  • Save s3nh/2f148cf977bfe4fc40977c6fbc6ab8dd to your computer and use it in GitHub Desktop.
Save s3nh/2f148cf977bfe4fc40977c6fbc6ab8dd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. s3nh created this gist Jul 17, 2020.
    7 changes: 7 additions & 0 deletions custom-calculator-section-1.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Custom Calculator Section 1
    ---------------------------


    A [Pen](https://codepen.io/riana208/pen/WrWqwY) by [Riana208](https://codepen.io/riana208) on [CodePen](https://codepen.io).

    [License](https://codepen.io/riana208/pen/WrWqwY/license).
    70 changes: 70 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    <div class="cd-slider-wrapper">
    <!-- slider -->
    <ul class="cd-slider">
    <!-- content 1 -->
    <li class="is-visible">
    <div class="cd-half-block image"></div>
    <div class="cd-half-block content">
    <div>
    <h2>Hard Cover Journal</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugit ullam voluptatum tenetur ab, non beatae.
    </p>
    <a href="#" class="btn">Calculate</a>
    </div>
    </div>
    </li>
    <!-- content 2 -->
    <li>
    <div class="cd-half-block image"></div>
    <div class="cd-half-block content">
    <div>
    <h2>Soft Cover Journal</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugit ullam voluptatum tenetur ab, non beatae.
    </p>
    <a href="#" class="btn">Calculate</a>
    </div>
    </div>
    </li>
    <!-- content 3 -->
    <li>
    <div class="cd-half-block image"></div>
    <div class="cd-half-block content">
    <div>
    <h2>Brochure</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugit ullam voluptatum tenetur ab, non beatae.
    </p>
    <a href="#" class="btn">Calculate</a>
    </div>
    </div>
    </li>
    <!-- content 4 -->
    <li>
    <div class="cd-half-block image"></div>
    <div class="cd-half-block content">
    <div>
    <h2>Booklet</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugit ullam voluptatum tenetur ab, non beatae.
    </p>
    <a href="#" class="btn">Calculate</a>
    </div>
    </div>
    </li>
    <!-- content 5 -->
    <li>
    <div class="cd-half-block image"></div>
    <div class="cd-half-block content">
    <div>
    <h2>Calendar</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugit ullam voluptatum tenetur ab, non beatae.
    </p>
    <a href="#" class="btn">Calculate</a>
    </div>
    </div>
    </li>
    </ul>
    </div>
    62 changes: 62 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,62 @@
    jQuery(document).ready(function($){
    var sliderContainers = $('.cd-slider-wrapper');

    if (sliderContainers.length > 0) initBlockSlider(sliderContainers);

    function initBlockSlider(sliderContainers){
    sliderContainers.each(function(){
    var sliderContainer = $(this),
    slides = sliderContainer.children('.cd-slider').children('li'),
    sliderPagination = createSliderPagination(sliderContainer);

    sliderPagination.on('click', function(event){
    event.preventDefault();
    var selected = $(this),
    index = selected.index();
    updateSlider(index, sliderPagination, slides);
    });

    sliderContainer.on('swipeleft', function(){
    var bool = enableSwipe(sliderContainer),
    visibleSlide = sliderContainer.find('.is-visible').last(),
    visibleSlideIndex = visibleSlide.index();
    if(!visibleSlide.is(':last-child') && bool) {updateSlider(visibleSlideIndex + 1, sliderPagination, slides);}
    });

    sliderContainer.on('swiperight', function(){
    var bool = enableSwipe(sliderContainer),
    visibleSlide = sliderContainer.find('.is-visible').last(),
    visibleSlideIndex = visibleSlide.index();
    if(!visibleSlide.is(':first-child') && bool) {updateSlider(visibleSlideIndex - 1, sliderPagination, slides);}
    });

    });
    }

    function createSliderPagination(container){
    var wrapper = $('<ol class="cd-slider-navigation"></ol>');
    container.children('.cd-slider').find('li').each(function(index){
    var dotWrapper = (index == 0) ? $('<li class="selected"></li>') : $('<li></li>'),
    dot = $('<a href="#0"></a>').appendTo(dotWrapper);
    dotWrapper.appendTo(wrapper);
    var dotText = (index+1 < 10) ? '0' + (index+1): index+1;
    dot.text(dotText);
    });
    wrapper.appendTo(container);
    return wrapper.children('li');
    }

    function updateSlider(n, navigation, slides) {
    navigation.removeClass('selected').eq(n).addClass('selected');
    slides.eq(n).addClass('is-visible').removeClass('covered').prevAll('li').addClass('is-visible covered').end().nextAll('li').removeClass('is-visible covered');

    //fixes a bug on Firefox with ul.cd-slider-navigation z-index
    navigation.parent('ul').addClass('slider-animating').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
    $(this).removeClass('slider-animating');
    });
    }

    function enableSwipe(container) {
    return ( container.parents('.touch').length > 0 );
    }
    });
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    290 changes: 290 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,290 @@
    *, *::after, *::before {
    box-sizing: border-box;
    }
    html {
    font-size: 62.5%;
    }
    body {
    font-size: 1.6rem;
    font-family: "Fira Sans", sans-serif;
    color: #767070;
    background-color: #fff;
    }
    a {
    color: #ccd0c1;
    text-decoration: none;
    }
    /** slider **/
    .cd-slider-wrapper {
    position: relative;
    height: 100vh;
    padding: 10px;
    }
    @media only screen and (min-width: 900px){
    .cd-slider-wrapper {
    padding: 30px;
    }
    }
    .cd-slider {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow: hidden;
    }
    .cd-slider li {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    transition: transform 0.6s;
    }
    .cd-slider li.is-visible {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    }
    .cd-slider .cd-half-block {
    height: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    }
    .cd-slider .image {
    background-size: cover;
    }
    .cd-slider li:first-of-type .image {
    background-image: url(https://scontent.cdninstagram.com/t51.2885-15/e15/11098197_1424085487905032_565150222_n.jpg);
    }
    .cd-slider li:nth-of-type(2) .image {
    background-image: url(https://scontent.cdninstagram.com/t51.2885-15/s480x480/e35/12750054_143726942679482_1947705874_n.jpg);
    }
    .cd-slider li:nth-of-type(3) .image {
    background-image: url(https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/11248993_1652524691654180_1635359393_n.jpg);
    }
    .cd-slider li:nth-of-type(4) .image {
    background-image: url(https://scontent.cdninstagram.com/t51.2885-15/e35/12080404_363663843804155_1959413540_n.jpg);
    }
    .cd-slider li:nth-of-type(5) .image {
    background-image: url(https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/12479126_993769300694154_1634373122_n.jpg);
    }
    .cd-slider .content {
    padding: 30px;
    color: #fff;
    background-color: #767070;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
    .cd-slider li:nth-of-type(2) .content {
    background-color: #ccd0c1;
    }
    .cd-slider li:nth-of-type(3) .content {
    background-color: #f3b96c;
    }
    .cd-slider li:nth-of-type(4) .content {
    background-color: #f46c6a;
    }
    .cd-slider li:nth-of-type(5) .content {
    background-color: #1abc9c;
    }
    .cd-slider .light-bg {
    color: rgba(0, 0, 0, 0.6);
    }
    .cd-slider h2 {
    font-size: 2.2rem;
    margin-bottom: .4em;
    }
    .cd-slider p {
    font-size: 1.4rem;
    }
    .cd-slider h2, .cd-slider p {
    line-height: 1.4;
    }
    .cd-slider .btn {
    display: inline-block;
    background: rgba(0, 0, 0, 0.2);
    padding: 1em 1.6em;
    margin-top: 1em;
    font-size: 1.3rem;
    color: #fff;
    border-radius: 50em;
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    }
    @media only screen and (min-width: 900px){
    .cd-slider li {
    pointer-events: none;
    z-index: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: z-index 0s 0.6s;
    -moz-transition: z-index 0s 0.6s;
    transition: z-index 0s 0.6s;
    }
    .cd-slider li.is-visible {
    pointer-events: auto;
    z-index: 3;
    -webkit-transition: z-index 0s 0s;
    -moz-transition: z-index 0s 0s;
    transition: z-index 0s 0s;
    }
    .cd-slider li.is-visible.covered {
    /** list item still there, but covered by the list item entering the viewport (.is-visible) **/
    z-index: 2;
    }
    .cd-slider .cd-half-block {
    height: 100%;
    width: 50%;
    float: right;
    }
    .cd-slider .cd-half-block.content {
    -webkit-transform: translateX(200%);
    -moz-transform: translateX(200%);
    -ms-transform: translateX(200%);
    -o-transform: translateX(200%);
    transform: translateX(200%);
    -webkit-transition: -webkit-transform 0.6s 0s ease-in-out;
    -moz-transition: -moz-transform 0.6s 0s ease-in-out;
    transition: transform 0.6s 0s ease-in-out;
    }
    .cd-slider .cd-half-block.image {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform 0s 0.3s;
    -moz-transition: -moz-transform 0s 0.3s;
    transition: transform 0s 0.3s;
    }
    .cd-slider li.is-visible .cd-half-block.content,
    .cd-slider li.is-visible .cd-half-block.image {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
    }
    .cd-slider li.is-visible .cd-half-block.content {
    -webkit-transition: -webkit-transform 0.6s 0s ease-in-out;
    -moz-transition: -moz-transform 0.6s 0s ease-in-out;
    transition: transform 0.6s 0s ease-in-out;
    }
    .cd-slider .content {
    /** vertically align its content **/
    display: table;
    padding: 0 40px;
    }
    .cd-slider .content > div {
    /** vertically align <div> inside div.content **/
    display: table-cell;
    vertical-align: middle;
    }
    .cd-slider .btn {
    padding: 1.4em 2em;
    font-size: 1.4rem;
    }
    .cd-slider p {
    font-size: 1.6rem;
    }
    .cd-slider h2 {
    font-size: 3.5rem;
    margin-bottom: 0;
    }
    .cd-slider h2, .cd-slider p {
    line-height: 2;
    }
    }
    @media only screen and (min-width: 1170px){
    .cd-slider .content {
    padding: 0 90px;
    }
    .cd-slider h2 {
    font-weight: 300;
    }
    }

    /** slider navigation **/
    .cd-slider-navigation {
    position: absolute;
    z-index: 3;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 30px;
    }
    .cd-slider-navigation li {
    display: inline-block;
    margin: 0 .25em;
    }
    .cd-slider-navigation li.selected a {
    background-color: #fff;
    }
    .cd-slider-navigation a {
    display: block;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    color: transparent;
    /** image replacement **/
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
    border: 1px solid #fff;
    }

    @media only screen and (min-width: 900px){
    .cd-slider-navigation {
    padding: 0.5em 1em;
    background-color: rgba(0, 0, 0, 0.8);
    /** fixes a bug on firefox with ul.cd-slider-navigation z-index **/
    -webkit-transform: translateZ(2px) translateX(-50%);
    -moz-transform: translateZ(2px) translateX(-50%);
    -ms-transform: translateZ(2px) translateX(-50%);
    -o-transform: translateZ(2px) translateX(-50%);
    transform: translateZ(2px) translateX(-50%);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    }
    .cd-slider-navigation .slider-animating {
    -webkit-transform: translateX(-50%) scale(1);
    -moz-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    -o-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
    }
    .cd-slider-navigation a {
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    /** reset style **/
    text-indent: 0;
    border: none;
    border-radius: 0;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
    .cd-slider-navigation li.selected a {
    background-color: transparent;
    color: #f3b96c;
    }
    }