I have an issue with js. I want to make an responsive menu. I mean when I am on start page the start page is on first place on the list. If I am on contact page the contact is first in the list. var planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"]; <div class="name_container"><p class="pn">Start</p><p class="more">READ MORE</p></div> The menu is a circle with icons that are moving on it. First element in list is on bottom of the circle. On conclusion I need change the list dinamicly in js script depends on subpage i am on. I know i can create several js files and it will work, but i wonna try it by js or HTML or u have some ideas.
Thanks from any help
var element = document.getElementById('mobile_control');
var hammertime = new Hammer(element);
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
hammertime.on('swipeleft', function(ev) {
cmove("prev");
});
hammertime.on('swiperight', function(ev) {
cmove("next");
});
$(".action").on("click", function(){
cmove($(this).attr('id'));
});
$('.title').each(function(){
$(this).html("Earth".replace("<span class='letter'>$&</span>"));
});
var angle = 0;
var planet_id = 0;
function cmove(dir){
var n_planet = 8, next_id;
var prev, next;
var top = $("#pl"+ planet_id);
var orbit = $(".planet_container");
top.removeClass("pt");
if(planet_id == 0){
prev = $("#pl"+ (n_planet-1));
next = $("#pl"+ (planet_id+1)%n_planet);
}else{
prev = $("#pl"+ (planet_id-1));
next = $("#pl"+ (planet_id+1)%n_planet);
}
if(dir == "prev"){
next_id = (planet_id + 1) % n_planet;
angle -= 45;
next.addClass("pt");
planet_id++;
}else{
if(planet_id == 0){
next_id = 7;
planet_id = 7;
}else{
next_id = planet_id-1;
--planet_id;
}
angle += 45;
prev.addClass("pt");
}
$('.pn').each(function(){
$(this).html(planet[next_id].replace( "<span class='letter'>$&</span>"));
});
anime.timeline({})
.add({
targets: '.pn .letter',
translateX: [40,0],
translateZ: 0,
opacity: [0,1],
easing: "easeOutExpo",
duration: 1200,
delay: function(el, i) {
return 500 + 30 * i;
}
});
orbit.css("transform", "rotateZ(" + angle + "deg)");
}
var planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"];
let loocation_path = location.pathname.split('/');
var path = loocation_path[loocation_path.length - 1];
switch(path){
case 'index.html':
while(planet[0] != 'Start'){
let head = planet.shift();
planet.push(head);
};
var nazwa = document.getElementById('show_pathname');
nazwa.innerHTML = "Start";
break;
case 'contact.html':
while(planet[0] != 'Contact'){
let head = planet.shift();
planet.push(head);
};
var nazwa = document.getElementById('show_pathname');
nazwa.innerHTML = "Contact";
break;
}
const planets = document.querySelectorAll('.moon');
var moon_id = 0;
function moon(direction){
var n_planet = 8, moon_next;
if(direction == "prev"){
moon_next = (moon_id + 1) % n_planet;
moon_id++;
} else {
if(moon_id == 0){
moon_next = 7;
moon_id = 7;
} else {
moon_next = moon_id - 1;
--moon_id;
}
};
planets.forEach( ( planet, i ) => {
if ( i === moon_next ) {
planet.style.visibility = 'visible';
} else {
planet.style.visibility = 'hidden';
}
} );
};
body {
color: #444444;
font-size: 1rem;
margin: 0;
padding: 0;
}
.t-site-header {
padding-top: 20px;
height: 30vh;
}
.full_container {
position: relative;
display: block;
width: 100vmin;
height: 100%;
margin: auto;
z-index: 100;
}
.full_container .bottom {
position: absolute;
transform: rotate(180deg);
top: 0;
width: 100%;
height: 28vh;
}
.full_container .bottom .nav {
width: 100%;
height: 40px;
padding-top: 15px;
display: block !important;
}
.full_container .bottom .nav span {
color: #999;
cursor: pointer;
}
.full_container .bottom .nav span i {
font-size: 40px;
font-weight: 200;
}
.full_container .bottom .nav span:nth-child(1) {
padding-left: 10vmin;
}
.full_container .bottom .nav span:nth-child(2) {
padding-right: 10vmin;
float: right;
}
.full_container .bottom .orbit {
position: absolute;
top: 5vh;
width: 100%;
height: 100vmin;
border-radius: 50%;
border: 3px solid #eee;
margin: auto;
left: 0;
right: 0;
}
.full_container .bottom .orbit .planet_container {
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform 0.7s ease-in;
}
.full_container .bottom .orbit .planet_container .planet {
position: absolute;
border-radius: 50%;
width: 5vmin;
height: 5vmin;
transition: transform 0.4s linear;
will-change: transform;
}
.full_container .bottom .orbit .planet_container .pt {
transition: transform 0.4s ease-in;
transform: scale(1.7);
will-change: transform;
-webkit-animation: spin 0.4s;
animation: spin 0.4s;
}
/* */
.full_container .bottom .orbit .planet_container .earth {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
top: -2.5vmin;
left: 0;
right: 0;
margin: auto;
/* transform: rotate(180deg)*/
}
.full_container .bottom .orbit .planet_container .earth .mars .jupiter .saturn .uranus .neptune .mercury .venus .moon span {
top: -1vmin;
left: -1vmin;
}
.full_container .bottom .orbit .planet_container .mars {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 12vmin;
top: 12vmin;
/* transform: rotate(-135deg)*/
}
.full_container .bottom .orbit .planet_container .jupiter {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: -2.5vmin;
bottom: 46.5vmin;
/* transform: rotate(-90deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .saturn {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 12vmin;
bottom: 12vmin;
/* transform: rotate(-45deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .uranus {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 0;
left: 0;
margin: auto;
bottom: -2.5vmin;
/* transform: rotate(0deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .neptune {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: 12vmin;
bottom: 12vmin;
/* transform: rotate(45deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .mercury {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: -2.5vmin;
bottom: 46.5vmin;
/* transform: rotate(90deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .venus {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: 12vmin;
top: 12vmin;
/* transform: rotate(135deg) scale(1.7);*/
}
.full_container .bottom .orbit .name_container {
position: absolute;
display: flex;
width: auto;
margin: auto;
left: 0;
right: 0;
top: 8vh;
text-align: center;
align-items: center;
justify-content: center;
flex-wrap: wrap;
transform: rotate(180deg);
}
.full_container .bottom .orbit .name_container .more {
width: 100%;
padding: 8px 0;
color: #bbb;
font-weight: 500;
cursor: pointer;
transition: color 0.2s;
}
.full_container .bottom .orbit .name_container .more:hover {
color: #888;
transition: color 0.3s;
}
.full_container .bottom .orbit .name_container .pn {
font-size: 25px;
color: #666;
text-transform: uppercase;
padding-bottom: 4px;
letter-spacing: 4px;
padding-left: 8px;
border-bottom: 3px solid #bbb;
}
.full_container .bottom .orbit .name_container .pn .letter {
display: inline-block;
line-height: 1em;
opacity: 0;
}
.moon {
width: 100%;
height: 100%;
-webkit-animation: planet_rotation 2s infinite linear;
animation: planet_rotation 2s infinite linear;
visibility: hidden;
}
.moon span {
width: 0.8vmin;
height: 0.8vmin;
background: black;
border-radius: 50%;
position: absolute;
}
#-webkit-keyframes planet_rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes planet_rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#pl0{
transform: rotate(180deg);
}
#pl1{
transform: rotate(225deg);
}
#pl2{
transform: rotate(270deg);
}
#pl3{
transform: rotate(315deg);
}
#pl4{
transform: rotate(360deg);
}
#pl5{
transform: rotate(405deg);
}
#pl6{
transform: rotate(450deg);
}
#pl7{
transform: rotate(495deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<header class="t-site-header">
<div class="full_container" id="mobile_control">
<div class="bottom">
<div class="nav">
<span id="next" onclick="moon('next')" class="action"><i class="material-icons">keyboard_arrow_left</i></span>
<span id="prev" onclick="moon('prev')" class="action"><i class="material-icons">keyboard_arrow_right</i></span>
</div>
<div class="orbit">
<div class="planet_container">
<div class="planet pt earth" id="pl0">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet mars" id="pl1">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet jupiter" id="pl2">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet saturn" id="pl3">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet uranus" id="pl4">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet neptune" id="pl5">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet mercury" id="pl6">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet venus" id="pl7">
<div class="moon">
<span></span>
</div>
</div>
</div>
<div class="name_container">
<p class="pn" id="show_pathname"></p>
<p class="more">READ MORE</p>
</div>
</div>
</div>
</div>
</header>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js'></script><script src="./js/script.js"></script>
</body>
</html>
Related
Using the below code it will display the single text with percentage loader but i am trying add multiple text instead of single, basically i am rshiny developer no i started learning html and css code it wil be useful if i get any idea on how to change the text on certain points
i have tried this keyframe anim i dont know y its not working
#keyframes anim{
10%{
content:'Stage 1';
}
25%{
content:'Stage 2';
}
50%{
content:'Stage 3';
}
75%{
content:'Stage 4';
}
100%{
content:'Completed';
}
}
const analyse=document.getElementById('analyse');
const numb = document.querySelector(".number");
let counter = 0;
let id1;
let cnt = 0;
id1 = setInterval(() => {
if (counter == 100) {
fetch.style.display='inline-block';
clearInterval(id1);
} else {
counter += 1;
numb.innerHTML = counter + "%";
fetch.style.display='none';
}
}, 120);
html, body{
display:inline-block;
height:100%;
text-align: left;
place-items: left;
background: #dde6f0;
}
.circular{
height:100px;
width: 100px;
margin-left: 43%;
margin-top:10%;
position: absolute;
display: inline-block;
/* transform:scale(2); */
}
.circular .inner{
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background: #dde6f0;
border-radius: 100%;
}
.circular .number{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:10;
font-size:18px;
font-weight:500;
color:#4158d0;
}
.circular .bar{
position: absolute;
height: 100%;
width: 100%;
background: #fff;
border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress{
position: absolute;
height: 100%;
width: 100%;
border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
background: #4158d0;
}
.circle .left .progress{
z-index:1;
animation: left 6s linear both;
}
#keyframes left{
100%{
transform: rotate(180deg);
}
}
.circle .right {
transform: rotate(180deg);
z-index:3;
}
.circle .right .progress{
animation: right 6s linear both;
animation-delay:6s;
}
#keyframes right{
100%{
transform: rotate(180deg);
}
}
.text::after{
animation:anim 10s linear both;
}
<html>
<head>
<link rel="stylesheet" href="TestTwoCss.css">
</head>
<body>
<div class="container">
<div id="analyse">
<div class="text">Analysing...</div>
<div class="circular">
<div class="inner"></div>
<div class="number">0%</div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you can use switch and change analyze text base on counter .
const analyzeText = document.querySelector("#analyse .text");
const numb = document.querySelector(".number");
let counter = 0;
let id1;
let cnt = 0;
id1 = setInterval(() => {
if (counter == 100) {
// fetch.style.display='inline-block';
clearInterval(id1);
} else {
counter += 1;
numb.innerHTML = counter + "%";
// fetch.style.display='none';
changeText(counter); // change analyze text base on counter value.
}
}, 110);
function changeText() {
switch (counter) {
case 1:
analyzeText.innerHTML = "Stage 1";
break;
case 25:
analyzeText.innerHTML = "Stage 2";
break;
case 50:
analyzeText.innerHTML = "Stage 3";
break;
case 75:
analyzeText.innerHTML = "Stage 4";
break;
case 100:
analyzeText.innerHTML = "Completed";
break;
}
}
html, body{
display:inline-block;
height:100%;
text-align: left;
place-items: left;
background: #dde6f0;
}
.circular{
height:100px;
width: 100px;
margin-left: 43%;
margin-top:10%;
position: absolute;
display: inline-block;
/* transform:scale(2); */
}
.circular .inner{
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background: #dde6f0;
border-radius: 100%;
}
.circular .number{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:10;
font-size:18px;
font-weight:500;
color:#4158d0;
}
.circular .bar{
position: absolute;
height: 100%;
width: 100%;
background: #fff;
border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress{
position: absolute;
height: 100%;
width: 100%;
border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
background: #4158d0;
}
.circle .left .progress{
z-index:1;
animation: left 6s linear both;
}
#keyframes left{
100%{
transform: rotate(180deg);
}
}
.circle .right {
transform: rotate(180deg);
z-index:3;
}
.circle .right .progress{
animation: right 6s linear both;
animation-delay:6s;
}
#keyframes right{
100%{
transform: rotate(180deg);
}
}
<html>
<head>
<!-- <link rel="stylesheet" href="TestTwoCss.css"> -->
</head>
<body>
<div class="container">
<div id="analyse">
<div class="text">Analysing...</div>
<div class="circular">
<div class="inner"></div>
<div class="number">0%</div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have three DIVs that complete the screen in a mobile device. Whenever these are clicked, the DIV resizes to fill up the screen and then the information appears.
It is all working as it should when I click it the first time. But after some other clicks, when the DIV starts to resize to fill up the screen or to go back to the original state, it grows behind another DIV until it suddenly pops-up in front of that DIV and continues on.
Also, I try to change the SPAN which is the Subtitle (class='sTitle') from position Absolute to Fixed. If I have it in Fixed since the beginning, the movement is not soft as if it is Absolute. But, I need it fixed because my scroll changes to horizontal when the DIV is enlarged. I have it commented in the JS code because it changes the style right away and there is no difference as if I just have its position in Fixed style from the beginning.
Thank you for your time. I'm starting to learn how to build websites as you may be able to see.
There is the code:
const thirdOne = document.querySelector('.thirdOne'),
thirdOneSpan = document.querySelector('.thirdOneSpan'),
txt1 = document.querySelector('.oneTxt1'),
txt2 = document.querySelector('.oneTxt2'),
txt3 = document.querySelector('.oneTxt3'),
txt4 = document.querySelector('.oneTxt4'),
txt5 = document.querySelector('.oneTxt5'),
txt6 = document.querySelector('.oneTxt6'),
txt7 = document.querySelector('.oneTxt7'),
txt8 = document.querySelector('.oneTxt8'),
txt9 = document.querySelector('.oneTxt9'),
img1 = document.querySelector('.oneImg1'),
img2 = document.querySelector('.oneImg2');
const thirdTwo = document.querySelector('.thirdTwo'),
thirdTwoSpan = document.querySelector('.thirdTwoSpan'),
txt21 = document.querySelector('.twoTxt1'),
txt22 = document.querySelector('.twoTxt2'),
txt23 = document.querySelector('.twoTxt3'),
txt24 = document.querySelector('.twoTxt4'),
txt25 = document.querySelector('.twoTxt5'),
txt26 = document.querySelector('.twoTxt6'),
txt27 = document.querySelector('.twoTxt7'),
txt28 = document.querySelector('.twoTxt8'),
txt29 = document.querySelector('.twoTxt9'),
img21 = document.querySelector('.twoImg1'),
img22 = document.querySelector('.twoImg2');
const thirdThree = document.querySelector('.thirdThree'),
thirdThreeSpan = document.querySelector('.thirdThreeSpan'),
txt31 = document.querySelector('.threeTxt1'),
txt32 = document.querySelector('.threeTxt2'),
txt33 = document.querySelector('.threeTxt3'),
txt34 = document.querySelector('.threeTxt4'),
txt35 = document.querySelector('.threeTxt5'),
txt36 = document.querySelector('.threeTxt6'),
txt37 = document.querySelector('.threeTxt7'),
txt38 = document.querySelector('.threeTxt8'),
txt39 = document.querySelector('.threeTxt9'),
img31 = document.querySelector('.threeImg1'),
img32 = document.querySelector('.threeImg2');
let clicked = 0;
let thirdOneSel = () => {
thirdOne.scrollLeft = 0;
thirdOne.classList.toggle('fullscreen');
thirdOne.classList.toggle('bgBlue');
thirdOne.classList.toggle('scrollable');
thirdOneSpan.classList.toggle('topCenter');
thirdOneSpan.classList.toggle('textTitle');
txt1.classList.toggle('txtLeft');
txt2.classList.toggle('txtRight');
txt3.classList.toggle('txtLeft');
txt4.classList.toggle('txtRight');
txt5.classList.toggle('txtLeft');
txt6.classList.toggle('txtRight');
txt7.classList.toggle('txtLeft');
txt8.classList.toggle('txtRight');
img1.classList.toggle('hide');
img1.classList.toggle('snap');
img2.classList.toggle('hide');
img2.classList.toggle('snap');
if (clicked === 0) {
thirdOne.style.zIndex = 1;
// thirdOneSpan.style.position = 'fixed';
clicked = 1;
} else {
thirdOne.style.zIndex = 0;
// thirdOneSpan.style.position = 'absolute';
clicked = 0;
}
};
let thirdTwoSel = () => {
if (clicked === 0) {
thirdTwo.style.zIndex = 1;
clicked = 1;
} else {
thirdTwo.style.zIndex = 0;
clicked = 0;
}
thirdTwo.scrollLeft = 0;
thirdTwo.classList.toggle('fullscreen');
thirdTwo.classList.toggle('bgGreen');
thirdTwo.classList.toggle('scrollable');
thirdTwoSpan.classList.toggle('topCenter');
thirdTwoSpan.classList.toggle('textTitle');
txt21.classList.toggle('txtLeft');
txt22.classList.toggle('txtRight');
txt23.classList.toggle('txtLeft');
txt24.classList.toggle('txtRight');
txt25.classList.toggle('txtLeft');
txt26.classList.toggle('txtRight');
txt27.classList.toggle('txtLeft');
txt28.classList.toggle('txtRight');
img21.classList.toggle('hide');
img21.classList.toggle('snap');
img22.classList.toggle('hide');
img22.classList.toggle('snap');
};
let thirdThreeSel = () => {
thirdThree.scrollLeft = 0;
thirdThree.classList.toggle('fullscreen');
thirdThree.classList.toggle('bgBlue');
thirdThree.classList.toggle('scrollable');
thirdThreeSpan.classList.toggle('topCenter');
thirdThreeSpan.classList.toggle('textTitle');
txt31.classList.toggle('txtLeft');
txt32.classList.toggle('txtRight');
txt33.classList.toggle('txtLeft');
txt34.classList.toggle('txtRight');
txt35.classList.toggle('txtLeft');
txt36.classList.toggle('txtRight');
txt37.classList.toggle('txtLeft');
txt38.classList.toggle('txtRight');
img31.classList.toggle('hide');
img31.classList.toggle('snap');
img32.classList.toggle('hide');
img32.classList.toggle('snap');
if (clicked === 0) {
thirdThree.style.zIndex = 1;
// thirdThreeSpan.style.position = 'fixed';
clicked = 1;
} else {
thirdThree.style.zIndex = 0;
// thirdThreeSpan.style.position = 'absolute';
clicked = 0;
}
};
thirdOne.addEventListener('click', () => {
thirdOneSel();
});
thirdTwo.addEventListener('click', () => {
thirdTwoSel();
});
thirdThree.addEventListener('click', () => {
thirdThreeSel();
});
.third {
position: relative;
height: 100vh;
display: block;
color: #000;
}
.third h1 {
position: absolute;
top: 2.2vh;
left: 50%;
font-size: 3.5vh;
letter-spacing: 2vw;
transform: translate(-50%, 0);
}
.third span {
position: absolute;
left: 50%;
top: 30%;
font-size: 2rem;
font-weight: 700;
letter-spacing: 4px;
color: rgba(255, 255, 255, 1);
transform: translateX(-50%);
text-align: center;
transition: all 1s;
}
.thirdOne {
position: absolute;
top: 8vh;
height: 31vh;
width: 100%;
border: 1px solid #fff;
background: 50% / cover no-repeat url('./bg.jpg');
background-color: rgb(78, 199, 255);
overflow: hidden;
transition: all 1.4s 0.5s;
}
.thirdOne p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2vh;
text-align: left;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.oneTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.oneTxt2 {
top: 18%;
transition: all 1s 0.8s;
}
.oneTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.oneTxt4 {
top: 62%;
transition: all 1s 1s;
}
.oneTxt5 {
top: 68%;
transition: all 1s 1.2s;
}
.oneTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.oneTxt7 {
top: 78%;
transition: all 1s 1.6s;
}
.oneTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
text-align: center !important;
}
.scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
#keyframes scrollAnim2 {
0% {
transform: rotateX(0deg) rotate(225deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotateX(360deg) rotate(225deg) translate(-30px, 30px);
opacity: 0;
}
}
.oneImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 24vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.oneImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.oneTxt9 {
left: 150% !important;
top: 10%;
}
.thirdTwo {
position: absolute;
top: 39vh;
height: 31vh;
width: 100%;
border: 1px solid #fff;
background: 50% / cover no-repeat url('./bg2.jpg');
background-color: rgb(46, 136, 186);
overflow: hidden;
transition: all 1.4s 0.5s;
}
.thirdTwo p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2.5vh;
text-align: justify;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.twoTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.twoTxt2 {
top: 17%;
transition: all 1s 0.8s;
}
.twoTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.twoTxt4 {
top: 63%;
transition: all 1s 1s;
}
.twoTxt5 {
top: 67%;
transition: all 1s 1.2s;
}
.twoTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.twoTxt7 {
top: 81%;
transition: all 1s 1.6s;
}
.twoTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
}
#scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
.twoImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 25vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.twoImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.twoTxt9 {
left: 150% !important;
top: 10%;
}
.thirdThree {
position: absolute;
top: 70vh;
height: 30vh;
width: 100%;
border: 1px solid #fff;
background: 90% / cover no-repeat url('./bg3.jpg');
background-color: rgb(66, 112, 176);
transition: all 1.4s 0.5s;
}
.thirdThree p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2.5vh;
text-align: justify;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.threeTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.threeTxt2 {
top: 17%;
transition: all 1s 0.8s;
}
.threeTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.threeTxt4 {
top: 63%;
transition: all 1s 1s;
}
.threeTxt5 {
top: 67%;
transition: all 1s 1.2s;
}
.threeTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.threeTxt7 {
top: 81%;
transition: all 1s 1.6s;
}
.threeTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
}
.scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
.threeImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 25vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.threeImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.threeTxt9 {
left: 150% !important;
top: 10%;
}
.fullscreen {
height: 100vh !important;
top: 0 !important;
transition: all 2s;
}
.topCenter {
top: 1vh !important;
/* position: fixed !important; */
/* left: 50% !important;
transform: translateX(-50%) !important; */
transition: all 1s;
}
.topCenter2 {
top: 2.2vh !important;
transition: all 1s;
}
.textTitle {
font-size: 3vh !important;
/* transition: all 1s !important; */
}
.bgBlue {
background: rgb(68, 133, 253) !important;
}
.bgGreen {
background: rgb(24, 153, 33) !important;
}
.txtLeft {
left: -100% !important;
transition: all 0.5s !important;
}
.txtRight {
left: 200% !important;
transition: all 0.5s !important;
}
.scrollable {
overflow-x: scroll !important;
scroll-snap-type: x mandatory !important;
position: fixed !important;
}
.snap {
scroll-snap-align: start;
}
.hide {
opacity: 0 !important;
height: 0px !important;
transition: all 0.6s !important;
}
.container {
position: absolute;
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
width: 100%;
overflow-x: hidden;
}
section {
position: relative;
height: 100vh;
display: block;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
<div class="container">
<section class="third" id="3">
<h1 id="sTitle">TITLE</h1>
<div class="thirdOne">
<span class="thirdOneSpan">SUBTITLE</span>
<p class="oneTxt1 txtLeft">Text</p>
<p class="oneTxt2 txtRight">Text</p>
<img src="./vid.gif" class="oneImg1 hide">
<p class="oneTxt3 txtLeft">Text</p>
<p class="oneTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="oneImg2 hide">
<p class="oneTxt5 txtLeft">Text</p>
<p class="oneTxt6 txtRight">Text</p>
<p class="oneTxt7 txtLeft">Text</p>
<div class="scroll2">
<p class="oneTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="oneTxt9">Text</p>
</div>
<div class="thirdTwo">
<span class="thirdTwoSpan">SUBTITLE</span>
<p class="twoTxt1 txtLeft">Text</p>
<p class="twoTxt2 txtRight">Text</p>
<img src="./vid.gif" class="twoImg1 hide">
<p class="twoTxt3 txtLeft">Text</p>
<p class="twoTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="twoImg2 hide">
<p class="twoTxt5 txtLeft">Text</p>
<p class="twoTxt6 txtRight">Text</p>
<p class="twoTxt7 txtLeft">Text</p>
<div id="scroll2">
<p class="twoTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="twoTxt9">Text</p>
</div>
<div class="thirdThree">
<span class="thirdThreeSpan">SUBTITLE</span>
<p class="threeTxt1 txtLeft">Text</p>
<p class="threeTxt2 txtRight">Text</p>
<img src="./vid.gif" class="threeImg1 hide">
<p class="threeTxt3 txtLeft">Text</p>
<p class="threeTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="threeImg2 hide">
<p class="threeTxt5 txtLeft">Text</p>
<p class="threeTxt6 txtRight">Text</p>
<p class="threeTxt7 txtLeft">Text</p>
<div id="scroll2">
<p class="threeTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="threeTxt9">Text</p>
</div>
</section>
</div>
const numb = document.querySelector(".numb");
let counter = 0;
setInterval(() => {
if (counter == 100) {
clearInterval();
} else {
counter += 1;
numb.textContent = counter + "%";
}
}, 80);
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,
body {
display: grid;
height: 100%;
text-align: center;
place-items: center;
background: #dde6f0;
}
.circular {
height: 100px;
width: 100px;
position: relative;
}
.circular .inner,
.circular .outer,
.circular .circle {
position: absolute;
z-index: 6;
height: 100%;
width: 100%;
border-radius: 100%;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .inner {
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background-color: #dde6f0;
border-radius: 100%;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .circle {
z-index: 1;
box-shadow: none;
}
.circular .numb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 18px;
font-weight: 500;
color: #4158d0;
}
.circular .bar {
position: absolute;
height: 100%;
width: 100%;
background: #fff;
-webkit-border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress {
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
}
.circle .bar .progress,
.dot span {
background: #4158d0;
}
.circle .left .progress {
z-index: 1;
animation: left 4s linear both;
}
#keyframes left {
100% {
transform: rotate(180deg);
}
}
.circle .right {
z-index: 3;
transform: rotate(180deg);
}
.circle .right .progress {
animation: right 4s linear both;
animation-delay: 4s;
}
#keyframes right {
100% {
transform: rotate(180deg);
}
}
.circle .dot {
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 10px;
margin-top: -5px;
animation: dot 8s linear both;
transform-origin: 0% 50%;
}
.circle .dot span {
position: absolute;
right: 0;
width: 10px;
height: 10px;
border-radius: 100%;
}
#keyframes dot {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
z-index: 4;
}
100% {
transform: rotate(270deg);
z-index: 4;
}
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Circular Progress Bar | CodingNepal</title> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="circular">
<div class="inner">
</div>
<div class="outer">
</div>
<div class="numb">
0%</div>
<div class="circle">
<div class="dot">
<span></span>
</div>
<div class="bar left">
<div class="progress">
</div>
</div>
<div class="bar right">
<div class="progress">
</div>
</div>
</div>
</div>
</body>
</html>
I want to make a progress bar like the one in the image below. The percentage should be on left side up to 90% and after 90%, it will go to the center.
How can I do that?
You can position the .numb at the desired place in the beginning, define another css class .numb-center which has top and left 50% to make it center and add that class to .numb when it's your desired percentage in setInterval function.
const numb = document.querySelector(".numb");
let counter = 0;
setInterval(() => {
if (counter == 100) {
clearInterval();
} else {
counter += 1;
if (counter > 90 && !numb.classList.contains('.numb-center')) {
numb.classList.add('numb-center')
}
numb.textContent = counter + "%";
}
}, 80);
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,
body {
display: grid;
height: 100%;
text-align: center;
place-items: center;
background: #dde6f0;
}
.circular {
height: 100px;
width: 100px;
position: relative;
}
.circular .inner,
.circular .outer,
.circular .circle {
position: absolute;
z-index: 6;
height: 100%;
width: 100%;
border-radius: 100%;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .inner {
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background-color: #dde6f0;
border-radius: 100%;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .circle {
z-index: 1;
box-shadow: none;
}
.circular .numb {
position: absolute;
top: 5%;
left: 40%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 18px;
font-weight: 500;
color: #4158d0;
}
.numb-center {
top:50%!important;
left:50%!important;
}
.circular .bar {
position: absolute;
height: 100%;
width: 100%;
background: #fff;
-webkit-border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress {
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
}
.circle .bar .progress,
.dot span {
background: #4158d0;
}
.circle .left .progress {
z-index: 1;
animation: left 4s linear both;
}
#keyframes left {
100% {
transform: rotate(180deg);
}
}
.circle .right {
z-index: 3;
transform: rotate(180deg);
}
.circle .right .progress {
animation: right 4s linear both;
animation-delay: 4s;
}
#keyframes right {
100% {
transform: rotate(180deg);
}
}
.circle .dot {
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 10px;
margin-top: -5px;
animation: dot 8s linear both;
transform-origin: 0% 50%;
}
.circle .dot span {
position: absolute;
right: 0;
width: 10px;
height: 10px;
border-radius: 100%;
}
#keyframes dot {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
z-index: 4;
}
100% {
transform: rotate(270deg);
z-index: 4;
}
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Circular Progress Bar | CodingNepal</title> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="circular">
<div class="inner">
</div>
<div class="outer">
</div>
<div class="numb">
0%</div>
<div class="circle">
<div class="dot">
<span></span>
</div>
<div class="bar left">
<div class="progress">
</div>
</div>
<div class="bar right">
<div class="progress">
</div>
</div>
</div>
</div>
</body>
</html>
I have a responsive menu bar that has a dropdown list which is named three. However, I cannot make its format same with the other title and it moves once it is being hovered. Is there any way that the format title of three be the same as one, two, four and five? And when it is being hovered, is it possible that its position be in a fixed place? Please help. I already tried inline but it doesn't work either. And kindly run the snippet in full screen.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel = "icon" href = "https://cdn.iconscout.com/icon/free/png-256/data-fiveence-46-1170621.png" type = "image/x-icon">
</head>
<style>
#import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
{
box-sizing: border-box;
}
.strips {
min-height: 100vh;
text-align: center;
overflow: hidden;
color: white;
}
.strips__strip {
will-change: width, left, z-index, height;
position: absolute;
width: 20%;
min-height: 100vh;
overflow: hidden;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip:nth-child(1) {
left: 0;
}
.strips__strip:nth-child(2) {
left: 20vw;
}
.strips__strip:nth-child(3) {
left: 40vw;
}
.strips__strip:nth-child(4) {
left: 60vw;
}
.strips__strip:nth-child(5) {
left: 80vw;
}
.strips__strip:nth-child(1) .strip__content {
background:#29363B;
transform: translate3d(-100%, 0, 0);
animation-name: strip1;
animation-delay: 0.1s;
}
.strips__strip:nth-child(2) .strip__content {
background: #EA495F;
transform: translate3d(0, 100%, 0);
animation-name: strip2;
animation-delay: 0.2s;
}
.strips__strip:nth-child(3) .strip__content {
background: #F4837D;
transform: translate3d(0, -100%, 0);
animation-name: strip3;
animation-delay: 0.3s;
}
.strips__strip:nth-child(4) .strip__content {
background: #FAA664;
transform: translate3d(0, 100%, 0);
animation-name: strip4;
animation-delay: 0.4s;
}
.strips__strip:nth-child(5) .strip__content {
background: #99B998;
transform: translate3d(100%, 0, 0);
animation-name: strip5;
animation-delay: 0.5s;
}
#media screen and (max-width: 760px) {
.strips__strip {
min-height: 20vh;
}
.strips__strip:nth-child(1) {
top: 0;
left: 0;
width: 100%;
}
.strips__strip:nth-child(2) {
top: 20vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(3) {
top: 40vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(4) {
top: 60vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(5) {
top: 80vh;
left: 0;
width: 100%;
}
}
.strips .strip__content {
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation-fill-mode: both;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-decoration: none;
}
.strips .strip__content:hover:before {
transform: skew(-30deg) scale(3) translate(0, 0);
opacity: 0.1;
}
.strips .strip__content:before {
<!-- content: ""; -->
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.05;
transform-origin: center center;
transform: skew(-30deg) scaleY(1) translate(0, 0);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips .strip__inner-text {
will-change: transform, opacity;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
width: 70%;
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip--expanded {
width: 100%;
top: 0 !important;
left: 0 !important;
z-index: 3;
cursor: default;
}
#media screen and (max-width: 760px) {
.strips__strip--expanded {
min-height: 100vh;
}
}
.strips__strip--expanded .strip__content:hover:before {
transform: skew(-30deg) scale(1) translate(0, 0);
opacity: 0.05;
}
.strips__strip--expanded .strip__title {
opacity: 0;
}
.strips__strip--expanded .strip__inner-text {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.strip__title {
display: block;
margin: 0;
position: relative;
z-index: 2;
width: 100%;
font-size: 2vw;
color: white;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
#media screen and (max-width: 760px) {
.strip__title {
font-size: 28px;
}
}
.strip__close {
position: absolute;
right: 3vw;
top: 3vw;
opacity: 0;
z-index: 10;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
transition-delay: 0.5s;
}
.strip__close--show {
opacity: 1;
}
#keyframes strip1 {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip2 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip3 {
0% {
transform: translate3d(0, -100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip4 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip5 {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
body {
font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
line-height: 1.5;
}
h1, h2 {
font-weight: 300;
}
.fa {
font-size: 30px;
color: white;
}
h2 {
font-size: 36px;
margin: 0 0 16px;
}
p {
margin: 0 0 16px;
}
p {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent 5px
);
background-repeat: repeat-x;
background-size: 100%;
color: #000;
padding-left: 10px;
text-decoration: none;
}
p:hover {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent
);
}
:root {
--mainColor: white;
}
.navbar-nav li:hover>.dropdown-menu {
display: block;
margin: 0;
position: relative;
z-index: 2;
width: 100%;
font-size: 1.5vw;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
</style>
<body>
<section class="strips">
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="one()">one</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="#">two</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<div class="navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<p class="strip__title" style="margin-left:-15px">three</p>
<div class="dropdown-menu">
<a class="dropdown-item" onclick="sdct()">two</a>
<a class="dropdown-item" onclick="four()">four</a>
</div>
</li>
</ul>
</div>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="#">four</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="">five</a>
</div>
</article>
<i class="fa fa-close strip__close"></i>
</section>
</body>
</html>
.navbar-nav {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%; /* add a width */
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-nav li:hover>.dropdown-menu {
display: block;
margin: 0;
position: absolute; /*position is changes (relative --> absolute)*/
z-index: 2;
width: 100%;
font-size: 1.5vw;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
I have this slider which changes on hover over bullet but I also want to change the slides automatically after an interval.
Here Is the code for the slider
$(document).ready(function(){
var slide = $(".slide");
var viewWidth = $(window).width();
var sliderInner = $(".slider-inner");
var childrenNo = sliderInner.children().length;
sliderInner.width( viewWidth * childrenNo );
$(window).resize(function(){
viewWidth = $(window).width();
});
function setWidth(){
slide.each(function(){
$(this).width(viewWidth);
$(this).css("left", viewWidth * $(this).index());
});
}
function setActive(element){
var clickedIndex = element.index();
$(".slider-nav .active").removeClass("active");
element.addClass("active");
sliderInner.css("transform", "translateX(-" + clickedIndex * viewWidth + "px) translateZ(0)");
$(".slider-inner .active").removeClass("active");
$(".slider-inner .slide").eq(clickedIndex).addClass("active");
}
setWidth();
$(".slider-nav > div").on("click", function(){
setActive($(this));
});
$(window).resize(function(){
setWidth();
});
setTimeout(function(){
$(".slider").fadeIn(500);
}, 2000);
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.nav {
position: fixed;
top: 0;
left: 0;
z-index: 9;
padding: 40px;
color: white;
}
.nav h1 {
font-weight: 300;
font-size: 3rem;
}
.nav .author {
text-align: right;
}
.loading {
background-color: #2ecc71;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 600px;
line-height: 600px;
text-align: center;
color: white;
font-size: 2rem;
}
.slider {
background-color: white;
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
display: none;
}
.slider-inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
-webkit-transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1);
transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1);
-webkit-transition-duration: 1s;
transition-duration: 1s;
background-visibility: hidden;
-webkit-transition-delay: .75s;
transition-delay: .75s;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.slide {
position: absolute;
top: 0;
height: 100%;
background-color: #f1c40f;
background-visibility: hidden;
-webkit-transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
-webkit-transform: translateZ(0) scale(0.8, 0.8);
transform: translateZ(0) scale(0.8, 0.8);
-webkit-transition-duration: .5s;
transition-duration: .5s;
text-align: center;
line-height: 600px;
font-size: 5rem;
color: white;
}
.slide.active {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition-delay: 2s;
transition-delay: 2s;
}
.slide:nth-child(2n) {
background-color: #2ecc71;
}
.slide:nth-child(3n) {
background-color: #3498db;
}
.slide:nth-child(4n) {
background-color: #9b50ba;
}
.slider-nav {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 20px;
text-align: center;
}
.slider-nav > div {
float: left;
width: 10px;
height: 10px;
border: 1px solid white;
z-index: 2;
display: inline-block;
margin: 0 10px;
cursor: pointer;
border-radius: 50%;
opacity: .5;
-webkit-transition-duration: .25s;
transition-duration: .25s;
background-color: transparent;
}
.slider-nav > div:hover {
opacity: 1;
}
.slider-nav > div.active {
background-color: white;
-webkit-transform: scale(2);
transform: scale(2);
opacity: 1;
}
<html >
<head>
<meta charset="UTF-8">
<title>Gummy slider</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="nav">
<h1> slider</h1>
<p class="author">by Atishay Khare</p>
</nav>
<div class="loading">
Loading...
</div>
<div class="slider">
<div class="slider-inner">
<div class="slide active">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
<div class="slide">2</div>
<div class="slide">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
<div class="slide">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
<nav class="slider-nav">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</nav>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
In here some error are also showing when i added it to snippet but it is working fine in my page i just need to make this silder to chnage silder automatically without click.
Use following code within setInterval() method to automatically cycling an item:
var navs = $(".slider-nav > div");
var cur = $(".slider-nav > .active").index();
var nxt = (cur + 1) % navs.length;
setActive(navs.eq(nxt));
See full code in snippet below.
$(document).ready(function(){
var slide = $(".slide");
var viewWidth = $(window).width();
var sliderInner = $(".slider-inner");
var childrenNo = sliderInner.children().length;
sliderInner.width( viewWidth * childrenNo );
$(window).resize(function(){
viewWidth = $(window).width();
});
function setWidth(){
slide.each(function(){
$(this).width(viewWidth);
$(this).css("left", viewWidth * $(this).index());
});
}
function setActive(element){
var clickedIndex = element.index();
$(".slider-nav .active").removeClass("active");
element.addClass("active");
sliderInner.css("transform", "translateX(-" + clickedIndex * viewWidth + "px) translateZ(0)");
$(".slider-inner .active").removeClass("active");
$(".slider-inner .slide").eq(clickedIndex).addClass("active");
}
setWidth();
$(".slider-nav > div").on("click", function(){
setActive($(this));
});
$(window).resize(function(){
setWidth();
});
setTimeout(function(){
$(".slider").fadeIn(500);
}, 2000);
// Change Slider to automatically each 3 second.
setInterval(function(){
var navs = $(".slider-nav > div");
var cur = $(".slider-nav > .active").index();
var nxt = (cur + 1) % navs.length;
console.log(nxt);
setActive(navs.eq(nxt));
}, 3000);
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.nav {
position: fixed;
top: 0;
left: 0;
z-index: 9;
padding: 40px;
color: white;
}
.nav h1 {
font-weight: 300;
font-size: 3rem;
}
.nav .author {
text-align: right;
}
.loading {
background-color: #2ecc71;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 600px;
line-height: 600px;
text-align: center;
color: white;
font-size: 2rem;
}
.slider {
background-color: white;
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
display: none;
}
.slider-inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
-webkit-transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1);
transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1);
-webkit-transition-duration: 1s;
transition-duration: 1s;
background-visibility: hidden;
-webkit-transition-delay: .75s;
transition-delay: .75s;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.slide {
position: absolute;
top: 0;
height: 100%;
background-color: #f1c40f;
background-visibility: hidden;
-webkit-transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
-webkit-transform: translateZ(0) scale(0.8, 0.8);
transform: translateZ(0) scale(0.8, 0.8);
-webkit-transition-duration: .5s;
transition-duration: .5s;
text-align: center;
line-height: 600px;
font-size: 5rem;
color: white;
}
.slide.active {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition-delay: 2s;
transition-delay: 2s;
}
.slide:nth-child(2n) {
background-color: #2ecc71;
}
.slide:nth-child(3n) {
background-color: #3498db;
}
.slide:nth-child(4n) {
background-color: #9b50ba;
}
.slider-nav {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 20px;
text-align: center;
}
.slider-nav > div {
float: left;
width: 10px;
height: 10px;
border: 1px solid white;
z-index: 2;
display: inline-block;
margin: 0 10px;
cursor: pointer;
border-radius: 50%;
opacity: .5;
-webkit-transition-duration: .25s;
transition-duration: .25s;
background-color: transparent;
}
.slider-nav > div:hover {
opacity: 1;
}
.slider-nav > div.active {
background-color: white;
-webkit-transform: scale(2);
transform: scale(2);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<nav class="nav">
<h1> slider</h1>
<p class="author">by Atishay Khare</p>
</nav>
<div class="loading">
Loading...
</div>
<div class="slider">
<div class="slider-inner">
<div class="slide active">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
<div class="slide">2</div>
<div class="slide">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
<div class="slide">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
<nav class="slider-nav">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</nav>
</div>
Set an interval. You can invoke automatically and reset with click event of a slide. Recall startAuto() to reset as there is a clearTnteval() added.
var Auto;
function startAuto() {
clearInterval(Auto);
Auto = setInterval(function(){
element = $(".middle-slider-nav .active").next();
setActive(element);
}, 3000);
}