I'm trying to make a progress bar that looks like emptying glass of beer. Unfortunately I'm not very artistic person but I'm doing my best.
My concept goes like this:
There is a <div> with "beer" background, 100% high vertically. It hides any overflow
Inside there's another <div>, positioned relatively to the parent. It contains:
White background <div> to obscure "beer" pattern when it's gone
The image of beer foam cap
Here's the concept on picture:
I almost succeeded in my goal, as you can see in this snippet:
Note: the animation requires ES6 async/await
Promise.timeout = function (delay) {
return new Promise((resolve) => {
setTimeout(resolve, delay);
});
};
Promise.animationFrame = function () {
return new Promise((resolve) => {
requestAnimationFrame(resolve);
});
};
(async function () {
const progress = document.querySelector("div.top");
for (let i = 0, l = 1000; i < l; ++i) {
progress.style.bottom = (100 - i / 10) + "%";
await Promise.animationFrame();
}
})();
html, body, div {
margin: 0px;
padding: 0px;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
div.progress {
max-width:300px;
width: 100vw;
float: left;
position: relative;
overflow: hidden;
height: 100%;
background-image: url("https://i.imgur.com/SKfSqEv.jpg");
background-size: 500px;
border-right: 1px solid black;
}
div.progress div.top {
height: 100vh;
position: relative;
bottom: 100%;
}
div.progress div.top div.white{
background-color: white;
width:100%;
height:100%;
}
div.progress div.top div.beer-top {
/*background-image is at the bottom since it is bse64 */
background-repeat: repeat-x;
background-position-y: bottom;
background-position-x: left;
background-size: 302px, 100px;
height: 100px;
}
/*div.progress div.top {
background-position: bottom;
height: 100%;
background-image: url("img/beer-top.png");
}*/
div.main {
float: left;
}
div.progress div.top div.beer-top {
background-image: url('https://preview.ibb.co/k2x2V6/beer_top.png');
}
<div class="progress">
<div class="top">
<div class="white"></div>
<div class="beer-top"></div>
</div>
<!--<div class="progress-area">
</div>-->
</div>
<div class="main">
</div>
But there are two big issues:
This ugly orange line:
Because I set div.white height to 100%, the foam is pushed down and is visible even at "100%" state. It also disappears completely at the end. The desired state is this:
How to fix those two issues?
I'm looking for CSS only solution, so that the bar can be displayed statically as well (eg. at 40% when the page loads without javascript).
Also note: setting the foam as background for the "white div" is not an option, because the bottom of the foam image is transparent.
Because there was a need for a CSS only solution. You could add the foam to your 'white' div as a background and a white gradient (ofcourse some tweeking is needed with the image to show up perfectly).
See JSfiddle:
Promise.timeout = function (delay) {
return new Promise((resolve) => {
setTimeout(resolve, delay);
});
};
Promise.animationFrame = function () {
return new Promise((resolve) => {
requestAnimationFrame(resolve);
});
};
(async function () {
const progress = document.querySelector("div.top");
for (let i = 0, l = 1000; i < l; ++i) {
progress.style.bottom = (100 - i / 10) + "%";
await Promise.animationFrame();
}
})();
html, body, div {
margin: 0px;
padding: 0px;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
div.progress {
max-width:300px;
width: 100vw;
float: left;
position: relative;
overflow: hidden;
height: 100%;
background-image: url("https://i.imgur.com/SKfSqEv.jpg");
background-size: 500px;
border-right: 1px solid black;
}
div.progress div.top {
height: 100vh;
position: relative;
bottom: 100%;
}
div.progress div.top div.white{
background-color: white;
width:100%;
height:100%;
}
div.progress div.top div.beer-top {
/*background-image is at the bottom since it is bse64 */
background-repeat: repeat-x;
background-position-y: bottom;
background-position-x: left;
background-size: 302px, 100px;
height: 100px;
}
/*div.progress div.top {
background-position: bottom;
height: 100%;
background-image: url("img/beer-top.png");
}*/
div.main {
float: left;
}
div.progress div.top div.beer-top {
background-image: url('https://preview.ibb.co/k2x2V6/beer_top.png');
}
.top {
background: no-repeat;
background-position: bottom;
background-image: url('https://preview.ibb.co/k2x2V6/beer_top.png'),linear-gradient(to top, rgba(0,0,0,0) 1%, rgba(255,255,255,1) 5%);
}
<div class="progress">
<div class="top">
</div>
<!--<div class="progress-area">
</div>-->
</div>
<div class="main">
</div>
So the fixes I figured out were:
Add margin-top: -1 to div.beer-top to erase the orange line. The white and foam divs now overlap, so the div under then doesn't shine through.
Use display: flex to make the div.white fill all space except the div.beer-tops space.
div.progress div.top {
height: 100%;
position: relative;
bottom: 100%;
/**Modern flexbox layout*/
display: flex;
flex-direction: column;
}
div.progress div.top div.white{
background-color: white;
width:100%;
/*fill remaining space*/
flex-grow: 1;
}
Promise.timeout = function (delay) {
return new Promise((resolve) => {
setTimeout(resolve, delay);
});
};
Promise.animationFrame = function () {
return new Promise((resolve) => {
requestAnimationFrame(resolve);
});
};
(async function () {
const progress = document.querySelector("div.top");
for (let i = 0, l = 1000; i < l; ++i) {
progress.style.bottom = (100 - i / 10) + "%";
await Promise.animationFrame();
}
})();
html, body, div {
margin: 0px;
padding: 0px;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
div.progress {
max-width:300px;
width: 100vw;
float: left;
position: relative;
overflow: hidden;
height: 100%;
background-image: url("https://i.imgur.com/SKfSqEv.jpg");
background-size: 500px;
border-right: 1px solid black;
}
div.progress div.top {
height: 100%;
position: relative;
bottom: 100%;
/**Modern flexbox layout*/
display: flex;
flex-direction: column;
}
div.progress div.top div.white{
background-color: white;
width:100%;
/*fill remaining space*/
flex-grow: 1;
}
div.progress div.top div.beer-top {
/*background-image is at the bottom since it is bse64 */
background-repeat: repeat-x;
background-position-y: bottom;
background-position-x: left;
background-size: 302px, 100px;
height: 100px;
/** this should hide the blinking orange line atop*/
margin-top:-2px;
}
/*div.progress div.top {
background-position: bottom;
height: 100%;
background-image: url("img/beer-top.png");
}*/
div.main {
float: left;
}
div.progress div.top div.beer-top {
background-image: url('https://preview.ibb.co/k2x2V6/beer_top.png');
}
<div class="progress">
<div class="top">
<div class="white"></div>
<div class="beer-top"></div>
</div>
<!--<div class="progress-area">
</div>-->
</div>
<div class="main">
</div>
Related
Just like the above image or an idea or reference to achieve this design, I appreciate the help or suggestion given by community thank you
I have got reference of progress bar which is circular but not able find an approach to solve it.
const boxes = document.querySelectorAll(".box");
const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'violet']
boxes.forEach((box) => {
const insideContent = box.innerText;
box.style.border = `6px solid ${colors[insideContent]}`
})
#app {
display: flex;
}
.box {
width: 50px;
height: 50px;
margin: 10px;
background-color: cyan;
display: flex;
justify-content: center;
align-items: center;
}
<div id="app">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
As per your question I think this is what you are trying to achieve.
First define a pseudo class root
:root {
--color-val: blue;
}
Note: In order to use the --color-val you need to write it as color: var(--color-var) in CSS
Second use JavaScript to update the variable --color-val
let colors =
var root = document.querySelector(':root');
const delay = ms => new Promise(res => setTimeout(res, ms));
const colorChange = async () => {
await delay(1000);
color = colors[Math.floor(Math.random() * colors.length)]
console.log(color)
root.style.setProperty('--color-val', color);
};
colorChange()
Note:
Add the color list you want to select from or go to CodePen for a list of 1000+ hex codes.
Promise are used for asynchronous function and can be skipped by using setTimeOut for a delayed loop or if used with another eventlistener.
I apologize if I misunderstood the question. Wrote in a hurry and without beautyful visualisation, if you disassemble the principle, you can customize it.
h1 {
display: block;
margin:0 auto;
text-align: center;
padding-top:20%;
}
.container {
display:flex;
width: 150px;
height: 150px;
border: 1px solid black;
z-index: 110;
margin:0;
margin: -10px;
}
.top {
display:block;
background-color: green;
height: 24px;
width: 150px; /* gorizontal top */
animation: top 1s linear;
animation-fill-mode: forwards;
}
#keyframes top {
0% {
width: 0px;
}
100% {
width: 150px;
}
}
.right {
background-color: green;
height: 0%;/* right */
width: 32px;
animation: right 1s linear;
animation-fill-mode: forwards;
animation-delay: 1s;
z-index: 10;
}
#keyframes right {
0% {
height: 0%;
}
100% {
height: 100%;
}
}
.box {
position: fixed;
top: 32.5px;
left: 32.5px;
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
z-index: 120;
margin: -10px -10px;
}
.bottom {
position: absolute;
top: 123px;
left: 150px;
background-color: green;
width: 0px;
height: 27px;
z-index: 10;
animation: bottom 1s linear;
animation-fill-mode: forwards;
animation-delay: 2s;
/* animation-direction: reverse; */
}
#keyframes bottom {
0% {
transform: translate(0,0);
}
100% {
transform: translate(-250px,0);
-webkit-transform: translate(-250px,0); /** Safari & Chrome **/
-o-transform: translate(-250px,0); /** Opera **/
-moz-transform: translate(-250px,0); /** Firefox **/
width: 250px;
}
}
.left {
position: absolute;
top: 122px;
background-color: green;
width: 25px;
height: 0px;
animation: left 1s linear;
animation-fill-mode: forwards;
animation-delay: 3s;
}
#keyframes left {
0% {
transform: translate(0,0);
}
100% {
transform: translate(0,-250px);
-webkit-transform: translate(0,-250px); /** Safari & Chrome **/
-o-transform: translate(0,-250px); /** Opera **/
-moz-transform: translate(0,-250px); /** Firefox **/
height: 277px;
}
}
<div class='head'>
<div class='container'>
<div class='top'></div>
<div class='box'>
<h1 id='timer'>
1
</h1>
</div>
<div class='right'></div>
<div class='bottom'></div>
<div class='left'></div>
</div>
</div>
<script type="text/javascript">
init()
function init()
{
sec = 0;
setInterval(tick, 1000);
}
function tick()
{ if (sec<3) { sec++
document.getElementById("timer").
childNodes[0].nodeValue = sec;
} else {
clearInterval(0);
}
}
</script>
Also, instead of the SetInterval script, you can take values from your block width and height styles and output a mathematical calculation in h1 instead of a stopwatch.
upd: After your comment, I decided to do what I wrote about above. You can play with values and math, I add a snippet of another solution that changes the progress bar from the entered values within the entered range. (of course, it would be easier on react than on pure js)
function grade () {
let grade = +document.getElementById("grade").value;
let range = +document.getElementById("range").value;
document.getElementById("timer").innerHTML = `${grade}/${range}`;
progress(grade,range)
}
function progress (value, grade) {
document.getElementById('1').style.backgroundColor = `white`
document.getElementById("left").className = "noactive";
document.getElementById('top').style.width = `0%`
document.getElementById('right').style.height = `0%`
document.getElementById('bottom').style.width = `0%`
let GradeValuSide = grade/4;
if (value <= GradeValuSide) {
document.getElementById('top').style.width =
`${value/GradeValuSide*100}%`
} else if (value > GradeValuSide && value <= (GradeValuSide*2)) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height =
`${(value-GradeValuSide)/GradeValuSide*100}%`
} else if (value >= grade/2 && value < (grade/4)*3) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height = `100%`
document.getElementById('bottom').style.width =
`${((((value-(GradeValuSide*2)) / GradeValuSide) *100) / 100) *27}%`
} else if (value >= grade-(grade/4) /* && value < value + 1 */) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height = `100%`
document.getElementById('bottom').style.width = `100%`
document.getElementById('1').style.backgroundColor = `green`
document.getElementById("left").className = "left";
document.getElementById('left').style.height =
`${(40 - (40 * ((((value-(GradeValuSide*3)) * 100) / GradeValuSide)/ 100)))}%`
}
}
h1 {
font-size:20px;
position: absolute;
left: 40px;
display: block;
margin: 0 auto;
align-items: center;
padding-top:10%;
}
.container {
display:flex;
width: 150px;
height: 150px;
border: 1px solid black;
margin:0;
margin: -10px;
}
div.top {
display:block;
background-color: green;
height: 24px;
width: 0%; /* gorizontal top */
z-index:999;
}
div.right {
position:relative;
background-color: green;
height: 0%;/* right */
width: 32px;
z-index: 9999;
}
.box {
position: fixed;
top: 32.5px;
left: 32.5px;
background-color:white;
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
z-index: 120;
margin: -10px -10px;
}
.wrap{
position: relative;
}
div.bottom {
position: absolute;
top: 123px;
background-color: green;
width: 0%; /* 27 = 100% */
height: 27px;
float: right;
right: 78vw;
z-index: 100;
}
div.left {
position: absolute;
background-color: white;
width: 23px;
height: 40%;
top: 23px;
bottom: 10px;
left: 0;
float: top;
}
div.noactive {
position: absolute;
background-color: white;
width: 23px;
height: 0%;
top: 23px;
bottom: 10px;
left: 0;
float: top;
}
.items {
margin-top: 50px;
text-align: center;
}
.grade,
.value {
height: 15px;
width: 50px;
align-items: center;
}
<div class='head'>
<div id='1' class='container'>
<div id='top' class='top'></div>
<div class='box'>
<h1 id='timer'>1</h1>
<div class='items'>
value<input id='grade' class='grade' type=number oninput="grade()"/>
range<input id='range' class='value' type=number oninput="grade()"/>
</div>
</div>
<div id='right' class='right'></div>
<div id='bottom' class='bottom'></div>
<div id='left' class='noactive'></div>
</div>
</div>
<script src='app.js'></script>
I am building a website with a lot of images. On the sidebar is a text (which stays in place with position: sticky), I would like it to change its color from black to white while overlapping the images it passes while scrolling down the webpage. How do I do that?
I found a Codepen-example, doing exactly this. But it's complicated to extract the requested code since the Javascript also handles a scrolling animation.
https://codepen.io/Atise/pen/WNOmyxY
My sidenav functions like this one: https://codepen.io/clairecodes/pen/bvWKdr
I have given this a second thought: The problem with this approach is that it won't work on an ordinary website while scrolling through its length vertically. The white text should only be visible when approached by the navbar. To make this work, the images needs to have some trigger that shows the text (.section-title.on-dark) only when being approached by the navbar.
<div class="outer-container">
<div class="image-container" style="background-image: url('https://images.unsplash.com/photo-1570528812862-9984124e7e22?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
<style>
body {
margin: 0;
min-height: 3000px;
font-family: 'Montserrat', sans-serif;
}
.outer-container {
max-width: 600px;
margin: auto;
width: 90%;
padding: 200px 0px;
position: relative;
}
.image-container {
padding-bottom: 100%;
background: black;
position: relative;
overflow: hidden;
z-index: 2;
background-size: cover;
background-position: center;
}
.section-title {
margin: 0;
font-size: 64px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: -30%;
transform: translateY(-50%);
z-index: 1;
white-space: nowrap;
}
.section-title.on-dark {
color: white;
}
.section-title span {
position: relative;
display: block;
}
</style>
<h2 class="section-title on-dark">
<span class="paralax-title">
Live The Adventure
</span>
</h2>
</div>
<h2 class="section-title">
<span class="paralax-title">
Live The Adventure
</span>
</h2>
</div>
<script>
let didScroll = false;
let paralaxTitles = document.querySelectorAll('.paralax-title');
const scrollInProgress = () => {
didScroll = true
}
const raf = () => {
if(didScroll) {
paralaxTitles.forEach((element, index) => {
element.style.transform = "translateX("+ window.scrollY / 10 + "%)"
})
didScroll = false;
}
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
window.addEventListener('scroll', scrollInProgress)
</script>
You're prebably looking for mix-blend-mode.
.bg {
width: 200vw;
height: 200vh;
background-image: url(https://images.pexels.com/photos/7718429/pexels-photo-7718429.jpeg);
background-size: cover;
}
.text {
margin: 0;
font-size: 50px;
position: fixed;
color: white;
mix-blend-mode: difference;
}
<div class="bg">
<h1 class="text">Lorem Ipsum</h1>
</div>
There are values other that difference. Read the MDN Docs and find the value that best suits your website.
This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 3 years ago.
I was trying to get an overlay that darkens as I scroll down so that it hides the <body> background but it is darkening on top of both the <body> and the <div> element that is supposed to be on top (has a higher z-index value) of it. I'd really appreciate if someone could tell me what I'm doing wrong here.
HTML:
<div id="background-overlay" class="scroll"></div>
<div id="div1" class="scroll">
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image:
url('https://c4.wallpaperflare.com/wallpaper/209/417/77/pyramid-
history-sky-landmark-wallpaper-6930e82dc12a0d8bc657389f9011062d.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 100vw;
height: 100vh;
background-attachment: fixed;
z-index: -10;
}
#div1 {
margin: 0 auto;
width: 80vw;
height: 1000vh;
background-color: rgb(71, 38, 0);
color: white;
text-align: center;
z-index: 100;
}
div#background-overlay {
background-color: black;
width: 100vw;
height: 100vh;
opacity: 0;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
JS:
var scrollDiv = document.querySelectorAll('.scroll');
window.addEventListener('scroll', function() {
scrollDiv.forEach(element => {
if(element.id == 'background-overlay') {
scrollOverlay = window.pageYOffset *.0005;
element.style.opacity = scrollOverlay;
}
})
});
Just add position: relative to your #div1.
var scrollDiv = document.querySelectorAll('.scroll');
window.addEventListener('scroll', function() {
scrollDiv.forEach(element => {
if(element.id == 'background-overlay') {
scrollOverlay = window.pageYOffset *.0005;
element.style.opacity = scrollOverlay;
}
})
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url('https://c4.wallpaperflare.com/wallpaper/209/417/77/pyramid-history-sky-landmark-wallpaper-6930e82dc12a0d8bc657389f9011062d.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 100vw;
height: 100vh;
background-attachment: fixed;
z-index: -10;
}
#div1 {
margin: 0 auto;
width: 80vw;
height: 1000vh;
background-color: rgb(71, 38, 0);
color: white;
text-align: center;
z-index: 100;
position: relative;
}
p {
padding-top: 150px;
}
div#background-overlay {
background-color: black;
width: 100vw;
height: 100vh;
opacity: 0;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
<div id="background-overlay" class="scroll"></div>
<div id="div1" class="scroll">
</div>
For information on how z-index behaves for positionsfixed, absolute and relative, please have a look at this excellent reference:
https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
I have a parent div that contains 4 equal divs (25% each), horizontally side by side, containing an image. I want the div to expand on click, such that the div animates to cover the whole parent div (100% width). And then some text animates in over the image.
I'm trying to do this via flex box in css, but even though the clicked div expands it doesn't cover the complete parent div. The remaining 3 div shrink but do not completely disappear.
I also tried doing this via Javascript, by adding the property display: none to all the other divs. However, this doesn't allow me to add any animations.
<div class="expand-column-wrapper">
<div class="expanded-column">
<h3 class="expand-column-header">Sustainable
Living</h3>
<p class="expand-column-content">Hello there.</p>
</div>
<div class="expanded-column">
<h3 class="expand-column-header">Protecting Society</h3>
<p class="expand-column-content">If you hover</p>
</div>
<div class="expanded-column">
<h3 class="expand-column-header">Health and Wellness</h3>
<p class="expand-column-content">over each section</p>
</div>
<div class="expanded-column">
<h3 class="expand-column-header">Digital Communities</h3>
<p class="expand-column-content">over each section</p>
</div>
</div>
$white: white;
$expand-column-transition: all 1s ease-in-out;
$expand-column-background-color: #2c3840;
$expand-column-hover-width: 100%;
$expand-column-fluid: true;
.customDisplay{
display: none !important;
}
.expand-column-wrapper {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.expanded-column {
padding: 1rem;
flex: 1 1 5%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: $expand-column-transition;
&:hover{
cursor: pointer;
}
}
.expand-column-header, .expand-column-content {
color: $white;
}
.expand-column-header {
width: 100%;
text-align: center;
}
.expand-column-content {
font-weight: bold;
opacity: 0;
flex-basis: 1%;
}
}
.tempClass{
flex-basis: $expand-column-hover-width;
.expand-column-content {
opacity: 1;
flex-basis: 50%;
transition: $expand-column-transition;
}
}
.expand-column-wrapper .expanded-column {
&:nth-of-type(1) {
background: url('https://images.pexels.com/photos/2154/sky-lights-space-dark.jpg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
}
&:nth-of-type(2) {
background: url('https://images.pexels.com/photos/113744/helix-nebula-ngc-7293-planetary-fog-constellation-aquarius-113744.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
}
&:nth-of-type(3) {
background: url('https://images.pexels.com/photos/2162/sky-space-dark-galaxy.jpg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
}
&:nth-of-type(4) {
background: url('https://images.pexels.com/photos/41951/solar-system-emergence-spitzer-telescope-telescope-41951.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
}
}
$('.expanded-column').click(function (){
var listL = $('.expanded-column');
var listLen = listL.length;
for(i = 0; i < listLen; i++){
if(i != $(this).index()){
$(listL[i]).addClass("customDisplay");
}
else{
$(this).addClass("tempClass");
}
}
});
$('.expanded-column').mouseleave(function(){
$(this).removeClass("tempClass");
$('.expanded-column').removeClass("customDisplay");
});
May be this is what you are looking for , here is the working fiddle for this https://jsfiddle.net/sandymizz/yfr0wpm5/.
I used to put the inner divs with position absolute, and instead of hiding the other divs, just made them opacity 0.
$('.expanded-column').click(function() {
var listL = $('.expanded-column');
var listLen = listL.length;
for (i = 0; i < listLen; i++) {
if (i != $(this).index()) {
$(listL[i]).toggleClass("customDisplay");
} else {
$(this).toggleClass("tempClass");
}
}
});
$('.expanded-column').mouseleave(function() {
$(this).removeClass("tempClass");
$('.expanded-column').removeClass("customDisplay");
});
$white: white;
$expand-column-transition: all 1s ease-in-out;
$expand-column-background-color: #2c3840;
$expand-column-hover-width: 100%;
$expand-column-fluid: true;
.customDisplay {
opacity: 0 !important;
}
.expand-column-wrapper {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.expanded-column {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: $expand-column-transition;
position: absolute;
left: 0;
top: 0;
width: 25%;
box-sizing: border-box;
overflow: hidden;
opacity: 1;
background-position: center !important;
background-size: cover !important;
&:hover {
cursor: pointer;
}
&.tempClass {
width: $expand-column-hover-width;
z-index: 1;
left: 0 !important;
.expand-column-content {
opacity: 1;
flex-basis: 50%;
transition: $expand-column-transition;
}
}
}
.expand-column-header,
.expand-column-content {
color: $white;
}
.expand-column-header {
width: 100%;
text-align: center;
}
.expand-column-content {
font-weight: bold;
opacity: 0;
flex-basis: 1%;
}
}
.expand-column-wrapper .expanded-column {
&:nth-of-type(1) {
background: url('https://images.pexels.com/photos/2154/sky-lights-space-dark.jpg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
}
&:nth-of-type(2) {
background: url('https://images.pexels.com/photos/113744/helix-nebula-ngc-7293-planetary-fog-constellation-aquarius-113744.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
left: 25%;
}
&:nth-of-type(3) {
background: url('https://images.pexels.com/photos/2162/sky-space-dark-galaxy.jpg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
left: 50%;
}
&:nth-of-type(4) {
background: url('https://images.pexels.com/photos/41951/solar-system-emergence-spitzer-telescope-telescope-41951.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
left: 75%;
}
}
<div class="expand-column-wrapper">
<div class="expanded-column">
<h3 class="expand-column-header">Sustainable Living
</h3>
<p class="expand-column-content">Hello there.</p>
</div>
<div class="expanded-column">
<h3 class="expand-column-header">Protecting Society</h3>
<p class="expand-column-content">If you hover</p>
</div>
<div class="expanded-column">
<h3 class="expand-column-header">Health and Wellness</h3>
<p class="expand-column-content">over each section</p>
</div>
<div class="expanded-column">
<h3 class="expand-column-header">Digital Communities</h3>
<p class="expand-column-content">over each section</p>
</div>
</div>
I would to set auto scroll with some timing for this slider. How can I do?
I tryied anything, but cant recognize my mistake.
I just need that when I open the page it will scroll in automatic to the right with timing loop (to infinity).
var slider = {
// Not sure if keeping element collections like this
// together is useful or not.
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNav: $(".slider-nav"),
allNavButtons: $(".slider-nav > a")
},
timing: 800,
slideWidth: 320, // could measure this
// In this simple example, might just move the
// binding here to the init function
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
// You can either manually scroll...
this.el.slider.on("scroll", function(event) {
slider.moveSlidePosition(event);
});
// ... or click a thing
this.el.sliderNav.on("click", "a", function(event) {
slider.handleNavClick(event, this);
});
// What would be cool is if it had touch
// events where you could swipe but it
// also kinda snapped into place.
},
moveSlidePosition: function(event) {
// Magic Numbers =(
this.el.allSlides.css({
"background-position": $(event.target).scrollLeft() / 6 - 100 + "px 0"
});
},
handleNavClick: function(event, el) {
event.preventDefault();
var position = $(el).attr("href").split("-").pop();
this.el.slider.animate({
scrollLeft: position * this.slideWidth
}, this.timing);
this.changeActiveNav(el);
},
changeActiveNav: function(el) {
this.el.allNavButtons.removeClass("active");
$(el).addClass("active");
}
};
slider.init();
// Originally added click links, so I ported over and re-wrote
#media screen and (max-width:650px) {
.slider-wrap {
width: 149% !important;
margin: 20px auto;
}
}
#import url(http://fonts.googleapis.com/css?family=Josefin+Slab:100);
.slider-wrap {
width: 100%;
margin: 20px auto;
}
.slider {
overflow-x: scroll;
}
.holder {
display:block; width: 600%;position:relative;
}
.slide {
float: left;
width: 300px;
height: 200px;
position: relative;
background-position: -100px 0;
margin-left:20px;
}
.temp {
position: absolute;
color: white;
font-size: 40px;
bottom: 15px;
left: 15px;
font-family: 'Josefin Slab', serif;
font-weight: 100;
}
#slide-0 {
background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);background-position:50% 30% !important; background-repeat: no-repeat;background-size: 95%;
}
#slide-1 {
background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);background-position:50% 30% !important; background-repeat: no-repeat;background-size: 95%;
}
#slide-2 {
background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);background-position:50% 30% !important; background-repeat: no-repeat;background-size: 95%;
}
#slide-3 { background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);background-position:50% 30% !important; background-repeat: no-repeat;background-size: 85%;}
.slide:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
background: linear-gradient(transparent, black);
}
.slider-nav {
text-align: center;
margin: 10px 0 0 0;
}
.slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
overflow: hidden;
text-indent: -9999px;
border-radius: 50%;
}
.slider-nav a.active {
background: #999;
}
<h1 align="middle">Title</h1>
<div class="slider-wrap">
<div class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-0"><span class="temp">Itsfsr</span></div>
<div class="slide" id="slide-1"><span class="temp">Edsfasgy</span></div>
<div class="slide" id="slide-2"><span class="temp">Fesfa II</span></div>
<div class="slide" id="slide-3"><span class="temp">Solfsagua</span></div>
</div>
</div>
<nav class="slider-nav">
Slide 0
Slide 1
Slide 2
Slide 3
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>