Want to get this as ready made template with just 1 CLICK INSTALL?
Code Snippet for Image Scrolling Effect:
<style>
body{
--smooth-scroll: true;
}
body,
[data-elementor-type="wp-page"]{
overflow-x: hidden;
}
.mdw-scroll-effect-141-images .elementor-widget-image,
.mdw-scroll-effect-141-images img{
max-width: unset !important;
}
html.elementor-html .mdw-scroll-effect-141-content{
z-index: 100;
}
.mdw-scroll-effect-141-content > .elementor-element:not(.mdw-scroll-effect-141-text) > *{
opacity: 0;
transform: translateY(50%);
transition: 1s;
}
.mdw-scroll-effect-141-text p:last-child{
margin: 0;
}
.mdw-scroll-effect-141-content .mdw-scroll-effect-141-text .word{
display: inline-block;
overflow: hidden;
}
.mdw-scroll-effect-141-content .mdw-scroll-effect-141-text .inner-word{
display: inline-block;
transform: translateY(100%);
transition: all 1s ease-in-out calc(var(--delay)*0.1s);
}
html.elementor-html .mdw-scroll-effect-141-content > .elementor-element > *,
.mdw-scroll-effect-141-content > .elementor-element.reveal > *,
.mdw-scroll-effect-141-content .mdw-scroll-effect-141-text.reveal .inner-word{
opacity: 1;
transform: translateY(0);
}
@media(max-width: 767px){
.mdw-scroll-effect-141-images .elementor-widget-image{
transition: 1.2s;
}
.mdw-scroll-effect-141-images > .e-con.moved > .e-con:nth-child(1) .elementor-widget-image,
.mdw-scroll-effect-141-images > .e-container.moved > .e-container:nth-child(1) .elementor-widget-image{
transform: translateX(-180px);
}
.mdw-scroll-effect-141-images > .e-con.moved > .e-con:nth-child(2) .elementor-widget-image,
.mdw-scroll-effect-141-images > .e-container.moved > .e-container:nth-child(2) .elementor-widget-image{
transform: translateX(180px);
}
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
if(!MDWNonce141){
var MDWNonce141 = true,
selector = '.mdw-scroll-effect-141',
contents = [],
windowHeight,
windowHalfHeight,
windowWidth
function init(){
$(selector).each(function(i){
contents[i] = $(this).find('.mdw-scroll-effect-141-content').children()
})
}
function updateCardsPosition(){
var windowTop = $(window).scrollTop()
$(selector).each(function(){
$(this).find('.mdw-scroll-effect-141-images').each(function(i){
var container = $(this),
containerTop = container.offset().top,
containerHeight = container.outerHeight(),
startPoint = (i === 0) ? containerTop - windowHalfHeight : containerTop - windowHeight,
endPoint = containerTop + containerHeight - windowHalfHeight,
progress = (windowTop - startPoint) / (endPoint - startPoint)
progress = Math.max(0, Math.min(1, progress))
if(windowWidth > 767){
var init = {
leftX: [-800, -900, -400],
rightX: [800, 900, 400],
leftRotate: [-30, -20, -35],
rightRotate: [30, 20, 35],
y: [100, -150, -400]
}
container.children('.e-con, .e-container').each(function(index){
var arrIndex = index % init.leftX.length,
leftX = progress * init.leftX[arrIndex],
leftY = progress * init.y[arrIndex],
leftRotate = progress * init.leftRotate[arrIndex],
rightX = progress * init.rightX[arrIndex],
rightY = progress * init.y[arrIndex],
rightRotate = progress * init.rightRotate[arrIndex],
leftCard = $(this).find('.elementor-widget-image').eq(0),
rightCard = $(this).find('.elementor-widget-image').eq(1)
leftCard.css('transform', `translate(${leftX}px, ${leftY}px) rotate(${leftRotate}deg)`)
rightCard.css('transform', `translate(${rightX}px, ${rightY}px) rotate(${rightRotate}deg)`)
})
}else{
container.children('.e-con, .e-container').each(function(){
var c = $(this),
image = c.find('.elementor-widget-image'),
cardOffsetTop = c[0].getBoundingClientRect().top
image.removeAttr('style')
c.toggleClass('moved', cardOffsetTop < windowHalfHeight)
})
}
})
})
}
function wrapWords(){
$('.mdw-scroll-effect-141-text p').each(function(){
var el = $(this),
text = el.text(),
chunks = text.match(/\S+|\s+/g) || [],
html = '', t
for(var i=0; i<chunks.length; i++){
t = chunks[i]
if (/\s+/.test(t)){
html += t
}else{
html += `<span class="word"><span class="inner-word">${t}</span></span>`
}
}
el.html(html)
var spans = el.find('.word'),
prevTop = null,
delay = 0
spans.each(function(){
var top = $(this).offset().top
delay = prevTop === null ? 0 : (top > prevTop ? delay + 1 : delay)
$(this)[0].style.setProperty('--delay', delay)
prevTop = top
})
})
}
function revealContent(){
$(selector).each(function(i){
contents[i].each(function(){
var content = $(this),
contentTop = content[0].getBoundingClientRect().top,
startPoint = windowWidth > 767 ? 0.8 : 0.6
content.toggleClass('reveal', contentTop < windowHeight*startPoint)
})
})
}
$(document).ready(function(){
init()
wrapWords()
})
$(window).on('load scroll resize',function(){
windowHeight = $(window).height()
windowHalfHeight = windowHeight/2
windowWidth = $(window).width()
updateCardsPosition()
revealContent()
})
$(window).on('load resize',function(){
wrapWords()
})
}
</script>
<!-- Smooth Scroll -->
<style>
html.lenis, html.lenis body{
height: auto;
}
.lenis.lenis-smooth{
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent]{
overscroll-behavior: contain;
}
.lenis.lenis-stopped{
overflow: hidden;
}
.lenis.lenis-smooth iframe{
pointer-events: none;
}
</style>
<script src="https://unpkg.com/lenis@1.1.11/dist/lenis.min.js"></script>
<script>
$(document).ready(function(){
var smoothScroll = getComputedStyle(document.body).getPropertyValue('--smooth-scroll'),
smoothScroll = smoothScroll && smoothScroll == 'true'
if(smoothScroll){
var lenis = new Lenis()
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
}
})
</script>
