We Keep Coding

vertical and horizontal scroll using JavaScript

I'm working on the layout of a website and I want my slider to move horizontally while scrolling vertically. In short, I want to flip my scroll. How can I do that?
My code:
$(function () {
var Page = (function () {
var $navArrows = $("#nav-arrows"),
$nav = $("#nav-dots > span"),
$document = $(document),
slitslider = $("#slider").slitslider({
onBeforeChange: function (slide, pos) {
$nav.removeClass("nav-dot-current");
$nav.eq(pos).addClass("nav-dot-current");
}
}),
init = function () {
initEvents();
},
initEvents = function () {
// add navigation events
$navArrows.children(":last").on("click", function () {
slitslider.next();
return false;
});
$navArrows.children(":first").on("click", function () {
slitslider.previous();
return false;
});
$nav.each(function (i) {
$(this).on("click", function (event) {
var $dot = $(this);
if (!slitslider.isActive()) {
$nav.removeClass("nav-dot-current");
$dot.addClass("nav-dot-current");
}
slitslider.jump(i + 1);
return false;
});
});
},
NextSlid = function () {
slitslider.next();
return false;
},
PreviousSlid = function () {
slitslider.previous();
return false;
};
return { init: init, NextSlid: NextSlid, PreviousSlid, PreviousSlid };
})();
Page.init();
$(window).on("wheel", function (e) {
var delta = e.originalEvent.deltaY;
if (delta > 0) {
Page.NextSlid();
} else {
Page.PreviousSlid();
}
});
$(".container").each(function () {
console.log("cont");
let $window = $(document),
$body = $(".main");
let $nested = $(this),
$nestedPlaceholder = $nested.parent();
let verticalScrollRange, upperMargin, lowerMargin;
$window.resize(function (e) {
console.log("resize");
$nested.removeClass("sticky").css({ left: 0 });
let placeholderHeight = $nestedPlaceholder.css({ height: "" }).height();
verticalScrollRange = placeholderHeight - $window.height();
upperMargin = $nestedPlaceholder.offset().top;
lowerMargin = upperMargin + verticalScrollRange;
$nestedPlaceholder.height(placeholderHeight);
});
const main = document.querySelector(".main");
const scrollEvent = () => {
console.log(main.scrollTop);
console.log("scroll");
let scrollTop = main.scrollTop;
// console.log("scrollTop = " + scrollTop);
console.log("upperMargin = " + upperMargin);
console.log("scrollTop =" + scrollTop);
console.log("lowerMargin =" + lowerMargin);
// && scrollTop < lowerMargin
if (scrollTop >= upperMargin) {
$nested.addClass("sticky");
console.log("addClass --------------");
let horizontalScrollRange = $nested.width() - $body.width();
let verticalScrollPosition = scrollTop - upperMargin;
let horizontalScrollPosition =
(verticalScrollPosition / verticalScrollRange) *
horizontalScrollRange;
$nested.css({ left: -horizontalScrollPosition });
} else {
// $nested.removeClass("sticky");
console.log("removeClass +++++++++++++");
}
};
main.addEventListener("scroll", scrollEvent);
$window.resize();
});
});
body {
width: 100vw;
height: 100vh;
margin: 0;
background-color: green;
}
.main {
width: 100%;
height: 100%;
background-color: yellow;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
section {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.nav-arrows {
display: none;
}
.sl-slider-wrapper {
width: 800px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.sl-slider {
position: absolute;
top: 0;
left: 0;
}
/* Slide wrapper and slides */
.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.sl-slide {
z-index: 1;
}
/* The duplicate parts/slices */
.sl-content-slice {
overflow: hidden;
position: absolute;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
opacity: 1;
}
/* Horizontal slice */
.sl-slide-horizontal .sl-content-slice {
width: 100%;
height: 50%;
left: -200px;
-webkit-transform: translateY(0%) scale(1);
-moz-transform: translateY(0%) scale(1);
-o-transform: translateY(0%) scale(1);
-ms-transform: translateY(0%) scale(1);
transform: translateY(0%) scale(1);
}
.sl-slide-horizontal .sl-content-slice:first-child {
top: -200px;
padding: 200px 200px 0px 200px;
}
.sl-slide-horizontal .sl-content-slice:nth-of-type(2) {
top: 50%;
padding: 0px 200px 200px 200px;
}
/* Vertical slice */
.sl-slide-vertical .sl-content-slice {
width: 50%;
height: 100%;
top: -200px;
-webkit-transform: translateX(0%) scale(1);
-moz-transform: translateX(0%) scale(1);
-o-transform: translateX(0%) scale(1);
-ms-transform: translateX(0%) scale(1);
transform: translateX(0%) scale(1);
}
.sl-slide-vertical .sl-content-slice:first-child {
left: -200px;
padding: 200px 0px 200px 200px;
}
.sl-slide-vertical .sl-content-slice:nth-of-type(2) {
left: 50%;
padding: 200px 200px 200px 0px;
}
/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
position: absolute;
}
.sl-content {
width: 100%;
height: 100%;
background: #fff;
}
/* Default styles for background colors */
.sl-slide-horizontal .sl-slide-inner {
background: #ddd;
}
.sl-slide-vertical .sl-slide-inner {
background: #ccc;
}
.demo-1 .sl-slider-wrapper {
position: relative;
width: 100vw;
height: 100vh;
/* top: 0;
left: 0; */
}
.demo-2 .sl-slider-wrapper {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
}
.demo-2 .sl-slider h2,
.demo-2 .sl-slider blockquote {
padding: 100px 30px 10px 30px;
width: 80%;
max-width: 960px;
color: #fff;
margin: 0 auto;
position: relative;
z-index: 100;
}
.demo-2 .sl-slider h2 {
font-size: 100px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.demo-2 .sl-slider blockquote {
font-size: 28px;
padding-top: 10px;
font-weight: 300;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.demo-2 .sl-slider blockquote cite {
font-size: 16px;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
letter-spacing: 5px;
padding-top: 30px;
display: inline-block;
}
.demo-2 .bg-img {
padding: 200px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
top: -200px;
left: -200px;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
}
/* Custom navigation arrows */
.nav-arrows span {
position: absolute;
z-index: 2000;
top: 50%;
width: 40px;
height: 40px;
border: 8px solid #ddd;
border: 8px solid rgba(150, 150, 150, 0.4);
text-indent: -90000px;
margin-top: -40px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-arrows span:hover {
border-color: rgba(150, 150, 150, 0.9);
}
.nav-arrows span.nav-arrow-prev {
left: 5%;
border-right: none;
border-top: none;
}
.nav-arrows span.nav-arrow-next {
right: 5%;
border-left: none;
border-bottom: none;
}
/* Custom navigation dots */
.nav-dots {
text-align: center;
position: absolute;
bottom: 2%;
height: 30px;
width: 100%;
left: 0;
z-index: 1000;
}
.nav-dots span {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 3px;
background: #ddd;
background: rgba(150, 150, 150, 0.4);
cursor: pointer;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4),
inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.demo-2 .nav-dots span {
background: rgba(150, 150, 150, 0.1);
margin: 6px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4),
inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.demo-2 .nav-dots span.nav-dot-current,
.demo-2 .nav-dots span:hover {
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4),
inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(255, 255, 255, 0.5);
}
.nav-dots span.nav-dot-current:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
top: 3px;
left: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
}
/* Content elements */
.demo-1 .deco {
width: 260px;
height: 260px;
border: 2px dashed #ddd;
border: 2px dashed rgba(150, 150, 150, 0.4);
border-radius: 50%;
position: absolute;
bottom: 50%;
left: 50%;
margin: 0 0 0 -130px;
}
.demo-1 [data-icon]:after {
content: attr(data-icon);
font-family: "AnimalsNormal";
color: #999;
text-shadow: 0 0 1px #999;
position: absolute;
width: 220px;
height: 220px;
line-height: 220px;
text-align: center;
font-size: 100px;
top: 50%;
left: 50%;
margin: -110px 0 0 -110px;
box-shadow: inset 0 0 0 10px #f7f7f7;
border-radius: 50%;
}
.demo-1 .sl-slide h2 {
color: #000;
text-shadow: 0 0 1px #000;
padding: 20px;
position: absolute;
font-size: 34px;
font-weight: 700;
letter-spacing: 13px;
text-transform: uppercase;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
bottom: 50%;
margin: 0 0 -120px 0;
}
.demo-1 .sl-slide blockquote {
position: absolute;
width: 100%;
text-align: center;
left: 0;
font-weight: 400;
font-size: 14px;
line-height: 20px;
height: 70px;
color: #8b8b8b;
z-index: 2;
bottom: 50%;
margin: 0 0 -200px 0;
padding: 0;
}
.demo-1 .sl-slide blockquote p {
margin: 0 auto;
width: 60%;
max-width: 400px;
position: relative;
}
.demo-1 .sl-slide blockquote p:before {
color: #f0f0f0;
color: rgba(244, 244, 244, 0.65);
font-family: "Bookman Old Style", Bookman, Garamond, serif;
position: absolute;
line-height: 60px;
width: 75px;
height: 75px;
font-size: 200px;
z-index: -1;
left: -80px;
top: 35px;
content: "\201C";
}
.demo-1 .sl-slide blockquote cite {
font-size: 10px;
padding-top: 10px;
display: inline-block;
font-style: normal;
text-transform: uppercase;
letter-spacing: 4px;
}
/* Custom background colors for slides in first demo */
/* First Slide */
.demo-1 .bg-1 .sl-slide-inner,
.demo-1 .bg-1 .sl-content-slice {
background: #fff;
}
/* Second Slide */
.demo-1 .bg-2 .sl-slide-inner,
.demo-1 .bg-2 .sl-content-slice {
background: #000;
}
.demo-1 .bg-2 [data-icon]:after,
.demo-1 .bg-2 h2 {
color: #fff;
}
.demo-1 .bg-2 blockquote:before {
color: #222;
}
/* Third Slide */
.demo-1 .bg-3 .sl-slide-inner,
.demo-1 .bg-3 .sl-content-slice {
background: #db84ad;
}
.demo-1 .bg-3 .deco {
border-color: #fff;
border-color: rgba(255, 255, 255, 0.5);
}
.demo-1 .bg-3 [data-icon]:after {
color: #fff;
text-shadow: 0 0 1px #fff;
box-shadow: inset 0 0 0 10px #b55381;
}
.demo-1 .bg-3 h2,
.demo-1 .bg-3 blockquote {
color: #fff;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}
.demo-1 .bg-3 blockquote:before {
color: #c46c96;
}
/* Forth Slide */
.demo-1 .bg-4 .sl-slide-inner,
.demo-1 .bg-4 .sl-content-slice {
background: #5bc2ce;
}
.demo-1 .bg-4 .deco {
border-color: #379eaa;
}
.demo-1 .bg-4 [data-icon]:after {
text-shadow: 0 0 1px #277d87;
color: #277d87;
}
.demo-1 .bg-4 h2,
.demo-1 .bg-4 blockquote {
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.demo-1 .bg-4 blockquote:before {
color: #379eaa;
}
/* Fifth Slide */
.demo-1 .bg-5 .sl-slide-inner,
.demo-1 .bg-5 .sl-content-slice {
background: #ffeb41;
}
.demo-1 .bg-5 .deco {
border-color: #ecd82c;
}
.demo-1 .bg-5 .deco:after {
color: #000;
text-shadow: 0 0 1px #000;
}
.demo-1 .bg-5 h2,
.demo-1 .bg-5 blockquote {
color: #000;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.demo-1 .bg-5 blockquote:before {
color: #ecd82c;
}
.demo-2 .bg-img-1 {
background-image: url(../images/1.jpg);
}
.demo-2 .bg-img-2 {
background-image: url(../images/2.jpg);
}
.demo-2 .bg-img-3 {
background-image: url(../images/3.jpg);
}
.demo-2 .bg-img-4 {
background-image: url(../images/4.jpg);
}
.demo-2 .bg-img-5 {
background-image: url(../images/5.jpg);
}
/* Animations for content elements */
.sl-trans-elems .deco {
-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
animation: roll 1s ease-out both, fadeIn 1s ease-out both;
}
.sl-trans-elems h2 {
-webkit-animation: moveUp 1s ease-in-out both;
-moz-animation: moveUp 1s ease-in-out both;
-o-animation: moveUp 1s ease-in-out both;
-ms-animation: moveUp 1s ease-in-out both;
animation: moveUp 1s ease-in-out both;
}
.sl-trans-elems blockquote {
-webkit-animation: fadeIn 0.5s linear 0.5s both;
-moz-animation: fadeIn 0.5s linear 0.5s both;
-o-animation: fadeIn 0.5s linear 0.5s both;
-ms-animation: fadeIn 0.5s linear 0.5s both;
animation: fadeIn 0.5s linear 0.5s both;
}
.sl-trans-back-elems .deco {
-webkit-animation: scaleDown 1s ease-in-out both;
-moz-animation: scaleDown 1s ease-in-out both;
-o-animation: scaleDown 1s ease-in-out both;
-ms-animation: scaleDown 1s ease-in-out both;
animation: scaleDown 1s ease-in-out both;
}
.sl-trans-back-elems h2 {
-webkit-animation: fadeOut 1s ease-in-out both;
-moz-animation: fadeOut 1s ease-in-out both;
-o-animation: fadeOut 1s ease-in-out both;
-ms-animation: fadeOut 1s ease-in-out both;
animation: fadeOut 1s ease-in-out both;
}
.sl-trans-back-elems blockquote {
-webkit-animation: fadeOut 1s linear both;
-moz-animation: fadeOut 1s linear both;
-o-animation: fadeOut 1s linear both;
-ms-animation: fadeOut 1s linear both;
animation: fadeOut 1s linear both;
}
#-webkit-keyframes roll {
0% {
-webkit-transform: translateX(500px) rotate(360deg);
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
}
}
#-moz-keyframes roll {
0% {
-moz-transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
-moz-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#-o-keyframes roll {
0% {
-o-transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
-o-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#-ms-keyframes roll {
0% {
-ms-transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
-ms-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#keyframes roll {
0% {
transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#-webkit-keyframes moveUp {
0% {
-webkit-transform: translateY(40px);
}
100% {
-webkit-transform: translateY(0px);
}
}
#-moz-keyframes moveUp {
0% {
-moz-transform: translateY(40px);
}
100% {
-moz-transform: translateY(0px);
}
}
#-o-keyframes moveUp {
0% {
-o-transform: translateY(40px);
}
100% {
-o-transform: translateY(0px);
}
}
#-ms-keyframes moveUp {
0% {
-ms-transform: translateY(40px);
}
100% {
-ms-transform: translateY(0px);
}
}
#keyframes moveUp {
0% {
transform: translateY(40px);
}
100% {
transform: translateY(0px);
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes scaleDown {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(0.5);
}
}
#-moz-keyframes scaleDown {
0% {
-moz-transform: scale(1);
}
100% {
-moz-transform: scale(0.5);
}
}
#-o-keyframes scaleDown {
0% {
-o-transform: scale(1);
}
100% {
-o-transform: scale(0.5);
}
}
#-ms-keyframes scaleDown {
0% {
-ms-transform: scale(1);
}
100% {
-ms-transform: scale(0.5);
}
}
#keyframes scaleDown {
0% {
transform: scale(1);
}
100% {
transform: scale(0.5);
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-ms-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Media Queries for custom slider */
#media screen and (max-width: 660px) {
.demo-1 .deco {
width: 130px;
height: 130px;
margin-left: -65px;
margin-bottom: 50px;
}
.demo-1 [data-icon]:after {
width: 110px;
height: 110px;
line-height: 110px;
font-size: 40px;
margin: -55px 0 0 -55px;
}
.demo-1 .sl-slide blockquote {
margin-bottom: -120px;
}
.demo-1 .sl-slide h2 {
line-height: 22px;
font-size: 18px;
margin-bottom: -40px;
letter-spacing: 8px;
}
.demo-1 .sl-slide blockquote p:before {
line-height: 10px;
width: 40px;
height: 40px;
font-size: 120px;
left: -45px;
}
.demo-2 .sl-slider-wrapper {
height: 500px;
}
.demo-2 .sl-slider h2 {
font-size: 36px;
}
.demo-2 .sl-slider blockquote {
font-size: 16px;
}
}
/* ---------*/
<div class="main">
<section id="1" style="background-color:#111111; color:#ffffff;">Scroll down</section>
<section id="2" style="background-color:#222222;"> section 2</section>
<section id="3" style="background-color:#333333;"> section 3</section>
<section>
<div class="container demo-1">
<div id="slider" class="sl-slider-wrapper">
<div class="sl-slider">
<section class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="deco" data-icon="H"></div>
<h2>A bene placito</h2>
<blockquote>
<p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="deco" data-icon="q"></div>
<h2>Regula aurea</h2>
<blockquote>
<p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="deco" data-icon="O"></div>
<h2>Dum spiro, spero</h2>
<blockquote>
<p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="deco" data-icon="I"></div>
<h2>Donna nobis pacem</h2>
<blockquote>
<p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="deco" data-icon="t"></div>
<h2>Acta Non Verba</h2>
<blockquote>
<p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite>
</blockquote>
</div>
</section>
</div><!-- /sl-slider -->
<nav id="nav-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>
</div><!-- /slider-wrapper -->
</div>
</section>
<section id="4" style="background-color:#444444;">section 4</section>
<section id="5" style="background-color:#555555;">section 5</section>
<section id="6" style="background-color:#666666;">section 6</section>
</div>
CodePen:https://codepen.io/mitul-patel-the-lessful/pen/eYMWLWL?editors=1111
I linked above my CodePen, if jQuery doesn't work.
Any little help is appreciated!

Disable scroll when you hover to #slider:
function disableScroll(e){
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
}
$('#slider').on('DOMMouseScroll mousewheel', disableScroll);
Then you should create an event to enable scroll when scroll to last slide.
$('#slider').off('DOMMouseScroll mousewheel', disableScroll);

Adding shine animation not working in special cases

I have this function to shine any text element which is passed to it.
The first example here works fine (the second example doesn't work, I provide this in case this can help us find out the issue):
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const prepareCaption = document.querySelector(".prepareCaption");
Shine(prepareCaption);
}, 2500);
.prepare-container {
position: absolute;
overflow: hidden;
display: flex;
align-items: center;
margin: 0 auto;
left: 2.5%;
height: 20vh;
width: 95%;
z-index: 11;
top: 55vh;
padding-top: 10px;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.prepareCaption {
position: relative;
filter: drop-shadow(2px 2px 2px #100021) drop-shadow(1px .05em 1px #0d021a);
text-align: center;
width: 100%;
color: #f8f7fa;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="prepare-container">
<p class="prepareCaption" style="color: rgb(255, 0, 64); font-family: "Open Sans Semibold"; font-size: 28px;">This is shining</p>
</div>
I expect this function work in any satiation but unfortunately we have this second example in which the function acts wired and doesn't work as expected, here it is:
Note: the shine function is identical in both cases. the only difference is the element I pass to the function.
Here we want to shine the expandCaptionSpan id:
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const expandCaption = document.querySelector("#expandCaptionSpan");
Shine(expandCaption);
}, 2500);
.expandCaption {
position: relative;
font-family: "Open Sans Semibold", sans-serif;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 4vw;
color: #ff0000;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
}
.arrow {
color: #ff9900;
font-size: 2vw;
}
.arrow-samll {
color: #ff4646;
font-size: 1.5vw;
}
.left-arrow {
padding-right: 7vw;
transition: 1s ease-in-out;
}
.right-arrow {
padding-left: 7vw;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="expand-caption-container">
<p class="expandCaption"><span class="left-arrow arrow-samll">‹</span>
<span id="expandCaptionSpan">Permafrost</span><span class="right-arrow arrow-samll">›</span></p>
</div>
How can I fix the second example? What am I missing?

It seems that your JS is the same but CSS not. I've found that text-shadow is causing the issue. Just replace it with filter as it's done in your first example and it works. It seems that the issue is caused by render system.
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const expandCaption = document.querySelector("#expandCaptionSpan");
Shine(expandCaption);
}, 2500);
.expandCaption {
position: relative;
font-family: "Open Sans Semibold", sans-serif;
/*text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);*/
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 1));
text-align: center;
width: 100%;
font-size: 4vw;
color: #ff0000;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
}
.arrow {
color: #ff9900;
font-size: 2vw;
}
.arrow-samll {
color: #ff4646;
font-size: 1.5vw;
}
.left-arrow {
padding-right: 7vw;
transition: 1s ease-in-out;
}
.right-arrow {
padding-left: 7vw;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="expand-caption-container">
<p class="expandCaption"><span class="left-arrow arrow-samll">‹</span>
<span id="expandCaptionSpan">Permafrost</span><span class="right-arrow arrow-samll">›</span></p>
</div>

Using waypoints for scroll on animation

Been struggling to replicate a css animation on scroll using waypoints.js
This is the animation: https://codepen.io/equinusocio/pen/KNYOxJ
<h1 class="reveal-text">
I'm here.
</h1>
:root {
--animation-delay: 0;
--duration: 800ms;
--iterations: 1;
}
/* ••·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */
.reveal-text,
.reveal-text::after {
animation-delay: var(--animation-delay, 2s);
animation-iteration-count: var(--iterations, 1);
animation-duration: var(--duration, 800ms);
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.reveal-text {
position: relative;
font-size: 10vw;
animation-name: clip-text;
color: #FFF;
white-space: nowrap;
cursor: default;
&::after {
content: "";
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f2f98b;
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
animation-name: text-revealer;
}
}
#keyframes clip-text {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
#keyframes text-revealer {
0%, 50% {
transform-origin: 0 50%;
}
60%, 100% {
transform-origin: 100% 50%;
}
60% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
Heres my attempt at using it with way points..
.test {
display: flex;
margin: 15px;
margin-top: 5em;
display: flex;
align-self: center;
justify-content: center;
align-content: center;
text-align: center;
opacity: 0;
position: relative;
animation-name: clip-text;
color: $grey;
white-space: nowrap;
cursor: default;
}
.js-dipper-animate {
opacity: 1;
animation-name: text-revealer;
content: "";
z-index: 999;
background-color: $grey;
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
}
Heres a gif of the output: https://imgur.com/waCcprF
As you can see, the animation plays but theres no text. It should show 'test'. After the animation plays I want to be able to see the text, like 'Skills' in the gif shown

working now, solution posted below
`.test,
.test::after {
animation-delay: 0ms;
animation-iteration-count: var(--iterations, 1);
animation-duration: var(--duration, 800ms);
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.test {
display: flex;
margin: 15px;
margin-top: 5em;
display: flex;
align-self: center;
justify-content: center;
align-content: center;
text-align: center;
opacity: 0;
position: relative;
color: $grey;
white-space: nowrap;
cursor: default;
}
.js-dipper-animate {
position: relative;
animation-name: clip-text;
color: $grey;
white-space: nowrap;
cursor: default;
opacity: 1;
&::after {
content: "";
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $grey;
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
animation-name: text-revealer;
opacity: 1;
}
}`

How can I create a single page vertical page turn effect

I want to create a calendar like set of 12 images that appear to flip up when clicked. I know about turn.js but I don't know enough javascript to start from scratch. I do have a programming background and am willing to learn but don't know where to start.
http://pageflip-books.com/index.php#ppp/page/1
is something like what I'm looking for but I want to show the top pages not the bottom ones.
Most of the examples I have found are for books/magazines with two pages side by side.
Thanks for any pointers.

I would look into CSS animations if I were you. An example can be found here: https://codepen.io/ryrocks/pen/zovXWy
HTML
<!-- https://cssdeck.com/labs/pure-css3-page-flip-effect -->
<div id="all">
<div id="page-flip">
<div id="r1">
<div id="p1">
<div>
<div></div>
</div>
</div>
</div>
<div id="p2">
<div></div>
</div>
<div id="r3">
<div id="p3">
<div>
<div></div>
</div>
</div>
</div>
<div class="s">
<div id="s3">
<div id="sp3"></div>
</div>
</div>
<div class="s" id="s4">
<div id="s2">
<div id="sp2"></div>
</div>
</div>
<a id="coke" href="#" title="Pure CSS Coke Can"></a>
<a id="meninas" href="#" title="CSS 3D Meninas"></a>
</div>
</div>
CSS
body {
padding: 0;
margin: 0;
}
#all {
width: 680px;
margin-left: auto;
margin-right: auto;
}
#page-flip {
background-image: url(https://cssdeck.com/uploads/media/items/6/6h4pDpK.jpg);
position: absolute;
padding: 40px 40px 40px 340px;
width: 300px;
height: 400px;
overflow: hidden;
}
#r1 {
position: absolute;
z-index: 2;
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
}
#p1 {
width: 1285px;
height: 1388px;
overflow: hidden;
}
#p1 > div {
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1030px, 500px) rotate(32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
width: 285px;
height: 388px;
background-image: url(https://cssdeck.com/uploads/media/items/8/87WOlJH.jpg);
}
#p1 > div > div {
width: 10px;
height: 388px;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
}
#p2 > div {
width: 285px;
height: 388px;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
position: absolute;
z-index: 1;
background-image: url(https://cssdeck.com/uploads/media/items/4/4FpEEbu.jpg);
}
#r3 {
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
z-index: 2;
}
#s3 {
-webkit-transform-origin: 70px 500px;
-webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
z-index: 1;
}
#page-flip:hover #s3 {
-webkit-transform-origin: 325px 500px;
-webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}
#sp3 {
width: 25px;
height: 1000px;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
overflow: hidden;
}
#page-flip:hover #sp3 { width: 11px }
.s {
width: 285px;
height: 388px;
position: absolute;
overflow: hidden;
z-index: 3;
}
#s2 {
-webkit-transform-origin: 45px 500px;
-webkit-transform: translate(240px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
}
#sp2 {
width: 15px;
height: 1000px;
background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0,0,0,0)));
overflow: hidden;
}
#s4 {
opacity: 1;
-webkit-transition-duration: 0.5s;
}
#page-flip:hover #s4 { opacity: 0 }
#page-flip:hover #s2 {
-webkit-transform-origin: 300px 500px;
-webkit-transform: translate(-15px, -500px) rotate(0deg);
}
#p3 {
width: 1285px;
height: 1388px;
overflow: hidden;
}
#p3 > div {
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1255px, 500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
width: 285px;
height: 388px;
background-image: url(https://cssdeck.com/uploads/media/items/6/6S8oF28.jpg);
overflow: hidden;
}
#p3 > div > div {
width: 9px;
height: 500px;
float: right;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0,0,0,.20)));
}
#page-flip:hover #r1 {
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p1 > div {
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1285px, 500px) rotate(0deg);
}
#page-flip:hover #r3 {
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p3 > div {
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1000px, 500px) rotate(0deg);
}
a {
display: block;
position: absolute;
margin: -20000px 0 0 0;
padding: 1px;
z-index: 3;
-webkit-transition-property: margin;
-webkit-transition-duration: 0.01s;
}
#coke {
width: 253px;
height: 158px;
}
a:hover {
padding: 0;
border: 1px dotted #92C7C1;
}
#page-flip:hover #coke {
-webkit-transition-delay: .8s;
margin: 33px 0 0 14px;
}
#meninas {
width: 253px;
height: 167px;
}
#page-flip:hover #meninas {
-webkit-transition-delay: .8s;
margin: 203px 0 0 14px;
}
In this example hover triggers the page flip, but you can modify that to be triggered by a Javascript click event and to show the page that you prefer when the event occurs.

