/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number)
@if type-of($number) == 'number' and not unitless($number)
@return $number / ($number * 0 + 1)
@return $number
$timelinePointSize: 5px
$timelineBubbleSize: 130px
$timelineBubbleSizeNoUnits: strip-unit($timelineBubbleSize)
$timelineBubbleWidth: 90px
$timelineHeight: 130px
$timelineTriangleSize: $timelineBubbleSize*2
html, body
height: 100%
body
background: #dedede
display: flex
overflow: hidden
.page
flex: 1
display: flex
justify-content: flex-end
flex-direction: column
.timeline__wrapper
padding: 0 30px
height: $timelineHeight
display: flex
.timeline
display: flex
flex: 1
align-items: center
position: relative
a
text-decoration: none
&:hover
text-decoration: underline
.timeline__all-cars,
.timeline__exit
// flex: none
padding: 1em 1.75em
display: inline-block
background: white
.timeline__list
flex: 1
display: flex
list-style-type: none
margin: 0 30px
padding: 0
justify-content: space-between
align-items: center
align-self: stretch
position: relative
.timeline__item
flex: 1
position: relative
border: 1px dashed rgba(black, .1)
&:after
content: ''
width: calc(100% - #{$timelinePointSize}*3)
height: 1px
position: absolute
top: 50%
left: calc(50% + #{$timelinePointSize} - 1px)
background: white
z-index: 5
pointer-events: none
&:last-child:after
display: none
.timeline__item--active
.timeline__item__point
&:after
opacity: 1
transform: scale(1)
.timeline__link
position: relative
display: block
padding: 10px 0
.timeline__item__point
width: $timelinePointSize
height: $timelinePointSize
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%) rotate(45deg)
border: 1px solid white
z-index: 6
&:after
content: ''
display: block
width: 100%
height: 100%
background: white
position: absolute
top: 0
left: 0
transform-origin: 50% 50%
opacity: 0
transform: scale(0)
transition: all .5s
.timeline__item__content
// width: 90px
width: $timelineBubbleSize
height: $timelineBubbleSize
// padding: 30px 0
position: absolute
left: 50%
bottom: 100%
transform: translate(-50%, -20px)
opacity: 0
transition: all .75s ease-out
text-align: center
// border: 1px dashed rgba(black, .25)
display: flex
justify-content: center
align-items: center
pointer-events: none
// clip-path: polygon(50% -25px, calc(100% + 25px) 50%, 50% calc(100% + 25px), -25px 50%)
&:before,
&:after
pointer-events: none
content: ''
border: solid $timelineBubbleWidth transparent
position: absolute
width: 0
height: 0
top: 50%
left: 50%
transition: all .45s ease-out
opacity: .75
&:before
border-bottom-color: #e6e6e6
// transform: translate(-50%, -100%)
transform: translate(-50%, -100%) scale(.6)
transform-origin: 50% 100%
&:after
border-top-color: white
// transform: translate(-50%, 0%)
transform: translate(-50%, 0%) scale(.8)
transform-origin: 50% 0%
.clippath &
box-shadow: 0 -2px 5px 0 rgba(0,0,0,.1)
clip-path: polygon(-2px -2px, calc(100% + 2px) -2px, 50% 100%)
// &:before
// content: ''
// display: block
// padding-bottom: 100%
// background: white
// transform-origin: 50% 50%
// transform: rotate(25deg)
// transition: transform .75s ease-out
// position: absolute
// bottom: 0
// left: 0
// width: 100%
// &:after
// content: ''
// display: block
// padding-bottom: 100%
// height: 0
.timeline__item--active &,
.timeline__link:hover + &
opacity: 1
transform: translate(-50%, -55px)
&:before
transform: translate(-50%, -100%) scale(1)
opacity: 1
&:after
transform: translate(-50%, 0%) scale(1)
opacity: 1
// &:before
// transform: rotate(45deg)
.timeline__item__year
position: absolute
top: 40px
left: 50%
transform: translate(-50%, -50%)
z-index: 2
transition: all .4s ease-in
opacity: 0
.timeline__item--active &,
.timeline__link:hover ~ &
color: green
font-size: 26px
font-weight: bold
.timeline__item:nth-child(3n + 1) &
opacity: 1
.timeline__item__thumb
// display: none
position: relative
z-index: 5
.timeline__item__shadow
position: absolute
// width: 100%
// height: 100%
top: calc(50% - 20/#{$timelineBubbleSizeNoUnits} * 100%)
left: 50%
z-index: -1
width: 0
height: 0
border-style: solid
border-width: $timelineBubbleSize $timelineBubbleSize 0 0
border-color: rgba(black, .25) transparent transparent transparent
transform-origin: 0 0
transform: scale(.5)
opacity: 0.6
transition: all .3s
transition-delay: .15s
.timeline__item--active &,
.timeline__link:hover + .timeline__item__content &
transform: scale(1)
opacity: 1
.timeline__path
position: absolute
top: 0
left: 25px
right: -30px
height: 100%
overflow: hidden
pointer-events: none
z-index: -1
background: rgba(black, .2) url(http://testuje.cz/noise.png) repeat 0 0
clip-path: polygon($timelineHeight 0, 100% 0, 100% 100%, 0 100%)
.timeline__path__triangle
display: block
position: absolute
border-style: solid
width: 0
height: 0
backface-visibility: hidden
.timeline__path__triangle--static-1,
.timeline__path__triangle--static-2
top: 0
.timeline__path__triangle--static-1
border-width: $timelineTriangleSize $timelineTriangleSize 0 $timelineTriangleSize
border-color: rgba(black, .2) transparent transparent transparent
left: 0
.timeline__path__triangle--static-2
border-width: $timelineTriangleSize $timelineTriangleSize 0 $timelineTriangleSize
border-color: rgba(white, .4) transparent transparent transparent
right: 0
.timeline__path__triangle--static-3
border-width: 0 $timelineTriangleSize $timelineTriangleSize $timelineTriangleSize
border-color: transparent transparent rgba(white, .4) transparent
left: 30%
bottom: 0
.timeline__path__triangle--moving
position: absolute
border-width: $timelineTriangleSize $timelineTriangleSize 0 $timelineTriangleSize
border-color: rgba(white, .2) transparent transparent transparent
left: 0
top: 0
transition: transform 3s ease-out
////
// ADDED
////
.views,
.view
width: 100vw
height: 100vh
.views
background: pink
.view__inner
display: flex
width: 100%
height: 100%
align-items: center
justify-content: center
.timeline__wrapper
position: absolute
bottom: 0
z-index: 2
width: calc(100% - 60px)
.slick-slide
outline: none
.slick-arrow
background: red
z-index: 10
.slick-prev
left: 15px
.slick-next
right: 15px
View Compiled
let areClipPathShapesSupported = function () {
let base = 'clipPath',
prefixes = [ 'webkit', 'moz', 'ms', 'o' ],
properties = [ base ],
testElement = document.createElement( 'testelement' ),
attribute = 'polygon(50% 0%, 0% 100%, 100% 100%)';
// Push the prefixed properties into the array of properties.
for ( let i = 0, l = prefixes.length; i < l; i++ ) {
let prefixedProperty = prefixes[i] + base.charAt( 0 ).toUpperCase() + base.slice( 1 ); // remember to capitalize!
properties.push( prefixedProperty );
}
// Interate over the properties and see if they pass two tests.
for ( let i = 0, l = properties.length; i < l; i++ ) {
let property = properties[i];
// First, they need to even support clip-path (IE <= 11 does not)...
if ( testElement.style[property] === '' ) {
// Second, we need to see what happens when we try to create a CSS shape...
testElement.style[property] = attribute;
if ( testElement.style[property] !== '' ) {
return true;
}
}
}
return false;
};
$(() => {
let defaultSlickSpeed = 300;
$('.views')
.slick({
speed: defaultSlickSpeed
})
.on('beforeChange', (evt, slick, currentSlide, nextSlide) => {
let delta = Math.abs(currentSlide - nextSlide);
if(delta === slick.slideCount - 1) {
delta = 1;
}
$('.views').slick('slickSetOption', 'speed', delta * defaultSlickSpeed);
})
.on('afterChange', (evt, slick, currentSlide) => {
$('.views').slick('slickSetOption', 'speed', defaultSlickSpeed);
$('.timeline__list').find('.timeline__item--active').removeClass('timeline__item--active');
$('.timeline__list').find(`.timeline__item:nth-child(${currentSlide + 1})`).addClass('timeline__item--active');
});
$('.timeline__link').on('click', (evt) => {
evt.preventDefault();
$('.timeline__item--active').removeClass('timeline__item--active');
$(evt.currentTarget).parent().addClass('timeline__item--active');
$('.views').slick('slickGoTo', $(evt.currentTarget).parent().prevAll('li').length);
});
let timelineOffset = $('.timeline').offset().left;
let triangleWidth = $('.timeline__path__triangle--moving').outerWidth();
$('.timeline').on('mousemove', (evt) => {
let value = evt.pageX - timelineOffset - triangleWidth / 2
$('.timeline__path__triangle--moving').css({
transform: `translateX(${value}px)`,
})
});
if(!areClipPathShapesSupported()) {
$('body').addClass('no-clippath');
} else {
$('body').addClass('clippath');
}
})
View Compiled
