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>
Related
I want soundbar effects i.e
I want the corresponding divs(bars) to increase/decrease height indefinetely like in the code snippet below. I want to acheive the same effect in Vanilla JS.
I want them to change height randomly i.e 5 bars will change height in 5 random ways.
The Element.animate() method is not doing the job and I am not allowed to use any external libraries or API's as well. I am unsure of using the CSS animate method.
The code written below is in jQuery. I am unable to decipher the same solution in Vanilla JS.
function fluctuate(bar) {
var amplitude = Math.random() * 42;
console.log(amplitude);
var height = amplitude * 4;
//Animate the equalizer bar repeatedly
bar.animate({
height: height
}, 1000, function() {
fluctuate($(this));
});
}
$(".bar").each(function(i) {
fluctuate($(this));
console.log($(this));
});
.inline-block-wrapper {
display: inline-block;
margin-right: -4px;
}
.bar-wrapper {
background-color: black;
height: 160px;
width: 135px;
display: block;
position: relative;
}
.bar {
/* background-color: green; */
width: 100%;
height: 160px;
position: absolute;
left: 0px;
bottom: 0px;
}
.bar-container {
margin: auto;
width: 50%;
height: 10rem;
border: 15px solid black;
}
timers {
display: flex;
}
.start {
display: inline;
background-color: green;
margin-right: 50px;
padding: 10px 10px;
color: white;
border: none;
width: 100px;
height: 35px;
justify-content: center;
}
.stop {
display: inline;
background-color: red;
margin-left: 50px;
padding: 10px 10px;
color: white;
border: none;
width: 100px;
height: 35px;
justify-content: center;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
</head>
<body>
<div class="bar-container">
<div class="inline-block-wrapper">
<div class="bar-wrapper">
<div class="bar" style="background-color:#754ab7"></div>
</div>
</div>
<div class="inline-block-wrapper">
<div class="bar-wrapper">
<div class="bar" style="background-color:#c640a5"></div>
</div>
</div>
<div class="inline-block-wrapper">
<div class="bar-wrapper">
<div class="bar" style="background-color:#f05386"></div>
</div>
</div>
<div class="inline-block-wrapper">
<div class="bar-wrapper">
<div class="bar" style="background-color:#f58169"></div>
</div>
</div>
<div class="inline-block-wrapper">
<div class="bar-wrapper">
<div class="bar" style="background-color:#f9c059"></div>
</div>
</div>
</div>
<div class="timers">
<button class="start" onClick=f luctuate()> Start</button>
<button class="stop" onClick=s topSequence()> Stop</button>
Took a whole lot of CSS but I worked out a solution to something close to what I wanted.
var clicks = 0
function fluctuate(){
clicks+=1
if(clicks>1){
stopFluctuation()
}else{
document.querySelector('.div-stop').classList.toggle('animate-bars')
var bar = document.getElementsByClassName('div-bar')
}
}
function stopFluctuation() {
let count = 1;
let bars = document.getElementsByClassName('div-bar');
for(bar of bars) {
bar.classList.toggle('paused-bars');
}
}
.container {
border: 20px solid black;
background-color: black;
}
.button-container {
display: flex;
}
.start {
display: inline;
background-color: green;
margin-right: 50px;
padding: 10px 10px;
color: white;
border: none;
width: 100px;
height: 35px;
justify-content: center;
}
.stop {
display: inline;
background-color: red;
margin-left: 50px;
padding: 10px 10px;
color: white;
border: none;
width: 100px;
height: 35px;
justify-content: center;
}
.div-stop {
display: flex;
align-items: center;
width: 550px;
height: 150px;
overflow: hidden;
}
.div-stop div {
flex: 10 auto;
height: 100%;
margin: 0;
}
.animate-bars div {
animation: animate-bar 500ms linear infinite alternate;
transform-origin: bottom;
}
.animate-bars div:first-child {
margin-left: 0;
}
.animate-bars div:last-child {
margin-right: 0;
}
.animate-bars div:nth-child(1) {
animation-duration: 2200ms;
animation-delay: 9ms;
position: relative;
top:22%;
}
.animate-bars div:nth-child(2) {
animation-duration: 1500ms;
animation-delay: 0ms;
position: relative;
top: 33%;
}
.animate-bars div:nth-child(3) {
animation-duration: 1789ms;
animation-delay: 5ms;
position: relative;
}
.animate-bars div:nth-child(4) {
animation-duration: 2786ms;
animation-delay: 7ms;
position: relative;
top: 10%;
}
.animate-bars div:nth-child(5) {
animation-duration: 1659ms;
animation-delay: 8ms;
position: relative;
top: 27%;
}
#keyframes animate-bar {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(100%);
}
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
body::after {
content: "";
position: absolute;
top: 50%;
right: 0;
left: 0;
width: 100%;
height: 1px;
}
.paused-bars {
-webkit-animation-play-state: paused;
animation-play-state: paused !important;
}
<div class = "container">
<div class="div-stop">
<div style="background-color:#754ab7" class="div-bar"></div>
<div style="background-color:#c640a5" class="div-bar"></div>
<div style="background-color:#f05386" class="div-bar"></div>
<div style="background-color:#f58169" class="div-bar"></div>
<div style="background-color:#f9c059" class="div-bar"></div>
</div>
</div>
<div class = "button-container">
<button id="start" class= "start" onClick="fluctuate()">Start</button>
<button id="stop" class = "stop" onClick="stopFluctuation()">Stop</button>
</div>
i tried making an easy working clock but i have no idea how to get the clock hands to rotate. i tried to use "#keyframes" to try to get it working but i dont know what to put in "before". is there a way to make it rotate using only css or will using javascript be easier. the link below shows my work but you can also look below and see my code.
https://codepen.io/dior44/pen/GRZMZdy
h1 {
margin: -40px 0 0 0;
font-size: 50px;
position: relative;
top: 100px;
}
div {
margin: 0 auto;
}
.clock {
height: 400px;
width: 400px;
border-radius: 400px;
background: #cccc;
}
.dot {
height: 60px;
width: 60px;
border-radius: 60px;
background: #aaa;
position: relative;
top: 120px;
left: -27px;
z-index: -1;
}
.hours {
width: 7px;
height: 90px;
background: blue;
position: relative;
top: 100px;
}
.minutes {
width: 5px;
height: 170px;
background: black;
position: relative;
top: -50px;
}
.seconds {
width: 3px;
height: 220px;
background: red;
position: relative;
top: -10px;
animation-name: second;
animation-duration: 1s;
}
#keyframes second {
from {
}
}
h2 {
position: relative;
top: 45px;
left: 738px;
font-size: 35px;
margin: -20px 0 0 0;
}
h3 {
margin: -140px 0 0 0;
font-size: 35px;
position:relative;
top: 310px;
left: 920px;
}
h4 {
margin: 3px 0 0 0;
position: relative;
top: 268px;
left: 570px;
font-size: 35px;
}
h5 {
margin: 20px 0 0 0;
position: relative;
top: 400px;
left: 738px;
font-size: 35px;
}
<h1>Clock</h1>
<h2>12</h2>
<h3>3</h3>
<h4>9</h4>
<h5>6</h5>
<body>
<div class="clock">
<div class="hours">
<div class="minutes">
<div class="seconds">
<div class="dot">
<div class="12">
<div class="3">
<div class="6">
<div class="9">
</body>
Pure HTML/CSS second hand:
#clock_container {
position: absolute;
top: 20px;
left: 20px;
width: 150px;
height: 150px;
border-radius: 50%;
border: 2px solid black;
}
#seconds {
height: 50%;
width: 0px;
box-sizing: border-box;
border: 1px solid black;
top: 0%;
left: 50%;
position: absolute;
transform-origin: bottom;
/* of-course, would be 60s */
animation: secondsMotion 10s infinite linear;
}
#keyframes secondsMotion {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="clock_container">
<div id="seconds"></div>
</div>
If you wanted to start with the correct time - with a little JS early on:
var sec = new Date().getSeconds();
var sec_start = (sec/60) * 360 + 'deg';
var sec_end = (sec/60) * 360 + 360 + 'deg';
document.documentElement.style.setProperty("--sec-rot-start", sec_start);
document.documentElement.style.setProperty("--sec-rot-end", sec_end);
and then, in the keyframes:
#keyframes secondsMotion {
0% {
transform: rotate(var(--sec-rot-start));
}
100% {
transform: rotate(var(--sec-rot-end));
}
}
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'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
I want to give a sliding effect using left and right DIVs when user clicks in the middle DIV(blue). But it's not working.
The script code is not working. I think there is some error.
When I used hover in my stylesheet it also didn't work. I mean that I used hover on id inner/outer/power which will change css property of id left and right to create a sliding transition effect. But it didn't work. But when I used container to be hovered instead of the above ids then sliding effect was working. I'm totally depressed as it's not making any sense to me.
<script type="text/javascript" >
function slide()
{
document.getElementById("left").style.left = -100% ;
document.getElementById("right").style.right = -100% ;
}
</script>
html,body{
height: 100%;
width: 100%;
margin: 0;
max-width: 100%;
overflow-x: hidden;
}
#container {
height: 100%;
width: 100%;
margin: 0;
position: absolute;
}
#left {
left: 0px;
margin-left: 0%;
position: absolute;
height: 100%;
width: 50%;
background-color: yellow;
transition: left ease-out 3s;
}
#right {
right: 0px;
margin-left: 50%;
position: absolute;
height: 100%;
width: 50%;
background-color: green;
transition: right ease-out 3s;
}
#outer{
z-index: 5;
margin-left: 47.5%;
margin-top: 25%;
width: 5%;
position: absolute;
}
#inner {
z-index: 5;
width: 100%;
height: 100%;
padding-bottom: 100%;
border-radius: 50%;
background-color: blue;
}
#power {
z-index: 5;
position: absolute;
width: 100%;
height: 100%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css">
<title></title>
</head>
<body>
<div id="container">
<div id="outer">
<div id="inner" >
<a href="javascript:slide()">
<img id="power" src="off.png">
</a>
</div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
The value for your CSS effect needs to be in quotations.
function slide()
{
document.getElementById("left").style.left = "-100%";
document.getElementById("right").style.right = "-100%" ;
}
html,body{
height: 100%;
width: 100%;
margin: 0;
max-width: 100%;
overflow-x: hidden;
}
#container {
height: 100%;
width: 100%;
margin: 0;
position: absolute;
}
#left {
left: 0px;
margin-left: 0%;
position: absolute;
height: 100%;
width: 50%;
background-color: yellow;
transition: left ease-out 3s;
}
#right {
right: 0px;
margin-left: 50%;
position: absolute;
height: 100%;
width: 50%;
background-color: green;
transition: right ease-out 3s;
}
#outer{
z-index: 5;
margin-left: 47.5%;
margin-top: 25%;
width: 5%;
position: absolute;
}
#inner {
z-index: 5;
width: 100%;
height: 100%;
padding-bottom: 100%;
border-radius: 50%;
background-color: blue;
}
#power {
z-index: 5;
position: absolute;
width: 100%;
height: 100%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css">
<title></title>
</head>
<body>
<div id="container">
<div id="outer">
<div id="inner" >
<a href="javascript:slide()">
<img id="power" src="off.png">
</a>
</div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
As a side note, in code snippets, your JavaScript does not need to be inside of the script tag, as long as it is in the JavaScript section.
Try this:
document.getElementById("left").style.left = "-100px";