how to jquery: animate scrollLeft for making webiste like vardhman official website ?

Question

how to jquery: animate scrollLeft for making webiste like vardhman official website ?

 

how to make website like this url  click here

</p>
<p>&lt;style&gt;<br />
p a{margin-top: 30px;<br />
color: #a79757;<br />
font-weight: bold;<br />
cursor: pointer; text-decoration:none;}<br />
p a:hover{margin-top: 30px;<br />
color: #a79757;<br />
font-weight: bold;<br />
cursor: pointer;text-decoration:none;}<br />
.landing-slide .middel-cont {<br />
position: absolute;<br />
top: 43%;}<br />
.fade-in {<br />
opacity: 0;<br />
transition: opacity 1s linear;<br />
-moz-transition: opacity 1s linear;<br />
-webkit-transition: opacity 1s linear;<br />
-ms-transition: opacity 1s linear;<br />
-o-transition: opacity 1s linear;<br />
}</p>
<p>.fade-in.shown {<br />
opacity: 1;<br />
}</p>
<p>.fade-in-start {<br />
opacity: 0;<br />
transition: opacity 1s linear;<br />
-moz-transition: opacity 1s linear;<br />
-webkit-transition: opacity 1s linear;<br />
-ms-transition: opacity 1s linear;<br />
-o-transition: opacity 1s linear;<br />
}</p>
<p>.fade-in-start.shown {<br />
opacity: 1;<br />
}</p>
<p>.floating {<br />
opacity: 0;<br />
transition: opacity 1s linear;<br />
-moz-transition: opacity 1s linear;<br />
-webkit-transition: opacity 1s linear;<br />
-ms-transition: opacity 1s linear;<br />
-o-transition: opacity 1s linear;<br />
}</p>
<p>.floating.shown {<br />
opacity: 1;<br />
}<br />
&lt;/style&gt;<br />
&lt;script type="text/javascript"&gt;<br />
$(window).load(function () {<br />
$('.main-content').stellar({<br />
horizontalScrolling: true,<br />
verticalOffset: 0,<br />
scrollProperty: 'scroll'<br />
});</p>
<p>$(window).resize(function () {<br />
$.stellar('refresh');<br />
});<br />
});</p>
<p>$(document).ready(function () {<br />
$(".top-bottom").each(function () {<br />
var ch = parseInt($(this).css('top'));</p>
<p>var new_ch = ch - 40;<br />
$(this).css('top', new_ch + 'px');<br />
});<br />
$(".bottom-top").each(function () {<br />
var ch = parseInt($(this).css('top'));</p>
<p>var new_ch = ch + 40;<br />
$(this).css('top', new_ch + 'px');<br />
});<br />
$(".right-left").each(function () {<br />
var ch = parseInt($(this).css('left'));</p>
<p>var new_ch = ch + 60;<br />
$(this).css('left', new_ch + 'px');<br />
});<br />
//$(".fade-in").css('visibility','hidden');<br />
var path = document.querySelector('.squiggle-animated path');<br />
var length = path.getTotalLength();<br />
// Clear any previous transition<br />
path.style.transition = path.style.WebkitTransition = 'none';<br />
// Set up the starting positions<br />
path.style.strokeDasharray = length + ' ' + length;<br />
path.style.strokeDashoffset = length;<br />
// Trigger a layout so styles are calculated &amp; the browser<br />
// picks up the starting position before animating<br />
path.getBoundingClientRect();<br />
// Define our transition<br />
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 1s ease-in-out';<br />
var inner = false;<br />
var csc = $('html, body').scrollLeft();</p>
<p>$('.first-slide .line-01, .next-btn').click(function () {<br />
csc = csc + $(".slide").width();</p>
<p>if ($(this).hasClass('next-btn')) {<br />
$(".animation").addClass('animate');<br />
$('html, body').animate({<br />
scrollLeft: csc<br />
}, 1000);<br />
//$(".main-menu-toggle").css('position','absolute');<br />
} else {<br />
$('html, body').animate({<br />
scrollLeft: csc<br />
}, 1000, function () {<br />
$(".fade-in-start").each(function (index, element) {<br />
if ($(this).hasClass('top-bottom') &amp;&amp; !$(this).hasClass('shown')) {<br />
var dt = parseInt($(this).css('top'));<br />
dt = dt + 40;<br />
$(this).animate({<br />
top: dt<br />
}, 600, 'linear');<br />
} else if ($(this).hasClass('bottom-top') &amp;&amp; !$(this).hasClass('shown')) {<br />
var dt = parseInt($(this).css('top'));<br />
dt = dt - 40;<br />
$(this).animate({<br />
top: dt<br />
}, 600, 'linear');<br />
} else if ($(this).hasClass('right-left') &amp;&amp; !$(this).hasClass('shown')) {<br />
var dt = parseInt($(this).css('left'));<br />
dt = dt - 60;<br />
$(this).animate({<br />
left: dt<br />
}, 600, 'linear');<br />
}<br />
$(this).addClass('shown');<br />
});<br />
});<br />
}<br />
});</p>
<p>$('html, body').animate({<br />
scrollLeft: csc<br />
}, 1000, function () {<br />
$(".fade-in-start").each(function (index, element) {<br />
if ($(this).hasClass('top-bottom') &amp;&amp; !$(this).hasClass('shown')) {<br />
var dt = parseInt($(this).css('top'));<br />
dt = dt + 40;<br />
$(this).animate({<br />
top: dt<br />
}, 600, 'linear');<br />
} else if ($(this).hasClass('bottom-top') &amp;&amp; !$(this).hasClass('shown')) {<br />
var dt = parseInt($(this).css('top'));<br />
dt = dt - 40;<br />
$(this).animate({<br />
top: dt<br />
}, 600, 'linear');<br />
} else if ($(this).hasClass('right-left') &amp;&amp; !$(this).hasClass('shown')) {<br />
var dt = parseInt($(this).css('left'));<br />
dt = dt - 60;<br />
$(this).animate({<br />
left: dt<br />
}, 600, 'linear');<br />
}<br />
$(this).addClass('shown');<br />
});<br />
});<br />
$(".second-slide").mCustomScrollbar({<br />
axis: "x",<br />
theme: "dark",<br />
setHeight: '100%',<br />
scrollButtons: {<br />
enable: true<br />
},<br />
mouseWheel: {<br />
deltaFactor: 10<br />
},<br />
onInit: function () {<br />
$(".logo-close-btn").css("position", "fixed");<br />
},<br />
callbacks: {<br />
whileScrolling: function () {<br />
var amt = this.mcs.leftPct;<br />
$(".fade-in, .floating").each(function (index, element) {<br />
if ($(this).offset().left - $(".second-slide").offset().left &lt;= $(".slide").width() * 3 / 4) {</p>
<p>if ($(this).hasClass('top-bottom') &amp;&amp; !$(this).hasClass('shown')) {<br />
var dt = parseInt($(this).css('top'));<br />
dt = dt + 40;<br />
$(this).animate({<br />
top: dt<br />
}, 600, 'linear');<br />
} else if ($(this).hasClass('bottom-top') &amp;&amp; !$(this).hasClass('shown')) {<br />
var dt = parseInt($(this).css('top'));<br />
dt = dt - 40;<br />
$(this).animate({<br />
top: dt<br />
}, 600, 'linear');<br />
} else if ($(this).hasClass('right-left') &amp;&amp; !$(this).hasClass('shown')) {<br />
var dt = parseInt($(this).css('left'));<br />
dt = dt - 60;<br />
$(this).animate({<br />
left: dt<br />
}, 600, 'linear');<br />
}<br />
$(this).addClass('shown');<br />
} else {<br />
if ($(this).hasClass('top-bottom') &amp;&amp; $(this).hasClass('shown')) {<br />
var dt = parseInt($(this).css('top'));<br />
dt = dt - 40;<br />
$(this).animate({<br />
top: dt<br />
}, 600, 'linear');<br />
} else if ($(this).hasClass('bottom-top') &amp;&amp; $(this).hasClass('shown')) {<br />
var dt = parseInt($(this).css('top'));<br />
dt = dt + 40;<br />
$(this).animate({<br />
top: dt<br />
}, 600, 'linear');<br />
} else if ($(this).hasClass('right-left') &amp;&amp; $(this).hasClass('shown')) {<br />
var dt = parseInt($(this).css('left'));<br />
dt = dt + 60;<br />
$(this).animate({<br />
left: dt<br />
}, 600, 'linear');<br />
}</p>
<p>$(this).removeClass('shown');<br />
}</p>
<p>});<br />
var path = document.querySelector('.squiggle-animated path');<br />
var length = path.getTotalLength();<br />
path.style.strokeDashoffset = length - (length * amt / 100);<br />
},<br />
onScrollStart: function () {<br />
$(".main-menu-toggle").css('position', 'fixed');<br />
},<br />
onTotalScroll: function () {<br />
$(".next-btn").show();<br />
}<br />
}<br />
});</p>
<p>});<br />
&lt;/script&gt;</p>
<p>

0
edwin 4 months 0 Answers 118 views 0

Leave an answer

Browse
Browse

Captcha Click on image to update the captcha .