Javascript altering the absolute position of an html element

I am creating a new site, and as you'll see in the code below I have put two classes (logo & text) above a background fixed position image. I have put them over the top of the image using position absolute with left 50%, top 50% and transform: translate(-50%, -50%); this worked fine with no problems and was responsive the way I had hoped for.
But, as soon as I added my JS code (fade_effect) to the site it moved the position of the two elements (logo & text) slightly. Can someone please help me, have edited the code a number of times and researched it but cannot find a solution. I believe it may have something to do with the JS code section .offset() after what I've read, this seem like the part of the JS code that would be effecting the position of these elements. Please see code below:
HTML:
<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css" />
<body style="height: 2000px; margin: 0; padding: 0;">
<div class="img_slide">
<h1 class="logo fade_effect">Logo Here</h1>
<p class="text fade_effect">Welcome to My Site</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
CSS:
/** Background image code BELOW **/
.img_slide {
height: 800px;
width: 100%;
background-image: linear-gradient(150deg, rgba(68, 0, 139, 0.7), rgba(47, 0, 120, 0.6) 10%, rgba(27, 57, 129, 0.5) 30%, rgba(41, 123, 192, 0.5) 50%, rgba(114, 240, 255, 0.6) 86%, rgba(84, 183, 249, 0.7)), url("http://www.strawberryproofing.co.uk/images/nature_large1.png");
background-repeat: no-repeat;
background-position: 0%, 0%, 50%, 50%;
background-attachment: scroll, fixed;
background-size: auto, cover;
}
/** Background image code ABOVE **/
.logo {
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-size: 60px;
color: white;
padding: 25px;
border: 3px solid white;
/* position absolute - center */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.text {
color: white;
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-size: 25px;
padding: 10px;
/* position absolute - center */
position: absolute;
left: 50%;
top: 70%;
transform: translate(-50%, -50%);
}
/** CSS code called by the JS .addClass **/
.fade_effect {
opacity: 0;
}
.FadeIn {
-webkit-animation: slideIn 0.8s ease 0.3s forwards;
animation: slideIn 0.8s ease 0.3s forwards;
}
#-webkit-keyframes slideIn {
0%{
-webkit-transform: translateY(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
/** CSS code called by the JS .addClass **/
Javascript:
var $fade = $(".fade_effect"); //Calling the class in HTML
$(window).scroll(function () { //Using the scroll global variable
$fade.each(function () {
fadeMiddle = $(this).offset().top + (0.4 *$(this).height());
windowBottom = $(window).scrollTop() + $(window).height();
if (fadeMiddle < windowBottom) {
$(this).addClass("FadeIn");
}
});
});
/* On Load: Trigger Scroll Once*/
$(window).scroll();
This can also be seen online via my CodePen page: https://codepen.io/billyfarroll/pen/qYWYYV

Please see the below code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css" />
<style>
/** Background image code BELOW **/
.img_slide {
height: 800px;
width: 100%;
background-image: linear-gradient(150deg, rgba(68,
0, 139, 0.7), rgba(47, 0, 120, 0.6) 10%, rgba(27, 57, 129, 0.5) 30%, rgba(41, 123, 192, 0.5) 50%, rgba(114, 240, 255, 0.6) 86%, rgba(84, 183, 249, 0.7)), url("http://www.strawberryproofing.co.uk/images/nature_large1.png");
background-repeat: no-repeat;
background-position: 0%, 0%, 50%, 50%;
background-attachment: scroll, fixed;
background-size: auto, cover;
}
/** Background
image code ABOVE **/
.logocontainer {
color: white;
padding: 0 20px;
border: 3px solid white;
position: absolute;
left: 50%;
top: 50%;
}
.logo {
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-size: 60px;
color: white;
padding: 25px;
text-align: center;
}
.text {
color: white;
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-size: 25px;
padding: 10px;
/* position absolute - center */
position: absolute;
left: 50%;
top: 70%;
/* transform: translate(-50%, -50%); */
}
/** CSS
code called by the JS .addClass **/
.fade_effect {
opacity: 0;
}
.FadeIn {
-webkit-animation: slideIn 0.8s ease 0.3s forwards;
animation: slideIn 0.8s ease 0.3s forwards;
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translate(0, 40px);
opacity: 0;
}
100% {
-webkit-transform: translate(-50%, -50%);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translate(0, 40px);
opacity: 0;
}
100% {
-webkit-transform: translate(-50%, -50%);
opacity: 1;
}
}
/** CSS code called by the JS .addClass **/
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style="height: 2000px; margin: 0; padding: 0;">
<div class="img_slide">
<div class="logocontainer fade_effect">
<h1 class="logo">
Logo Here
</h1>
<p class="text fade_effect">
Welcome to My Site
</p>
</div>
</div>
<script>
var $fade = $(".fade_effect");
//Calling the class in HTML
$(window).scroll(function () {
//Using the scroll global variable
$fade.each(function () {
fadeMiddle = $(this).offset().top + (0.4 * $(this).height());
windowBottom = $(window).scrollTop() + $(window).height();
if (fadeMiddle < windowBottom) {
$(this).addClass("FadeIn");
}
}
);
}
);
/* On Load: Trigger Scroll Once*/
$(window).scroll();
</script>
</body>
</html>

If I'm understanding your question correctly, just wrap the logo and text elements in a div, and position it where you want.
<div class="logoContainer">
<h1 class="logo fade_effect">Logo Here</h1>
<p class="text fade_effect">Welcome to My Site</p>
<div>
CSS:
.logoContainer {
color: white;
padding: 0 20px;
border: 3px solid white;
position: absolute;
left: 50%;
top: 50%;
}
.logo {
font-size: 60px;
text-align: center;
}
.text {
font-size: 25px;
}
JSbin if you need it: http://jsbin.com/xerezohabo/edit?output