vertical and horizontal scroll using JavaScript - 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);

Related

how to populate the upper part of a semicircle?

so Im trying to make an interactive button that would be placed on the bottom of my screen and when clicked, a semicircle is created around it. this has buttons inside, so its kind of a navigation menu. Im now struggling with the math behind it. Right now, the buttons are distributed all around the circle, however i want them to only be placed in the upper part of my semicircle. This is the code i have so far:
var items = document.querySelectorAll('.menuItem');
for(var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}
document.querySelector('.center').onclick = function(e) {
e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}
#import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
body {
/* Image source: http://wallbase.cc/wallpaper/718405 */
/* Excuse the base64 mess, imgur blocked the hotlinked image and this seemed like the fastest solution */
background: cornflowerblue url(" data:image/png;base64,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") no-repeat fixed;
background-size: cover;
}
a {
font-size: 14px;
text-decoration: none;
outline: 0;
}
.circle,
.ring {
height: 256px;
position: relative;
width: 256px;
}
.circle {
margin: 0 auto;
}
.ring {
background-color: rgba(0,0,0,0.5);
border-radius: 50%;
opacity: 0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.1) rotate(-270deg);
-moz-transform: scale(0.1) rotate(-270deg);
-transform: scale(0.1) rotate(-270deg);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open .ring {
opacity: 1;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.center {
background-color: rgba(255,255,255,0.3);
border-radius: 50%;
border: 2px solid #ffffff;
bottom: 0;
color: white;
height: 80px;
left: 0;
line-height: 80px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 80px;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open .center {
border-color: #aaaaaa;
}
.menuItem {
border-radius: 50%;
color: #eeeeee;
display: block;
height: 40px;
line-height: 40px;
margin-left: -20px;
margin-top: -20px;
position: absolute;
text-align: center;
width: 40px;
}
<div class="circle">
<div class="ring">
</div>
</div>
the end would look something like this
button mockup
Both the top and left calculations need adjusting so there isn't so much movement:
var items = document.querySelectorAll('.menuItem');
for (var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35 * Math.cos(-0.125 * Math.PI - (1 / l) * i * Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35 * Math.sin(-0.125 * Math.PI - (1 / l) * i * Math.PI)).toFixed(4) + "%";
}
document.querySelector('.center').onclick = function(e) {
e.preventDefault();
document.querySelector('.circle').classList.toggle('open');
}
#import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
body {
/* Image source: http://wallbase.cc/wallpaper/718405 */
/* Excuse the base64 mess, imgur blocked the hotlinked image and this seemed like the fastest solution */
background: cornflowerblue url(" data:image/png;base64,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") no-repeat fixed;
background-size: cover;
}
a {
font-size: 14px;
text-decoration: none;
outline: 0;
}
.circle,
.ring {
height: 256px;
position: relative;
width: 256px;
}
.circle {
margin: 0 auto;
}
.ring {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
opacity: 0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.1) rotate(-270deg);
-moz-transform: scale(0.1) rotate(-270deg);
transform: scale(0.1) rotate(-270deg);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
position: relative;
}
.open .ring {
opacity: 1;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.center {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
border: 2px solid #ffffff;
bottom: 0;
color: white;
height: 80px;
left: 0;
line-height: 80px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 80px;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open .center {
border-color: #aaaaaa;
}
.menuItem {
border-radius: 50%;
color: #eeeeee;
display: block;
height: 40px;
line-height: 40px;
margin-left: -20px;
margin-top: -20px;
position: absolute;
text-align: center;
width: 40px;
}
<div class="circle">
<div class="ring">
</div>
</div>

Animation not working despite the class is added

I want to add my beating animation only to the text between arrows (arrows shouldn't have beating).
But unfortunately I'm unable to find the reason why the animation is not working (the heart class which contains the animation is added to the container of text but no animation is visible).
How can I fix this?
setTimeout(() => prepareLabelShow("This is the caption"), 2500);
const prepareLabel = document.querySelector(".prepareLabel");
function prepareLabelShow(text, state) {
function startBeating() {
const prepareLabelGroup = document.getElementById("prepare-label-group");
prepareLabelGroup.classList.add("heart");
}
prepareLabel.innerHTML = `<span class="right-arrow arrow">‹</span><div style="display:inline" id="prepare-label-group">${text}</div><span class="left-arrow arrow">›</span>`;
startBeating();
prepareLabel.classList.add("prepareLabelShow");
prepareLabel.classList.remove("prepareLabelHide");
} // end of prepareLabelShow function
.prepare-label-container {
position: absolute;
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
top: 68.5vh;
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
/*outline: 0.1vw dashed orange;*/
}
.prepareLabel {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
color: #f8f7fa;
opacity: 0;
margin: 0 auto;
}
.prepareLabelShow {
animation: prepareLabelAnimeShow 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
#-webkit-keyframes prepareLabelAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
.heart {
animation: beat .5s infinite alternate;
}
#keyframes beat {
0% { opacity:1; transform: scale(1); }
100% { opacity:1; transform: scale(0.8); }
}
.arrow {
/*color: #e9e1f2;
font-size: 1.2vw;*/
color: #ff9900;
font-size: 1.3vw;
}
.left-arrow {
padding-right: 7vw;
transition: 1s ease-in-out;
}
.right-arrow {
padding-left: 7vw;
}
<div class ="prepare-label-container">
<p class="prepareLabel"></p>
</div>
I did not simplified the code in purpose.
The desired result is to see the beating animation in the text inside two arrows.

Trying to stop CSS animation at full

Goal: finished product as picture attached with only the bubbles rising inside the glass.
Hey, I am working on this CSS /JS code and I need the final version of filled glass only with bubbles and foam on top (ignoring all the delays and fillings in animations). I tried but somehow unsuccessful, any suggestions where to edit the code? thanks
$(document).ready(function() {
$('.pour')
.delay(2000)
.animate({
height: '360px'
}, 1500)
.delay(1600)
.slideUp(500);
$('#liquid')
.delay(3400)
.animate({
height: '170px'
}, 2500);
$('.beer-foam')
.delay(3400)
.animate({
bottom: '200px'
}, 2500);
});
body { background-color: #0065bd }
h2 {
margin: 0 auto;
width: 400px;
font-size: 36px;
text-align: center;
font-family: 'Lato', Arial, sans-serif;
color: whiteSmoke;
}
#container {
height: 370px;
margin: 0 auto;
overflow: hidden;
position: relative;
top: -20px;
width: 248px;
}
#container div { position: absolute; }
.pour {
position: absolute;
left: 45%;
width: 20px;
height: 0px;
background-color: #0065bd;
border-radius: 10px
}
#beaker {
border: 10px solid #FFF;
border-top: 0;
border-radius: 0 0 30px 30px;
height: 200px;
left: 14px;
bottom: 0;
width: 200px;
}
#beaker:before,
#beaker:after {
border: 00px solid #FFF;
border-bottom: 0;
border-radius: 30px 30px 0 0;
content: '';
height: 30px;
position: absolute;
top: -40px;
width: 30px;
}
#beaker:before { left: -50px; }
#beaker:after { right: -50px; }
#liquid {
background-color: #0065bd;
border: 10px solid #0065bd;
border-radius: 0 0 20px 20px;
bottom: 0;
height: 0px;
overflow: hidden;
width: 180px;
}
#liquid:after {
background-color: rgba(255, 255, 255, 0.25);
bottom: -10px;
content: '';
height: 200px;
left: -40px;
position: absolute;
transform: rotate(30deg);
-webkit-transform: rotate(15deg);
width: 110px;
}
#liquid .bubble {
-webkit-animation-name: bubble;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
background-color: rgba(255, 255, 255, 0.2);
bottom: 0;
border-radius: 10px;
height: 20px;
width: 20px;
}
#-webkit-keyframes bubble {
0% { bottom: 0; }
50% {
background-color: rgba(255, 255, 255, 0.2);
bottom: 80px;
}
100% {
background-color: rgba(255, 255, 255, 0);
bottom: 160px;
}
}
.bubble1 {
left: 10px;
-webkit-animation-delay: 1000ms;
-webkit-animation-duration: 1000ms;
}
.bubble2 {
left: 50px;
-webkit-animation-delay: 700ms;
-webkit-animation-duration: 1100ms;
}
.bubble3 {
left: 100px;
-webkit-animation-delay: 1200ms;
-webkit-animation-duration: 1300ms;
}
.bubble4 {
left: 130px;
-webkit-animation-delay: 1100ms;
-webkit-animation-duration: 700ms;
}
.bubble5 {
left: 170px;
-webkit-animation-delay: 1300ms;
-webkit-animation-duration: 800ms;
}
/* Foam */
.beer-foam {
position: absolute;
bottom: 10px;
}
.foam-1, .foam-2, .foam-3, .foam-4,
.foam-5, .foam-6, .foam-7 {
float: left;
position: absolute;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 30px;
background-color: #fefefe;
}
.foam-1 {
top: -30px;
left: -10px;
}
.foam-2 {
top: -35px;
left: 20px;
}
.foam-3 {
top: -25px;
left: 50px;
}
.foam-4 {
top: -35px;
left: 80px;
}
.foam-5 {
top: -30px;
left: 110px;
}
.foam-6 {
top: -20px;
left: 140px;
}
.foam-7 {
top: -30px;
left: 160px;
}
/* Drunk Text */
#-moz-keyframes drunk {
0% {
-moz-transform: rotate(0);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
20%, 60% {
-moz-transform: rotate(80deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
40% {
-moz-transform: rotate(60deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
80% {
-moz-transform: rotate(60deg) translateY(0); opacity: 1;
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
100% {
-moz-transform: translateY(700px);
opacity: 0;
}
}
#keyframes drunk {
0% {
transform: rotate(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%, 60% {
transform: rotate(80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(60deg) translateY(0);
opacity: 1; transform-origin: top left;
animation-timing-function: ease-in-out;
}
100% {
transform: translateY(700px);
opacity: 0;
}
}
.drunk {
-webkit-animation-name: drunk;
-moz-animation-name: drunk;
animation-name: drunk;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="pour"></div>
<div id="beaker">
<div class="beer-foam">
<div class="foam-1"></div>
<div class="foam-2"></div>
<div class="foam-3"></div>
<div class="foam-4"></div>
<div class="foam-5"></div>
<div class="foam-6"></div>
<div class="foam-7"></div>
</div>
<div id="liquid">
<div class="bubble bubble1"></div>
<div class="bubble bubble2"></div>
<div class="bubble bubble3"></div>
<div class="bubble bubble4"></div>
<div class="bubble bubble5"></div>
</div>
</div>
</div>
<h2 class="animated drunk">Please Wait! While you are entered in Game</h2>
Filling the glass instantly, but bubbles moving
To instantly fill the glass, you can remove the delay:
$(document).ready(function() {
/*Look here*/
$('.pour')
.css({
height: '360px'
})
.delay(0)
.slideUp(500);
$('#liquid')
.css({
height: '170px'
});
$('.beer-foam')
.css({
bottom: '200px'
});
});
body { background-color: #0065bd }
h2 {
margin: 0 auto;
width: 400px;
font-size: 36px;
text-align: center;
font-family: 'Lato', Arial, sans-serif;
color: whiteSmoke;
}
#container {
height: 370px;
margin: 0 auto;
overflow: hidden;
position: relative;
top: -20px;
width: 248px;
}
#container div { position: absolute; }
.pour {
position: absolute;
left: 45%;
width: 20px;
height: 0px;
background-color: #0065bd;
border-radius: 10px
}
#beaker {
border: 10px solid #FFF;
border-top: 0;
border-radius: 0 0 30px 30px;
height: 200px;
left: 14px;
bottom: 0;
width: 200px;
}
#beaker:before,
#beaker:after {
border: 00px solid #FFF;
border-bottom: 0;
border-radius: 30px 30px 0 0;
content: '';
height: 30px;
position: absolute;
top: -40px;
width: 30px;
}
#beaker:before { left: -50px; }
#beaker:after { right: -50px; }
#liquid {
background-color: #0065bd;
border: 10px solid #0065bd;
border-radius: 0 0 20px 20px;
bottom: 0;
height: 0px;
overflow: hidden;
width: 180px;
}
#liquid:after {
background-color: rgba(255, 255, 255, 0.25);
bottom: -10px;
content: '';
height: 200px;
left: -40px;
position: absolute;
transform: rotate(30deg);
-webkit-transform: rotate(15deg);
width: 110px;
}
#liquid .bubble {
-webkit-animation-name: bubble;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
background-color: rgba(255, 255, 255, 0.2);
bottom: 0;
border-radius: 10px;
height: 20px;
width: 20px;
}
#-webkit-keyframes bubble {
0% { bottom: 0; }
50% {
background-color: rgba(255, 255, 255, 0.2);
bottom: 80px;
}
100% {
background-color: rgba(255, 255, 255, 0);
bottom: 160px;
}
}
.bubble1 {
left: 10px;
-webkit-animation-delay: 1000ms;
-webkit-animation-duration: 1000ms;
}
.bubble2 {
left: 50px;
-webkit-animation-delay: 700ms;
-webkit-animation-duration: 1100ms;
}
.bubble3 {
left: 100px;
-webkit-animation-delay: 1200ms;
-webkit-animation-duration: 1300ms;
}
.bubble4 {
left: 130px;
-webkit-animation-delay: 1100ms;
-webkit-animation-duration: 700ms;
}
.bubble5 {
left: 170px;
-webkit-animation-delay: 1300ms;
-webkit-animation-duration: 800ms;
}
/* Foam */
.beer-foam {
position: absolute;
bottom: 10px;
}
.foam-1, .foam-2, .foam-3, .foam-4,
.foam-5, .foam-6, .foam-7 {
float: left;
position: absolute;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 30px;
background-color: #fefefe;
}
.foam-1 {
top: -30px;
left: -10px;
}
.foam-2 {
top: -35px;
left: 20px;
}
.foam-3 {
top: -25px;
left: 50px;
}
.foam-4 {
top: -35px;
left: 80px;
}
.foam-5 {
top: -30px;
left: 110px;
}
.foam-6 {
top: -20px;
left: 140px;
}
.foam-7 {
top: -30px;
left: 160px;
}
/* Drunk Text */
#-moz-keyframes drunk {
0% {
-moz-transform: rotate(0);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
20%, 60% {
-moz-transform: rotate(80deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
40% {
-moz-transform: rotate(60deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
80% {
-moz-transform: rotate(60deg) translateY(0); opacity: 1;
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
100% {
-moz-transform: translateY(700px);
opacity: 0;
}
}
#keyframes drunk {
0% {
transform: rotate(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%, 60% {
transform: rotate(80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(60deg) translateY(0);
opacity: 1; transform-origin: top left;
animation-timing-function: ease-in-out;
}
100% {
tran
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="pour"></div>
<div id="beaker">
<div class="beer-foam">
<div class="foam-1"></div>
<div class="foam-2"></div>
<div class="foam-3"></div>
<div class="foam-4"></div>
<div class="foam-5"></div>
<div class="foam-6"></div>
<div class="foam-7"></div>
</div>
<div id="liquid">
<div class="bubble bubble1"></div>
<div class="bubble bubble2"></div>
<div class="bubble bubble3"></div>
<div class="bubble bubble4"></div>
<div class="bubble bubble5"></div>
</div>
</div>
</div>
<h2 class="animated drunk">Please Wait! While you are entered in Game</h2>
Pausing the bubbles
To pause the bubbles, you can use the animation-play-state: paused; property. This particular way would pause your bubbles after 5.7 seconds:
$(document).ready(function() {
/*Look here*/
setTimeout( () => {
$('.bubble').css("animation-play-state", "paused");
}, 5700)
$('.pour')
.delay(2000)
.animate({
height: '360px'
}, 1500)
.delay(1600)
.slideUp(500);
$('#liquid')
.delay(3400)
.animate({
height: '170px'
}, 2500);
$('.beer-foam')
.delay(3400)
.animate({
bottom: '200px'
}, 2500);
});
body { background-color: #0065bd }
h2 {
margin: 0 auto;
width: 400px;
font-size: 36px;
text-align: center;
font-family: 'Lato', Arial, sans-serif;
color: whiteSmoke;
}
#container {
height: 370px;
margin: 0 auto;
overflow: hidden;
position: relative;
top: -20px;
width: 248px;
}
#container div { position: absolute; }
.pour {
position: absolute;
left: 45%;
width: 20px;
height: 0px;
background-color: #0065bd;
border-radius: 10px
}
#beaker {
border: 10px solid #FFF;
border-top: 0;
border-radius: 0 0 30px 30px;
height: 200px;
left: 14px;
bottom: 0;
width: 200px;
}
#beaker:before,
#beaker:after {
border: 00px solid #FFF;
border-bottom: 0;
border-radius: 30px 30px 0 0;
content: '';
height: 30px;
position: absolute;
top: -40px;
width: 30px;
}
#beaker:before { left: -50px; }
#beaker:after { right: -50px; }
#liquid {
background-color: #0065bd;
border: 10px solid #0065bd;
border-radius: 0 0 20px 20px;
bottom: 0;
height: 0px;
overflow: hidden;
width: 180px;
}
#liquid:after {
background-color: rgba(255, 255, 255, 0.25);
bottom: -10px;
content: '';
height: 200px;
left: -40px;
position: absolute;
transform: rotate(30deg);
-webkit-transform: rotate(15deg);
width: 110px;
}
#liquid .bubble {
-webkit-animation-name: bubble;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
background-color: rgba(255, 255, 255, 0.2);
bottom: 0;
border-radius: 10px;
height: 20px;
width: 20px;
}
#-webkit-keyframes bubble {
0% { bottom: 0; }
50% {
background-color: rgba(255, 255, 255, 0.2);
bottom: 80px;
}
100% {
background-color: rgba(255, 255, 255, 0);
bottom: 160px;
}
}
.bubble1 {
left: 10px;
-webkit-animation-delay: 1000ms;
-webkit-animation-duration: 1000ms;
}
.bubble2 {
left: 50px;
-webkit-animation-delay: 700ms;
-webkit-animation-duration: 1100ms;
}
.bubble3 {
left: 100px;
-webkit-animation-delay: 1200ms;
-webkit-animation-duration: 1300ms;
}
.bubble4 {
left: 130px;
-webkit-animation-delay: 1100ms;
-webkit-animation-duration: 700ms;
}
.bubble5 {
left: 170px;
-webkit-animation-delay: 1300ms;
-webkit-animation-duration: 800ms;
}
/* Foam */
.beer-foam {
position: absolute;
bottom: 10px;
}
.foam-1, .foam-2, .foam-3, .foam-4,
.foam-5, .foam-6, .foam-7 {
float: left;
position: absolute;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 30px;
background-color: #fefefe;
}
.foam-1 {
top: -30px;
left: -10px;
}
.foam-2 {
top: -35px;
left: 20px;
}
.foam-3 {
top: -25px;
left: 50px;
}
.foam-4 {
top: -35px;
left: 80px;
}
.foam-5 {
top: -30px;
left: 110px;
}
.foam-6 {
top: -20px;
left: 140px;
}
.foam-7 {
top: -30px;
left: 160px;
}
/* Drunk Text */
#-moz-keyframes drunk {
0% {
-moz-transform: rotate(0);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
20%, 60% {
-moz-transform: rotate(80deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
40% {
-moz-transform: rotate(60deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
80% {
-moz-transform: rotate(60deg) translateY(0); opacity: 1;
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
100% {
-moz-transform: translateY(700px);
opacity: 0;
}
}
#keyframes drunk {
0% {
transform: rotate(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%, 60% {
transform: rotate(80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(60deg) translateY(0);
opacity: 1; transform-origin: top left;
animation-timing-function: ease-in-out;
}
100% {
tran
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="pour"></div>
<div id="beaker">
<div class="beer-foam">
<div class="foam-1"></div>
<div class="foam-2"></div>
<div class="foam-3"></div>
<div class="foam-4"></div>
<div class="foam-5"></div>
<div class="foam-6"></div>
<div class="foam-7"></div>
</div>
<div id="liquid">
<div class="bubble bubble1"></div>
<div class="bubble bubble2"></div>
<div class="bubble bubble3"></div>
<div class="bubble bubble4"></div>
<div class="bubble bubble5"></div>
</div>
</div>
</div>
<h2 class="animated drunk">Please Wait! While you are entered in Game</h2>
If you setthe timeout to 5700, you'll end up with something like this, which is pretty close to your image.
Stopping the bubbles (previous solution)
You could also fiddle with the iteration count and visibility of your bubbles, to kill them after some time, maybe like so:
#liquid .bubble {
visibility: hidden; /*Look here*/
-webkit-animation-name: bubble;
-webkit-animation-iteration-count: 3; /*Look here*/
-webkit-animation-timing-function: linear;
background-color: rgba(255, 255, 255, 0.2);
bottom: 0;
border-radius: 10px;
height: 20px;
width: 20px;
}
#-webkit-keyframes bubble {
0% { visibility: visible; /*Look here*/
bottom: 0; }
50% {
background-color: rgba(255, 255, 255, 0.2);
bottom: 80px;
}
100% {
background-color: rgba(255, 255, 255, 0);
bottom: 160px;
}
}
The numbers depend on the exact effect you'll want, but this would be the way I'd do it. This particular set would send some bubbles and then end the bubbling.

How to get an Arrow shape on the below provided JS filddle circular progress bar

I m trying to get an Arrow shape for the below code of circular progress bar. But it seems impossible for me so far, hence my limited experience in CSS and styling.
Please help or guide me how do I get an Arrow shape at the end of the circular progress bar.
The present circular progress bar looks like this:
How I want it..
Please find the given JSfiddle link
https://jsfiddle.net/jh1s7raq/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
.progress{
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right{
right: 0;
}
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
width: 90%;
height: 90%;
border-radius: 50%;
background: white;
font-size: 20px;
color: #012C52;
line-height: 100px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar{
border-color: #012C52;
}
.progress.blue .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar{
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar{
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px){
.progress{ margin-bottom: 20px; }
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue" style="margin-top:50px;">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
</div>
</div>
Please let me know if I m not clear on my question... Thanks
You have to add markup in your html for arrow element like
<span class="arrow"></span>
And then add css for it
.progress>span.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
animation: rotate 3.3s linear forwards;
}
.progress>span.arrow:after {
content: "";
border-width: 16px;
border-style: solid;
border-color: transparent transparent transparent #ff0000;
position: absolute;
left: 50px;
top: -8px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(324deg)
}
}
Check working example below. let me know if you have any doubts on it
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
.progress {
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress>span:not(.arrow) {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress>span.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
animation: rotate 3.3s linear forwards;
}
.progress>span.arrow:after {
content: "";
border-width: 16px;
border-style: solid;
border-color: transparent transparent transparent #ff0000;
position: absolute;
left: 50px;
top: -8px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(324deg)
}
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value {
width: 90%;
height: 90%;
border-radius: 50%;
background: white;
font-size: 20px;
color: #012C52;
line-height: 100px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar {
border-color: #012C52;
}
.progress.blue .progress-left .progress-bar {
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar {
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar {
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar {
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar {
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar {
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar {
animation: loading-5 1.2s linear forwards 1.8s;
}
#keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px) {
.progress {
margin-bottom: 20px;
}
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue" style="margin:50px;">
<span class="arrow"></span>
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
</div>
</div>
Fiddle link: https://jsfiddle.net/jh1s7raq/1/

Getting Data-ID "Undefined"

I used floatingMenu
and I want get ID numbers with Data-id but I can not get the ID number of the buttons
Output:
example.com/?id=undefined
Why am I getting this error?
var myDiv = document.querySelector('.designer-actions');
$.floatingMenu({
selector: '.designer-actions a[data-action="show-actions-menu"]',
items: [{
title: 'Open',
action: 'https://example.com/?id=' + myDiv.dataset.idNo
}, ]
});
ul.floating-menu {
position: absolute;
background-color: #000;
border-radius: 4px
}
ul.floating-menu[data-fm-floated="top"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: -9px;
left: 50%;
margin-left: -9px;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 9px solid #000
}
ul.floating-menu[data-fm-floated="left"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 50%;
margin-bottom: -9px;
right: -9px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #000
}
ul.floating-menu[data-fm-floated="right"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 50%;
margin-bottom: -9px;
left: -9px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid #000
}
ul.floating-menu[data-fm-floated="bottom"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -9px;
left: 50%;
margin-left: -9px;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #000
}
ul.floating-menu li {
position: relative;
float: left;
height: 100%
}
ul.floating-menu li a {
position: relative;
float: left;
color: #fff;
font-size: 13px;
padding: 4px 12px;
text-decoration: none;
line-height: 32px
}
ul.floating-menu li .fm-icon {
position: relative;
float: left;
margin-right: 8px;
font-size: 24px;
line-height: 32px;
color: #fff
}
ul.floating-menu.animated {
animation-duration: 0.2s;
-webkit-animation-duration: 0.2s;
-ms-animation-duration: 0.2s;
-moz-animation-duration: 0.2s;
-o-animation-duration: 0.2s
}
ul.floating-menu.visible-transit {
-o-transition: .2s;
-ms-transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
transition: .2s
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="left"].fadeInPosition {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft
}
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="right"].fadeInPosition {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight
}
#-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="top"].fadeInPosition {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown
}
#-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="bottom"].fadeInPosition {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://test3.moverals.com/mdm/floating-menu.js"></script>
<div id='designer-actions' class='designer-actions'>
<a class='icon ion-ios-more' data-idNo='1' href='javascript:void(null);' data-action='show-actions-menu' data-fm-floatTo='right'>Button1</a>
<a class='icon ion-ios-more' data-idNo='2' href='javascript:void(null);' data-action='show-actions-menu' data-fm-floatTo='right'>Button2</a>
</div>
JSFiddle
Updated answer:
You need to loop through the array:
$('.designer-actions a').each(function(){
idNo = $(this).data('idno');
$.floatingMenu({
selector: '.designer-actions a[data-action="show-actions-menu"]',
items: [{
title: 'Open',
action: 'https://example.com/?id=' + idNo
}, ]
});
});

Categories