I have the following page and I am using a JavaScript with jQuery to control the animations. However, the current code toggles all animations when the page is loaded. What I want to do is toggle the animation, when the parent div of the element is visible in the viewport. So my first thought was 'registering' the .half-width as allModifications, but this would exclude the last list.
Can someone help me and give me a best practice on which element I should register this 'listener', so that each element gets toggled seperately?
Little example: When the first list gets 'visible', it should be animated by the script. The second list should not be animated, first when it gets visible too.
//this is only to make the scroll arrow work
$(document).on('click', 'a[href^="#"]', function (event) {
//prevent direct jump to the linked element
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
//this function determines wether an element is visible on the current viewport or not
(function($) {
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
var win = $(window);
var allModifications = $(".container");
//make elements visible that get scrolled into the viewport
win.scroll(function(event) {
var current = 1;
var current2 = 1;
allModifications.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.find(".half-width-text").addClass("open");
el.find(".list-div ul li").each(function(){
$(this).addClass("animate").css("animation-delay", current + 's');
current++;
});
el.find(".list-div2 ul li").each(function(){
$(this).addClass("animate").css("animation-delay", current2 + 's');
current2++;
});
}
});
});
body {
margin:0;
}
.container {
display:flex;
flex-wrap:wrap;
height:100vh;
background-color: white;
}
.container > div {
min-height: 100vh;
border: 1px solid black;
box-sizing:border-box;
background-color: inherit;
}
.container > div > a > .dot{
position: relative;
transition: background .2s linear;
left: 50%;
bottom: 10%;
z-index: 101;
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
}
.container > div > a > .dot > .arrow-down {
transition: border .2s linear;
position: absolute;
top:11%;
left: 24%;
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 5px;
}
.container > div > a .dot:hover{
background: black;
}
.container > div > a .dot:hover > .arrow-down{
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 5px;
}
.container > div > a > .dot > .arrow-down{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.container > div .content{
height: 100vh;
width: 100vw;
background-color: inherit;
}
.full-width {
width:100%;
}
.half-width {
width:50%;
}
.video-iframe.fullsize{
height: 100%;
width: 100%;
}
.list{
text-align: center;
}
.half-width > .half-width-content{
position: relative;
margin-top: 0;
height: 100%;
width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow{
position: relative;
height: 100%;
width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow > img{
position: absolute;
width: 60%;
height: 60%;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
/*left: 50%;
top:50%;*/
visibility: visible;
text-align: center;
/*-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);*/
}
.half-width > .half-width-content > .half-width-text {
/*position: absolute;
left: 50%;
top: 50%;*/
visibility: visible;
/*-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);*/
padding-left: 50px;
padding-right: 50px;
}
.half-width#section2 > .half-width-content, .half-width#section3 > .half-width-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.half-width > .half-width-content > h1{
position: relative;
text-align: center;
/*top: 15%;*/
}
.half-width > .half-width-content > .half-width-text.open{
visibility: visible;
top: 50%;
}
.half-width-text > .middle-text{
margin-left: -30px;
}
.list-div {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.list-div ul {
padding: 0;
width: 75%;
}
.list-div li {
position: relative;
display: block;
margin-bottom: 5px;
padding: 10px;
text-align: left;
visibility: hidden;
text-transform: uppercase;
}
.list-div li:nth-child(1){
background: url(https://fakeimg.pl/30x30/?text=A);
list-style-type: none;
margin: 0;
padding: 10px 10px 10px 48px;
vertical-align: middle;
background-repeat: no-repeat;
background-position-y: 50%;
}
.list-div li:nth-child(2){
background: url(https://fakeimg.pl/30x30/?text=B);
list-style-type: none;
margin: 0;
padding: 10px 10px 10px 48px;
vertical-align: middle;
background-repeat: no-repeat;
background-position-y: 50%;
}
.list-div li:nth-child(3){
background: url(https://fakeimg.pl/30x30/?text=C);
list-style-type: none;
margin: 0;
padding: 10px 10px 10px 48px;
vertical-align: middle;
background-repeat: no-repeat;
background-position-y: 50%;
}
.list-div li:nth-child(4){
background: url(https://fakeimg.pl/30x30/?text=D);
list-style-type: none;
margin: 0;
padding: 10px 10px 10px 48px;
vertical-align: middle;
background-repeat: no-repeat;
background-position-y: 50%;
}
.list-div li.animate{
visibility: visible;
animation: fadeIn 1s linear;
animation-fill-mode: both;
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
top: 220px;
}
25%{
opacity: 0.3;
}
75% {
opacity: 0.5;
top: 0px;
}
100% {
opacity: 1;
}
}
.full-width > .content > .third-parent{
height: 100%;
display: flex;
}
.full-width > .content > .third-parent > .third{
position: relative;
flex: 1 1 0px;
border: 1px solid black;
width: 100%;
}
.full-width > .content > .third-parent > .third > img{
/*position: absolute;
width: 100%;
left: 50%;
top:50%;*/
visibility: visible;
text-align: center;
/*-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);*/
}
.middle-text{
position: absolute;
width: 100%;
left: 50%;
top:50%;
visibility: visible;
text-align: center;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.full-width > .content > .third-parent > .third > .middle-text > .list-div2{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.full-width > .content > .third-parent > .third > .middle-text > .list-div2 li{
position: relative;
display: block;
border: 1px solid red;
margin-bottom: 5px;
padding: 10px;
text-align: left;
text-transform: uppercase;
visibility: hidden;
}
.list-div2 li::before{
content: '\2022';
margin-right: 10px;
}
.items-list2 {
margin: 0;
padding: 0;
}
.full-width > .content > .third-parent > .third > .middle-text > .list-div2 li.animate{
visibility: visible;
animation: fadeIn 1s linear;
animation-fill-mode: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="full-width">
<iframe class="video-iframe fullsize" src="https://www.youtube.com/embed/osg9PmkfTB0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<a href="#section2">
<span class="dot">
<i class="arrow-down"></i>
</span>
</a>
</div>
<div class="half-width" id="section2">
<div class="half-width-content">
<h1>Headline</h1>
<div class="half-width-text">
<div class="text-content">
<p>Some text
</p>
</div>
</div>
</div>
</div>
<div class="half-width">
<div class="half-width-content">
<div class="instagram-slideshow" id="1">
<img class="slide" src="https://placeimg.com/640/480/animals">
</div>
</div>
</div>
<div class="half-width">
<div class="half-width-content">
<div class="instagram-slideshow" id="2">
<img class="slide" src="https://fakeimg.pl/350x200/?text=Hello">
<img class="slide" src="https://fakeimg.pl/350x200/?text=Bye">
<img class="slide" src="https://fakeimg.pl/350x200/?text=BLA">
</div>
</div>
</div>
<div class="half-width">
<div class="half-width-content">
<div class="middle-text">
<h2>Headline</h2>
<div class="list-div">
<ul class="items-list" id="list">
<li>Entry A</li>
<li>Entry B</li>
<li>Entry C</li>
<li>Entry D</li>
</ul>
</div>
</div>
</div>
</div>
<div class="full-width">
<div class="content">
<div class="third-parent">
<div class="third" id="one">
<img src="https://fakeimg.pl/350x200/?text=right">
</div>
<div class="third" id="two">
<div class="middle-text">
<h1>Headline</h1>
<div class="list-div2">
<ul class="items-list2" id="list">
<li>Entry A</li>
<li>Entry B</li>
<li>Entry C</li>
<li>Entry D</li>
</ul>
</div>
</div>
</div>
<div class="third" id="three">
<img src="https://fakeimg.pl/350x200/?text=left">
</div>
</div>
</div>
</div>
</div>
You could use the Waypoint library to perform actions when the selected item is visible.
[Once you have downloaded the library][1]
[1]: https://github.com/imakewebthings/waypoints/zipball/latest and included the file "noframework.waypoints.min.js" in your html file:
<script src="/path/to/noframework.waypoints.min.js"></script>
You need to use this syntax to trigger the event.
var waypoint = new Waypoint({
element: document.getElementById('basic-waypoint'),
handler: function() {
notify('Basic waypoint triggered')
}
})
Related
hello I made a menu button and a menu but I don't know how to link them together when you click on the menu button the menu appears from the top to the center which starts with 0% opacity and gets to 100% opacity when you click on the menu button the menu closes and fades away I will appreciate if you can help me
Here is the code
var menu = document.getElementById("menu");
menu.onclick = function(){
menu.classList.toggle("openmenu");
}
body{
background-color: #333;
}
a{
text-decoration: none;
color: inherit
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu{
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
border-radius: 10px;
cursor: pointer;
}
.menu div{
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span{
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1{
transform: translate(-50%, -12.5px);
}
.menu .line-3{
transform: translate(-50%, 10px);
}
.openmenu .line-1{
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3{
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2{
width: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2{
background: #333;
width: 100%;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
}
nav{
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after{
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover{
color: #fff;
}
nav ul li:hover::after{
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>
basically what i did was gave container 2 an active class when click on menu.and defined container2.active in the css.
making it display block in the first place and flex when active
var menu = document.getElementById("menu");
const nav = document.getElementsByClassName("container2")[0];
menu.addEventListener("click", () => {
menu.classList.toggle("openmenu");
nav.classList.toggle("active");
})
body {
background-color: #333;
}
a {
text-decoration: none;
color: inherit
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu {
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6);
border-radius: 10px;
cursor: pointer;
}
.menu div {
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span {
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1 {
transform: translate(-50%, -12.5px);
}
.menu .line-3 {
transform: translate(-50%, 10px);
}
.openmenu .line-1 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3 {
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2 {
width: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2 {
background: #333;
width: 100%;
height: 100vh;
display: none;
align-items: flex-start;
justify-content: center;
}
.container2.active {
display: flex;
}
nav {
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after {
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6);
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover {
color: #fff;
}
nav ul li:hover::after {
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2 ">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>
i am interested in a carousel animation. so far it reacts to hover. So when I go to the second or third element, these areas enlarge and more information is shown. the areas should also open up one after the other or react as if you were driving across the other two areas. i was looking for slides and carousel animation but i don't know exactly what to look for.
$(document).ready(function () {
$(".bloc").hover(function () {
$(this).toggleClass("active"); //Toggle the active class to the area is hovered
$('.first').toggleClass("active"); //Toggle the active class to the area is hovered
});
});
#import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
#import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');
body {
margin: 0;
}
.container {
width: 100%;
height: 100vh;
}
ul {
margin: 0;
padding: 0;
}
ul li {
position: relative;
display: inline-flex;
columns: 3;
width: calc(25% - 22px);
height: calc(100vh - 20px);
margin: 10px;
background-size: cover;
background-position: center center;
transition: .5s all ease-in-out;
overflow: hidden;
}
ul li .bloc {
position: relative;
overflow: hidden;
}
ul li .content {
opacity: 0;
left: 40px;
bottom: 40px;
position: absolute;
border-left: 6px solid #FFF;
padding-left: 20px;
transition: .2s all;
user-select: none;
}
ul li .content H2 {
letter-spacing: 5px;
color: #FFF;
font-size: 35px;
margin: 0;
}
ul li .content H3 {
font-weight: 400;
color: #FFF;
font-size: 25px;
margin: 0;
}
.active .content {
opacity: 1;
transition: 2s all;
transition-delay: .5s;
}
ul li .bloc::before {
opacity: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.active {
position: relative;
width: calc(50% - 22px);
transition: .5s all ease-in-out;
}
.active::before {
top: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.first {
background: red;
}
.second {
background: red;
}
.third {
float: right;
background: red;
}
#keyframes opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class="bloc first active">
<div class="content">
<H2>First title</H2>
<H3>It's a first subtitle</H3>
</div>
</li>
<li class="bloc second">
<div class="content">
<H2>Second title</H2>
<H3>Subtitle</H3>
</div>
</li>
<li class="bloc third">
<div class="content">
<H2>Third title</H2>
<H3>Last subtitle</H3>
</div>
</li>
</ul>
</div>
to describe it better, I added a gif animation of how the elements should behave.
You can use setInterval to create a continuous animation and temporarily stop that interval when the user hovers over one of the slides.
$(document).ready(function() {
const animation = () => {
const activeCarouselElement = $('.bloc.active');
activeCarouselElement.removeClass('active');
const nextCarouselElement = activeCarouselElement.next().length ? activeCarouselElement.next() : activeCarouselElement.siblings()[0];
$(nextCarouselElement).addClass('active');
};
let animationInterval = setInterval(animation, 3500);
$(".bloc").hover(function() {
$('.bloc.active').removeClass("active");
$(this).addClass("active");
clearInterval(animationInterval);
});
$(".bloc").mouseleave(function() {
animationInterval = setInterval(animation, 3500);
});
});
#import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
#import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');
body {
margin: 0;
}
.container {
width: 100%;
height: 100vh;
}
ul {
margin: 0;
padding: 0;
}
ul li {
position: relative;
display: inline-flex;
columns: 3;
width: calc(25% - 22px);
height: calc(100vh - 20px);
margin: 10px;
background-size: cover;
background-position: center center;
transition: .5s all ease-in-out;
overflow: hidden;
}
ul li .bloc {
position: relative;
overflow: hidden;
}
ul li .content {
opacity: 0;
left: 40px;
bottom: 40px;
position: absolute;
border-left: 6px solid #FFF;
padding-left: 20px;
transition: .2s all;
user-select: none;
}
ul li .content H2 {
letter-spacing: 5px;
color: #FFF;
font-size: 35px;
margin: 0;
}
ul li .content H3 {
font-weight: 400;
color: #FFF;
font-size: 25px;
margin: 0;
}
.active .content {
opacity: 1;
transition: 2s all;
transition-delay: .5s;
}
ul li .bloc::before {
opacity: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.active {
position: relative;
width: calc(50% - 22px);
transition: .5s all ease-in-out;
}
.active::before {
top: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.first {
background: red;
}
.second {
background: red;
}
.third {
float: right;
background: red;
}
#keyframes opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class="bloc first active">
<div class="content">
<H2>First title</H2>
<H3>It's a first subtitle</H3>
</div>
</li>
<li class="bloc second">
<div class="content">
<H2>Second title</H2>
<H3>Subtitle</H3>
</div>
</li>
<li class="bloc third">
<div class="content">
<H2>Third title</H2>
<H3>Last subtitle</H3>
</div>
</li>
</ul>
</div>
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 have a timeline like this. But if there are a lot of points, it does not look very nice. How can I add functionality like a slider? To be displayed (only the first 5 years) and the rest to appear after the transition between years.
How can i do this? Or maybe there are some libraries with such functionality.
function initProgress() {
var activeDist = $(".slide a.active").position();
activeDist = activeDist.left;
$(".after").stop().animate({
width: activeDist + "px"
});
}
initProgress();
$("a").click(function(e) {
e.preventDefault();
$(".slide a").removeClass("active");
$(this).addClass("active");
initProgress();
});
$(window).resize(function() {
initProgress();
});
body {
background: royalblue;
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container .before,
.container .after {
z-index: -1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -3px;
height: 4px;
background: cornflowerblue;
}
.container .after {
width: 50%;
background: white;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
top: 50%;
bottom: 0;
margin-top: -3px;
width: 44px;
height: 4px;
background-color: green;
}
.container:before {
left: 0;
background: white;
background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
}
.container:after {
right: 0;
background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
}
.timeline {
display: table;
table-layout: fixed;
margin-top: 60px;
width: 100%;
}
.time {
display: table-cell;
text-align: center;
}
.slide a {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
border: 2px solid white;
border-radius: 100%;
background: royalblue;
color: white;
transition: 0.3s all ease;
}
.slide a.active,
.slide a:hover {
border-color: white;
background: white;
}
a.deactive {
border: none;
width: 0px;
}
.slide i {
display: block;
position: absolute;
top: -40px;
left: -12px;
width: 30px;
height: 30px;
border-radius: 100%;
line-height: 30px;
color: white;
font-style: normal;
font-size: 11px;
}
.slide span {
display: none;
opacity: 0;
display: block;
position: fixed;
top: 150px;
left: 0;
right: 0;
color: white;
}
a.active>i {
transform:scale(5);
}
a.active~span {
display: block;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="before"></div>
<div class="after"></div>
<div class="container__track timeline">
<div class="slide time">
<a class="" href=""><i>1979</i></a><span> 1979 </span>
</div>
<div class="slide time">
<a class="active" href=""><i>1980</i></a><span> 1980 </span>
</div>
<div class="slide time">
<i>1981</i><span> 1981 </span>
</div>
<div class="slide time">
<i>1983</i><span> 1983 </span>
</div>
<div class="slide time">
<i>1984</i><span> 1984 </span>
</div>
</div>
</div>
I transparent the color of the scroll on the horizontal if you want to change it according to your taste
.slides :: - webkit-scrollbar-thumb {
background: transparent;
border-radius: 10px;
}
function initProgress() {
var activeDist = $(".slide a.active").position();
activeDist = activeDist.left;
$(".after").stop().animate({
width: activeDist + "px"
});
}
initProgress();
$("a").click(function(e) {
$(".slide a").removeClass("active");
$(this).addClass("active");
initProgress();
});
$(window).resize(function() {
initProgress();
});
* {
box-sizing: border-box;
}
.slider {
width: 100%;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 0px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide > a {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
border: 2px solid white;
border-radius: 100%;
background: royalblue;
color: white;
transition: 0.3s all ease;
}
.slide > a > i {
display: block;
position: absolute;
top: -40px;
left: -12px;
width: 30px;
height: 30px;
border-radius: 100%;
line-height: 30px;
color: white;
font-style: normal;
font-size: 11px;
}
.slide a.active,
.slide a:hover {
border-color: white;
background: white;
}
.slide a.deactive {
border: none;
width: 0px;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74ABE2, #5563DE);
font-family: 'Ropa Sans', sans-serif;
}
.slide span {
display: none;
opacity: 0;
display: block;
position: fixed;
top: 150px;
left: 0;
right: 0;
color: white;
}
.slide a.active>i {
transform:scale(5);
}
.slide a.active~span {
display: block;
opacity: 1;
}
.time {
display: table-cell;
text-align: center;
}
.container {
position: relative;
}
.container .before,
.container .after {
z-index: -1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -3px;
height: 4px;
background: cornflowerblue;
}
.container .after {
width: 50%;
background: white;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
top: 50%;
bottom: 0;
margin-top: -3px;
width: 44px;
height: 4px;
background-color: green;
}
.container:before {
left: 0;
background: white;
background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
}
.container:after {
right: 0;
background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
}
.timeline {
display: table;
table-layout: fixed;
margin-top: 60px;
width: 100%;
}
<div class="slider">
<div class="container">
<div class="before"></div>
<div class="after"></div>
<div class="container__track timeline">
<div class="slide time">
<i>1979</i>
</div>
<div class="slide time">
<i>1980</i>
</div>
<div class="slide time">
<i>1981</i>
</div>
<div class="slide time">
<i>1982</i>
</div>
<div class="slide time">
<i>1983</i>
</div>
<div class="slide time">
<i>1984</i>
</div>
</div>
</div>
<div class="slides">
<div id="slide-1">
<span> 1979 </span>
</div>
<div id="slide-2">
<span> 1980 </span>
</div>
<div id="slide-3">
<span> 1981 </span>
</div>
<div id="slide-4" >
<span> 1982 </span>
</div>
<div id="slide-5">
<span> 1983 </span>
</div>
<div id="slide-6">
<span> 1984 </span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I'm trying to make slideshow images i'm learning step by step for now i want to know how to position text at center of the images then making images overlay in one position.Please take a look at my code (i'm sorry for my english) thank you.
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#slider{
overflow-x: hidden;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 450px;
overflow-x: hidden;
}
.slide-contain {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header></header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>
Topics
<div id="sub-topics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="arrow-left" class="arrow"></div>
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
I'm trying to make slideshow images i'm learning step by step for now i want to know how to position text at center of the images then making images overlay in one position.Please take a look at my code (i'm sorry for my english) thank you.
I had added some code to these two classes.
Now your caption will be in the centre
Happy Coding
.slide {
position:relative;
}
.slide-contain {
position:absolute;
bottom:50%;
left:50%;
transform: translate3d(-50%,-50%,0);
background:#efefef;
}
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#slider{
overflow-x: hidden;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 450px;
overflow-x: hidden;
position:relative;
}
.slide-contain {
text-align: center;
position:absolute;
bottom:50%;
left:50%;
transform: translate3d(-50%,-50%,0);
background:#efefef;
}
<header></header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>
Topics
<div id="sub-topics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="arrow-left" class="arrow"></div>
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
Your text is already over the background image. You just need to add background-position. Try this code.
body {
margin: 0;
}
li,
a {
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1,
#column2,
#column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#slider {
overflow-x: hidden;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
background-position: left top;
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
background-position: left top;
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
background-position: left top;
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 450px;
overflow-x: hidden;
position: relative;
}
.slide-contain {
text-align: center;
color: white;
position: relative;
height: 100%;
width: 100%;
}
.slide-contain span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}