I'm working on a Roulette site, i just can't get the roulette animation to work.
I have an image for the roulette but i need the image to disappear after a certain amount of % and that the image loops around to the left.
This is how it kind of needs to look like (it doesn't end at the end of the border, and doesn't loop around to the left thought.):
$("#right").click(function () {
$("#one").css("left", "200px");
$("#two").css("left", "200px");
$("#three").css("left", "200px");
$("#four").css("left", "200px");
$("#five").css("left", "200px");
$("#six").css("left", "200px");
});
$("#left").click(function () {
$("#one").css("left", "0px");
});
section {
width: 80%;
height: 50px;
border: 5px solid black;
margin: auto;
padding: 7px;
z-index: 1;
transition: left 2s ease;
}
div#one {
width: 15%;
height: 50px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#six {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#five {
width: 15%;
height: 50px;
background: black;
float: left;
margin-left: 5px;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#two {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#three {
width: 15%;
height: 50px;
margin-left: 5px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#four {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
</section>
<button id="right">
left: 100px;
</button>
And this is what i want it to look like, but the border has to end near the end of the screen, and the image has to be invisible outside the border, and loop around:
div.numbers {
display: inline-flex;
border: 4px solid gray;
}
div.numbers img {
margin-right: 5px;
}
<section>
<div class="numbers">
<img src="https://image.ibb.co/jrnaVG/cases.png">
<img src="https://image.ibb.co/jrnaVG/cases.png">
<img src="https://image.ibb.co/jrnaVG/cases.png">
</div>
</section>
so once i click on a button it should do the transition left 500px, and loop the image around to the left so the image keeps going to the right until the image is 500px further, and it should be invisible outside the border.
Thanks alot for the help!
You're really close to hiding the scrolled content. You just need to hide the overflow in section with overflow: hidden;
$("#right").click(function() {
$("#one").css("left", "200px");
$("#two").css("left", "200px");
$("#three").css("left", "200px");
$("#four").css("left", "200px");
$("#five").css("left", "200px");
$("#six").css("left", "200px");
});
$("#left").click(function() {
$("#one").css("left", "0px");
});
section {
width: 80%;
height: 50px;
border: 5px solid black;
margin: auto;
padding: 7px;
z-index: 1;
transition: left 2s ease;
overflow: hidden;
}
div#one {
width: 15%;
height: 50px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#six {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#five {
width: 15%;
height: 50px;
background: black;
float: left;
margin-left: 5px;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#two {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#three {
width: 15%;
height: 50px;
margin-left: 5px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#four {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
</section>
<button id="right">
left: 100px;
</button>
The parent element needs { overflow-y: hidden; } in your css code
Related
my english is not very good, i hope i can explain what i want to say
I want to fit my toggle icon inside div. I couldn't do it, can you show me how to do it?
I want it to be shaped according to the size of the div. when the div shrinks, the toggle menu should also shrink
I want to make the image in the top image like the bottom image
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.btn5 .icon {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 50px;
background-color: white;
}
.btn5 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: -20px;
}
.btn5 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: 20px;
}
.btn5.open .icon {
transition: 0.5s;
}
.btn5.open .icon:before {
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
.btn5.open .icon:after {
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
}
.btn5:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon"></div>
</div>
</div>
Thank you in advance for your help :)
This snippet will get you closer to your second image. I changed up the structure a bit and just used a couple spans and positioned them absolute. You can tinker with the animation to your hearts content.
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
display:flex;
align-items: center;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.icon {
width:150px;
height:150px;
position: relative;
}
.btn5 .bar {
transition-duration: 0.5s;
position: relative;
height: 8px;
width: 100%;
height: 20px;
display: block;
background-color: white;
}
.bar:nth-of-type(1) {
position: absolute;
top: 0;
left: 0;
}
.bar:nth-of-type(2) {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.bar:nth-of-type(3) {
position: absolute;
bottom: 0;
left: 0;
}
.menu.open .bar:nth-of-type(1) {
transform: rotate(-45deg);
top: 10px;
left: -16px;
}
.menu.open .bar:nth-of-type(3) {
transform: rotate(45deg);
bottom: 10px;
left: -16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
I want the inner circle to stay within the outer circle when moving it. The inner circle should still be animated though. I tried to use overflow: hidden, but that didn't work. It would be great if anyone could give me advice. Thank you in advance!
$(document).mousemove(function( event ) {
$(".cursor-circle, .cursor-inner-wrap").css({
"top": (event.pageY - 65) + "px",
"left": (event.pageX - 65) + "px"
});
});
body {
background: rgb(20,20,20);
}
.cursor-circle{
border: 1px solid white;
border-radius: 100%;
width: 120px;
height: 120px;
overflow: hidden;
position: absolute;
transition-duration: 200ms;
transition-timing-function: ease-out;
}
.cursor-wrap{
width: 120px;
height: 120px;
position: absolute;
}
.cursor-inner-wrap{
width: 120px;
height: 120px;
position: absolute;
display: flex;
align-items: center;
}
.cursor-inner {
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #fff;
}
.cursor-inner{
width: 20px;
height: 20px;
background: white;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
border-radius: 100%;
transition-duration: 199ms;
transition-timing-function: ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor-wrap">
<div class="cursor-circle"></div>
<div class="cursor-inner-wrap">
<div class="cursor-inner"></div>
</div>
</div>
Since the .cursor-circle has a transition, and the .cursor-inner-wrap is not. All changes effect the .cursor-inner-wrap immediately, while the circle takes time to reach the same place. Move the transition from .cursor-inner to .cursor-inner-wrap, and set the the duration of the transition to be slightly less of that of the circle:
$(document).mousemove(function(event) {
$(".cursor-circle, .cursor-inner-wrap").css({
"top": (event.pageY - 65) + "px",
"left": (event.pageX - 65) + "px"
});
});
body {
background: rgb(20, 20, 20);
}
.cursor-circle {
border: 1px solid white;
border-radius: 100%;
width: 120px;
height: 120px;
position: absolute;
transition: 200ms ease-out;
}
.cursor-inner-wrap {
display: flex;
width: 120px;
height: 120px;
position: absolute;
align-items: center;
justify-content: center;
transition: 140ms ease-out;
}
.cursor-inner {
z-index: 2;
width: 20px;
height: 20px;
border-radius: 100%;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor-wrap">
<div class="cursor-circle"></div>
<div class="cursor-inner-wrap">
<div class="cursor-inner"></div>
</div>
</div>
I've a form I'm creating, and I'll have some sections that will apear from right to left, on top of that and fixed is a bar, that should increase in width each time I click on continue to go to the next question. that way user will know he's progressing. I can't make work my progress bar, can you help me figure out why?
HTML
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
<div class="questionsContainer">
<div class="section one">
<p class="sectionTitle">This is the First Question?</p>
<div class="buttonContinue" id="section2">CONTINUE</div>
</div>
<div class="section two">
<p class="sectionTitle">Aja! time for the Second one!!</p>
<div class="buttonContinue" id="section3">CONTINUE</div>
</div>
<div class="section three">
<p class="sectionTitle">Another Question? 3 so far?</p>
<div class="buttonContinue" id="section4">CONTINUE</div>
</div>
</div>
CSS
body {
margin: 0 auto;
transition: all 0.2s ease;
}
.progress-container {
width: 100%;
height: 4px;
background: transparent!important;
position: fixed;
top: 0;
z-index: 99;
}
.progress-bar {
height: 4px;
background: #4ce4ff;
width: 10%;
}
header {
width: 100%;
height: 150px;
position: relative;
background-color: fuchsia;
}
.questionsContainer {
width: 100%;
height: calc(100% - 200px);
position: absolute;
background-color: lime;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer {
width: 100%;
height: 50px;
position: fixed;
bottom: 0;
background-color: black;
}
.section {
background-color: purple;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.one {
position: absolute;
right: auto;
transition: all 0.2s ease;
}
.two {
position: absolute;
right: -100%;
transition: all 0.2s ease;
}
.three {
position: absolute;
right: -100%;
transition: all 0.2s ease;
}
.sectionTitle {
font-family: 'Montserrat', sans-serif;
color: white;
font-size: 30px;
margin: 0 auto;
}
.buttonContinue {
font-family: 'Montserrat', sans-serif;
color: white;
font-size: 16px;
padding: 10px 20px;
background-color: red;
border-radius: 5px;
margin: 20px 0px;
text-align: center;
cursor: pointer;
width: 100px;
}
JAVASCRIPT
<script type="text/javascript">
document.getElementById('section2').onclick = function(){
$('.one').css('right','100%');
$('.two').css('right','auto');
}
document.getElementById('section3').onclick = function(){
$('.two').css('right','100%');
$('.three').css('right','auto');
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#section2").click(addVisit);
$("#section3").click(addVisit);
$("#section4").click(addVisit);
});
function addVisit(){
var progressTag = $('#myBar');
count ++;
progressTag.css('width', count * 10 + "%");
});
</script>
Your main issue is that the count variable has not been created and given a value initially.
I have optimized your code a bit and this is how I did it:
var count = 1;
$(document).ready(function() {
$("#section2, #section3, #section4").click(function() {
$('#myBar').css('width', ++count * 10 + "%");
});
});
I also added transition: all 1s; for animated CSS transition.
Here is your updated code in JSFiddle
I was wondering if someone would be willing to help me translate this pen I created into plain ol' JavaScript. I'm just learning JavaScript and would like to see what this same effect looks like in pure JavaScript instead of jQuery. Here is the jQuery:
$(document).scroll(function(){
var y = $(this).scrollTop();
if (y > 500 ){
$(".arrow-box").addClass("slide");
}
else{
$(".arrow-box").removeClass("slide");
}
});
See Pen Here.
let arrow = document.querySelector('.arrow-box');
document.addEventListener('scroll', () => {
if (window.scrollY > 500)
return arrow.classList.add('slide');
arrow.classList.remove('slide');
});
.wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 100px;
background-color: gray;
position: relative;
}
.container {
margin: 0 auto;
height: 500px;
width: 1200px;
background-color: lightblue;
margin-bottom: 100px;
}
img {
width: 50px;
height: auto;
}
.arrow_container {
left: 0;
right: 0;
bottom: 0px;
margin-left: auto;
margin-right: auto;
position: fixed;
height: auto;
height: 100px;
width: 100%;
max-width: 1400px;
background-color: #2d2d2d;
overflow: hidden;
}
.arrow-box {
transform: translateX(100%);
transition: transform: .3s ease-in-out;
-webkit-transition: -webkit-transform .3s ease-in-out;
position: absolute;
right: 0px;
padding: 25px;
height: 100px;
background-color: red;
}
.slide {
transform: translateX(0%);
}
<div class="wrapper">
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
<div class="arrow_container">
<div class="arrow-box">
<img src="http://cdns2.freepik.com/media/img/subscription_modal/rocket.svg" />
</div>
</div>
Hi I'm looking for some resources to create the implied, sliding functionality seen in the mock up below (never mind the half faded elements)
*Note: this isn't exactly what my code looks like yet, it's just the mock up.
I have been able to move the elements to the right only once with this function:
function slideRight(){
var elem = document.getElementById('weekScroller');
elem.style.left = (elem.style.left+290)+ 'px';
}
but this only changes the position once and I need the elements to continue to scroll each time I click the arrows. Also I'd like to make the scroll a smooth motion rather than a jump.
HTML:
<div id="weekScroller">
<div class="weekScrollerDay">
BOX 1
</div>
<div class="weekScrollerDay" id="testID">
BOX 2
</div>
<div class="weekScrollerDay">
BOX 3
</div>
<div class="weekScrollerDay">
BOX 4
</div>
<div class="weekScrollerDay">
BOX 5
</div>
</div>
<div id="scrollLeft" onclick="slideLeft()">
Left
</div>
<div id="scrollRight" onclick="slideRight()">
Right
</div>
CSS:
#scrollLeft{
position: fixed;
left: 35px;
top: 50%;
margin-top: -100px;
background-color: #000;
height: 40px;
width: 40px;
color: #fff;
}
#scrollRight{
position: fixed;
right: 35px;
top: 50%;
margin-top: -100px;
background-color: #000;
height: 40px;
width: 40px;
color: #fff;
}
#weekScroller{
opacity: 1;
position: fixed;
top: 50%;
margin-top: -200px;
height: 400px;
display: block;
overflow:hidden;
}
.weekScrollerDay{
opacity: 1;
width: 280px;
height: 390px;
margin: 5px;
background-color: rgb(200, 200, 200);
float: left;
display:inline-block;
}
Theres a Jquery carousel called Owl Carousel that i think would meet your needs. See demo in the snippet.
$(document).ready(function () {
var carousel = $("#owl-demo");
carousel.owlCarousel({
navigation:true,
navigationText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
],
});
});
.owl-theme .owl-controls{
margin-top: 10px;
text-align: center;
}
/* Styling Next and Prev buttons */
.owl-theme .owl-controls .owl-buttons div{
color: #FFF;
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
margin: 5px;
padding: 3px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: #869791;
filter: Alpha(Opacity=50);/*IE7 fix*/
opacity: 0.5;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
text-decoration: none;
}
/* Styling Pagination*/
.owl-theme .owl-controls .owl-page{
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
display: block;
width: 12px;
height: 12px;
margin: 5px 7px;
filter: Alpha(Opacity=50);/*IE7 fix*/
opacity: 0.5;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #869791;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
}
/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers{
height: auto;
width: auto;
color: #FFF;
padding: 2px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
/* preloading images */
.owl-item.loading{
min-height: 150px;
background: url(AjaxLoader.gif) no-repeat center center
}
#owl-demo .owl-item > div img {
display: block;
width: 100%;
height: 150px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom:4px;
}
#owl-demo .owl-item > div{
background : #42bdc2;
text-align: center;
padding:10x 0px;
margin:3px;
color: white;
font-size:32px;
border:1px white;
}
.wrapper-with-margin{
margin:0px 50px;
}
.owl-theme .owl-controls .owl-buttons div {
position: absolute;
}
.owl-theme .owl-controls .owl-buttons .owl-prev{
left: -45px;
top: 55px;
}
.owl-theme .owl-controls .owl-buttons .owl-next{
right: -45px;
top: 55px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet"/>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<div class="wrapper-with-margin">
<div id="owl-demo" class="owl-carousel">
<div><img src="http://www.musicmatters.ie/images/bara2.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/volunteer2.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/volunteer1.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/choir.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/bara3.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/bara2.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/volunteer2.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/volunteer1.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/choir.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/bara3.jpg"></div>
</div>
</div>