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
Custom Calculator Section 1
Raw
index.html
<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>
Raw
script.js
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 );
}
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
Raw
style.css
*, *::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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment