So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at certain point into the HTML widget, so below is everything you will need!
You can download the complete template here
The Following are the css class names I used in the tutorial:
reboot-stacking-card-area
reboot-stacked-cards
The Following code goes into the Card Section Container (reboot-stacking-card-area):
selector{
--card-scroll-height: 400;
--card-rotate: 12;
}
selector .reboot-active-card{
transform: translateY(-100vh) rotate(-60deg) !important;
transition:1s;
visibility: hidden;
transform-origin: bottom left;
}
selector > .e-con,
selector > .e-container,
selector > .e-con-inner > .e-con,
selector > .e-con-inner > .e-container{
position: sticky;
top:0;
}
The Following code goes into the HTML widget:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
if(!rebootNonce100){
var rebootNonce100 = true
$(document).ready(function() {
var previousScrollTop = [],
cards = [],
cardScrollHeight = [],
cardRotate = [],
cardContainer = [],
stickyTop = [],
stickyCon = []
function cardSlideUp(){
$('.reboot-stacking-card-area').each(function(i){
var $this = $(this),
scrollTop = $(document).scrollTop(),
cardAreaTop = $this.offset().top,
index = Math.floor((scrollTop - cardAreaTop - stickyTop[i]) / cardScrollHeight[i]),
totalCards = cards[i].length
cards[i].removeClass('reboot-active-card')
cards[i].each(function(j){
if( j <= index ) {
$(this).addClass('reboot-active-card')
}
if(index >= -1 && index < totalCards - 1){
$(this).css({
'transform': `rotate(${ -1*j*cardRotate[i] + (index+1)*cardRotate[i] }deg)`
})
}
})
previousScrollTop[i] = scrollTop
})
}
function setValues(){
$('.reboot-stacking-card-area').each(function(i){
var $this = $(this)
stickyTop[i] = 0
if(stickyCon[i].outerHeight() > $(window).height()){
stickyTop[i] = cardContainer[i].offset().top - stickyCon[i].offset().top - $(window).height()/2
}
stickyCon[i].css('top', -1*stickyTop[i])
cardScrollHeight[i] = $this.css('--card-scroll-height') ? parseInt($this.css('--card-scroll-height').trim()) : 400
cardRotate[i] = $this.css('--card-rotate') ? parseInt($this.css('--card-rotate').trim()) : 9
cards[i].each(function(j) {
$(this).css({
'transform': `rotate(-${j * cardRotate[i]}deg)`,
'z-index': cards[i].length - j
})
})
$this.css('height', stickyCon[i].outerHeight() + ((cards[i].length - 1) * cardScrollHeight[i]) + 'px' )
})
}
$(document).on('scroll', cardSlideUp)
$(window).on('resize', function(){
setValues()
cardSlideUp()
})
function init(){
$('.reboot-stacking-card-area').each(function(i){
var $this = $(this)
cards[i] = $this.find('.reboot-stacked-cards > .e-con, .reboot-stacked-cards > .e-container, .reboot-stacked-cards > .e-con-inner > .e-con, .reboot-stacked-cards > .e-con-inner > .e-container')
stickyCon[i] = $this.children('.e-con, .e-container').eq(0)
stickyCon[i].parents().each(function(){
if( !$(this).is('html') ){ $(this).css('overflow', 'visible') }
})
previousScrollTop[i] = $(document).scrollTop()
cardContainer[i] = $this.find('.reboot-stacked-cards')
})
setValues()
cardSlideUp()
}
init()
})
}
</script>