Creative Portfolio Page/Section Design in WordPress with Elementor

 

 

All CSS code snippets on Main Section (scroll-section):

/* HIDE HEADING */

selector .hidden{
    pointer-events: none;
    transform: scaleY(3);
    opacity: 0;
}
selector .big .hidden{
    opacity: 1;
    transform: scaleY(1);
    transition: all 1s ease-in-out;
    pointer-events: all;
    display: block;
}
selector .hidden .elementor-heading-title{
    width: calc(100% + 300px);
    margin-left: calc(-300px/2);
}


/* IMAGE HOVER EFFECT */

selector .elementor-widget-image .elementor-widget-container{
    overflow: hidden;
    cursor: pointer;
}
selector .elementor-widget-image a{
    display: block;
}
selector .elementor-widget-image,
selector .elementor-widget-image img{
    transition: all 0.4s cubic-bezier(0.47, 0, 0.75, 0.72);
}
selector .elementor-widget-image:hover{
    transform: scale(0.95);
}
selector .elementor-widget-image:hover img{
    transform: scale(1.3);
}


/* ALTERNATE SCROLLING */

selector{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    overflow: auto;
}
selector,
selector::-webkit-scrollbar{
    -ms-overflow-style: none;
    scrollbar-width: none;
}
selector::-webkit-scrollbar,
selector .elementor-container::-webkit-scrollbar{
  display: none;
}
selector > .elementor-container{
    overflow: hidden;
}
selector .scroll-up > .elementor-widget-wrap{
    transition: all 0.1s linear;
}
selector .elementor-column{
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
selector .elementor-column.visible{
    opacity: 1;
}
selector .elementor-widget-html{
    margin-bottom: 0;
}
.elementor-location-header{
    z-index: 2;
    position: relative;
}


/* ANIMATING LIGHTBOX */

selector{
    --image-zoom: 1.8;
}
selector.no-scroll{
    overflow: hidden;
}
selector .elementor-widget-heading:not(.hidden){
    transition: all 0.5s ease-in-out;
}
selector .big .elementor-widget-heading:not(.hidden){
    opacity: 0;
}
selector .elementor-column.small{
    opacity: 0;
    transform: scale(0.3) !important;
    pointer-events: none;
}
selector .elementor-column.focus{
    z-index: 1;
}
selector .elementor-widget-image{
    z-index: 1;
}
selector .big .elementor-widget-image,
selector .big .elementor-widget-image:hover{
    transform: scale(var(--image-zoom));
}
selector .big .elementor-widget-image:hover img{
    transform: scale(1);
}


/* MOBILE RESPONSIVE */

@media (max-width: 767px){
selector > .elementor-container{
    height: 100vh !important;
    overflow: auto !important;
}
selector.no-scroll > .elementor-container {
    overflow: hidden !important
}
selector .scroll-up,
selector .scroll-up .elementor-widget-wrap{
    transform: none !important;
}
selector .big .elementor-widget-image,
selector .big .elementor-widget-image:hover{
    transform: scale(1);
}
selector .hidden .elementor-heading-title{
    width: 100%;
    margin-left: 0;
}
body.admin-bar .scroll-section{
    margin-top: 48px;
}
}

 

All JavaScript code snippets:

<!-- ALTERNATE SCROLLING -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var $ = jQuery

$(document).ready(function(){
    
var s = $('.scroll-section'),
    sUp = $('.scroll-up').children('.elementor-widget-wrap'),
    sDown = $('.scroll-down').children('.elementor-widget-wrap')

function init(){
    var sUpPadding = parseInt(sUp.eq(0).css('padding-bottom')),
    sDownPadding = parseInt(sDown.css('padding-top')) + parseInt(sDown.css('padding-bottom')),
        h = 0
    
    $('.elementor-column').addClass('visible')
    sDown.children().each(function(){
        h += $(this).outerHeight(true)
    })
    s.children('.elementor-container').height(h+sDownPadding)
    console.log(h)
    $('.scroll-up').css('transform', 'translateY(' + (-1)*(h - s.height() + sUpPadding) + 'px)')
}

init()
$(window).on('load resize', init)
        
function scrollUp(e){
    sUp.css('transform', 'translateY(' + s.scrollTop() * 2 + 'px)')
}

s.on('scroll resize', function(){
    scrollUp()
    setTimeout(scrollUp, 10)
    setTimeout(scrollUp, 20)
    setTimeout(scrollUp, 50)
    setTimeout(scrollUp, 100)
    setTimeout(scrollUp, 500)
})
})
</script>


<!-- ANIMATING LIGHTBOX -->

<script>
$(document).ready(function(){
    
    var s = $('.scroll-section'),
        header = $('.elementor-location-header')
    
    $('.scroll-section img').on('click', function(e){
    
    col = $(this).closest('.elementor-column')
    
    var posTop = (col.offset().top * -1) + ( $(window).height() -  col.height())/2,
        posLeft = (col.offset().left * -1) + ( $(window).width() - col.width())/2
    
    if( col.hasClass('big') ){ return }
    
    col.addClass('big')
    setTimeout(function(){
        col.addClass('link')
    },50)
    col.parent().closest('.elementor-column').addClass('focus')
    col.css('transform', 'translate(' + posLeft +'px,' + posTop + 'px)')
    s.addClass('no-scroll')
    header.fadeOut(300)
    
    s.find('.elementor-inner-section .elementor-column').each(function(){
        if( ! $(this).hasClass('big')){
            $(this).addClass('small')
        }  
    })
})

$('body').on('click', function(e){
    if( ! ( $(e.target).hasClass('big') || $(e.target).closest('.big').length ) ){
        
        s.removeClass('no-scroll')
        col.css('transform', 'translate(0,0)')
        $('.elementor-column').removeClass('big link focus small')
        setTimeout(function(){
            header.fadeIn()
        }, 200)
    }
})

$('.scroll-section a').on('click', function(e){
    if( ! $(this).closest('.elementor-column').hasClass('link') ) {
        e.preventDefault()
    }
})
})
</script>

 

CSS code snippet for Transparent Header Background (desktop only):

@media (min-width: 1025px){
selector{
    background: none !important;
}
}