Develop Reference

How to create a slide of background images using Pure Javascript or a pure Javascript library

I'd like to make the below in a way that I can have two images slide in the background but have I'm stuck on how to implement a slide of background images. Kindly assist, any assistance will be highly appreciated.
#header-image {
background-image: url('/images/photography1.jpg');
width: 100%;
border: none;
padding: 0;
margin: 0;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: relative;
}
<div id="header-image">
<div class="overlay" data-aos="fade-down-right">
<h1>Photography Logo</h1>
</div>
</div>

I made an example for you using javascript, as well as modified your html and css. Was such a result necessary? If you have any questions, please let me know.
let anime = document.querySelector('#header-image');
var step = 0;
function animate() {
if (step > -200) {
anime.style.transform = 'translateX('+ step +'vw)';
} else {
anime.style.transform = 'transformX(100vw)';
step = 100;
}
}
setInterval(function () {
step = step - 100;
animate();
}, 5000);
body {
padding: 0;
margin: 0;
}
#header {
overflow: hidden;
}
#header-image {
border: none;
width: 200vw;
height: 100vh;
transition: 1s;
display: flex;
}
#photo_section_one {
background-image: url('https://img.desktopwallpapers.ru/newyear/pics/wide/1920x1200/5f7ff83acdb7b743fb61468954e9c511.jpg');
width: 100vw;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
#photo_section_two {
background-image: url('https://lh3.googleusercontent.com/proxy/N_97o7XR3tJd8Thp4vFQxXqqQVMSgBNhjGlvvHa9bDnpW-i4v6J9EElWWMSC8qumCbDAfvAjroBDWBu8F1HPl-hZX1BsYOk-wDNO26pT19W90o8n22aABvQ');
width: 100vw;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
<div id="header">
<div id="header-image">
<div id="photo_section_one">
<div class="overlay" data-aos="fade-down-right">
<h1>Photography Logo</h1>
</div>
</div>
<div id="photo_section_two">
<div class="overlay" data-aos="fade-down-right">
<h1>Photography Logo</h1>
</div>
</div>
</div>
</div>
Second solution using an array of images. The images change as on the site you showed.
let anime = document.querySelector('#header-image');
let images = ['https://vjoy.cc/wp-content/uploads/2019/08/1-39.jpg', 'https://img.desktopwallpapers.ru/newyear/pics/wide/1920x1200/5f7ff83acdb7b743fb61468954e9c511.jpg'];
let index = 0;
setInterval(function(){
anime.style.backgroundImage = 'url(' + images[index] + ')';
index++;
if (index >= images.length) {
index = 0;
}
}, 5000);
* {
padding: 0;
margin: 0;
}
#header {
overflow: hidden;
}
#header-image {
border: none;
height: 100vh;
transition: 1s;
background-image: url('https://img.desktopwallpapers.ru/newyear/pics/wide/1920x1200/5f7ff83acdb7b743fb61468954e9c511.jpg');
width: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
}
<div id="header">
<div id="header-image">
<div id="photo_section_one">
<div class="overlay" data-aos="fade-down-right">
<h1>Photography Logo</h1>
</div>
</div>
</div>
</div>

As far as I'm aware you cannot do exactly what you are asking for. But, you can create something similar though z-index and absolute positioning, some css, and some js. You would have to create a div behind the text and animate it using css, while using some js to make it continuously loop.
setInterval(function() {
if (document.getElementsByClassName("slide-pos-1")[0] != undefined) {
document.getElementsByClassName("background-slide")[0].classList.add("slide-pos-2")
setTimeout(function() {
document.getElementsByClassName("background-slide")[0].classList.remove("slide-pos-1")
document.getElementsByClassName("background-slide")[0].classList.remove("slide-pos-2")
}, 1500)
} else {
document.getElementsByClassName("background-slide")[0].classList.add("slide-pos-1")
}
}, 6000)
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.background-slide {
position: absolute;
top: 0;
left: 0;
width: 300%;
height: 100%;
display:flex;
transform:translate(0,0);
transition: transform 0s ease-out;
}
.slide-pos-1{
transform:translate(calc(-100% / 3),0);
transition: transform 1s ease-out;
}
.slide-pos-2{
transform:translate(calc(-200% / 3),0);
transition: transform 1s ease-out;
}
.header-image {
width: 100%;
height: 100%;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.image {
flex:1;
}
img {
object-fit: cover;
width:100%;
height:100%;
margin:0;
}
<div class="header-image">
<div class="background-slide slide-pos-1">
<div class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" /></div>
<div class="image"><img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" /></div>
<div class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" /></div>
</div>
<div class="overlay">
<h1>Photography Logo</h1>
</div>
</div>
Also, this one doesn't slide the text along with the image, and the slide direction is the same. Credit of s.kuznetsov for making me realize that and revise my answer.

How to make a div go over another div when clicking on it?

I have these 2 divs and when I click on div 1 I want it to go over the second div, and if I click on Div 1 again I want it to go back to its original position (I want Div 1 to increase its width so it goes over the second Div). Here is my code where I have my 2 divs next to each other. Can anyone point me in the right direction on how to accomplish this? Thanks a lot in advance!
NOTE:
- No jQuery please. I'm trying to accomplish this with javascript and css.
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
}
#wide {
flex: 1;
background: lightgreen;
}
<div id="parent">
<div id="wide">Div 1</div>
<div id="narrow">Div 2</div>
</div>

If you're willing to ditch flex, you can use a combination of float , postion:absolute and transition so that the main div "slides over" the other div
document.querySelector("#wide").onclick = toggleWidth;
function toggleWidth() {
this.classList.toggle("active");
}
#parent {
position: relative;
}
#narrow {
width: 200px;
background: lightblue;
float: right;
}
#wide {
position: absolute;
background: lightgreen;
width: calc(100% - 200px);
transition: width 2s;
}
#wide.active {
width: 100%;
opacity: 0.9;
}
<div id="parent">
<div id="wide">Div 1</div>
<div id="narrow">Div 2</div>
</div>
Note: Changing the opacity is purely optional, I've only done it to further illustrate the "slide over" effect.

Try this
#parent {
display: flex;
}
#narrow {
width: 20vw;
position: absolute;
left: calc(80vw - 10px);
background: lightblue;
z-index: 1;
margin: 0;
}
#wide {
width: calc(80vw - 10px);
background: lightgreen;
transition: all 0.3s ease-out;
}
.wider {
width: 100vw!important;
z-index: 2;
}
<div id="parent">
<div id="wide" onclick="myFunction()">Div 1</div>
<div id="narrow">Div 2</div>
</div>
<script>
function myFunction() {
var element = document.getElementById("wide");
element.classList.toggle("wider");
}
</script>

You can try it using JavaScript.
First, you prepare your CSS:
#narrow {
width: 200px;
transition: 0.32s;
overflow: hidden;
}
#wide.fullwidth ~ #narrow {
width: 0;
opacity: 0;
}
Then, the JavaScript, like this:
document.querySelector("#wide").onclick = changeDivWidth;
var wideFull = false;
function changeDivWidth () {
if (!wideFull) {
this.classList.add("fullwidth");
wideFull = true;
return; // if variable wideFull is false, function stops here
}
wideFull = false;
this.classList.remove("fullwidth");
}
Shorter approach using toggle();
document.querySelector("#wide").onclick = changeDivWidth;
function changeDivWidth () {
this.classList.toggle("fullwidth");
}

Are you looking for something like this : JSFiddle ?
JavaScript (Pure) :
function HideDivOne(){
var wide = document.getElementById("wide");
var narrow = document.getElementById("narrow");
if (wide.style.width == "70%"){
wide.style.width = "100%";
narrow.style.width = "0%";
narrow.style.opacity = "0";
}
else{
wide.style.width = "70%";
narrow.style.width = "30%";
narrow.style.opacity = "1";
}
}
CSS
#parent {
display: flex;
}
#narrow {
width: 30%;
background: lightblue;
height: 20px;
transition: 0.2s;
}
#wide {
width: 70%;
flex: 1;
background: lightgreen;
height: 20px;
transition: 0.2s;
}
HTML
<div id="parent">
<div id="wide" onclick="HideDivOne()">Div1</div>
<div id="narrow" onclick="HideDivTwo()">Div2</div>
</div>

You can change the z-index of the divs based on your desired effect. My suggestion is using jQuery. On click on div 1 add a class to the div that modify the zindex, that is, if the class is not already added, if so, remove it.

How to keep user's scrolling place when resizing div

I wanted to do a cool menu effect for a website I'm working on. I'm having a div act as the the section for the main content. When the user opens the menu, the main content div will resize and move out of the way, revealing the menu. However, when I do this with the code I have written, it always loses my scrolling place on the page. Is there any way to keep my place on the page when it shrinks and also when it expands back again? Below is what I have. Thank you in advance!
function shrinkPage() {
var element = document.getElementById("mock-body");
element.classList.toggle("mock-body-on-burger");
var z = document.getElementById("mock-body-container");
z.classList.toggle("mock-body-container-on-burger");
var x = document.getElementById("body");
x.classList.toggle("body-on-burger");
};
body {
margin: 0;
background:#000;
}
.body-on-burger {
max-width: 100%;
overflow-x:hidden;
}
.mock-body-container{
height:100vh;
}
.mock-body-container-on-burger {
height:100vh;
transform: scale(0.4) translate(130%);
overflow: hidden;
}
.mock-body-size-change{
overflow: scroll;
}
.mock-body {
position:relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height:50px;
width:50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height:500px;
}
.one {
background:red;
}
.two {
background:green;
}
.three {
background:blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>

Please take a look at the snippet below. Notice how the overflow property is used.
You have to scroll mock-body-container to keep its scrolling position.
You're scrolling body instead, so when you scale mock-body-container there is nothing to scroll in body and you loose the scrolling position.
function shrinkPage() {
var element = document.getElementById("mock-body");
element.classList.toggle("mock-body-on-burger");
var z = document.getElementById("mock-body-container");
z.classList.toggle("mock-body-container-on-burger");
var x = document.getElementById("body");
x.classList.toggle("body-on-burger");
};
body {
margin: 0;
background:#000;
}
.body-on-burger {
max-width: 100%;
overflow-x:hidden;
}
.mock-body-container{
height:100vh;
overflow:auto;
}
.mock-body-container-on-burger {
height:100vh;
transform: scale(0.4) translate(130%);
}
.mock-body-size-change{
overflow: scroll;
}
.mock-body {
position:relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height:50px;
width:50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height:500px;
}
.one {
background:red;
}
.two {
background:green;
}
.three {
background:blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>

Once you know the element that was in focus it should be relatively easy. If you need to find which element was last in focus, you can do that with a scroll function. If you need this as well let me know and I will update my answer.
If you know that #mock-body is the last element in focus, just scroll back to it after the resize.
In this example I've used jQuery as it makes this interaction easier, but this can be done (albeit more verbosely) with vanilla JS as well.
$('html, body').animate({
scrollTop: $('#mock-body').offset().top
}, 0); // If you want the animation to be smoother you can increase 0 to a higher number

A simple way to do it is to remember the position of the document scroll and reapply it when you getting back to "normal" view:
let savedScroll;
function shrinkPage() {
let _s = (el) => document.querySelector(el),
s_ = (d) => !d.classList.contains('body-on-burger'),
x = _s('#body'),
element = _s('#mock-body'),
z = _s('#mock-body-container');
if (s_(x)) {
savedScroll = document.documentElement.scrollTop;
}
element.classList.toggle("mock-body-on-burger");
z.classList.toggle("mock-body-container-on-burger");
x.classList.toggle("body-on-burger");
if (s_(x)) {
document.documentElement.scrollTop = savedScroll;
}
};
Check it out:
let savedScroll;
function shrinkPage() {
let _s = (el) => document.querySelector(el),
s_ = (d) => !d.classList.contains('body-on-burger'),
x = _s('#body'),
element = _s('#mock-body'),
z = _s('#mock-body-container');
if (s_(x)) {
savedScroll = document.documentElement.scrollTop;
}
element.classList.toggle("mock-body-on-burger");
z.classList.toggle("mock-body-container-on-burger");
x.classList.toggle("body-on-burger");
if (s_(x)) {
document.documentElement.scrollTop = savedScroll;
}
};
body {
margin: 0;
background: #000;
}
.body-on-burger {
max-width: 100%;
overflow-x: hidden;
}
.mock-body-container {
height: 100vh;
}
.mock-body-container-on-burger {
height: 100vh;
transform: scale(0.4) translate(130%);
overflow: hidden;
}
.mock-body-size-change {
overflow: scroll;
}
.mock-body {
position: relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height: 50px;
width: 50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height: 500px;
}
.one {
background: red;
}
.two {
background: green;
}
.three {
background: blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>
Legend: _s(el) returns first match of el and s_(d) checks if d has class body-on-burger.

The simple way to do this is to determine the change in height during the resize, and scroll that much.
const heightChange = newHeight - initialHeight;
scrollableDiv.scrollTop = scrollableDiv.scrollTop - heightChange;
In my case I am using a resize method I wrote, so I do this work inside of a window.addEventListener("mousemove", handleResize); when I know the div in actively being resized by the user.
This will still work fine with native html resizable elements, you just need to figure out how/when to listen for resize/drag events accordingly.

Is CSS 3 Transition do not work with Template element (HTML 5) in case of Adding Class...?

Is Transistion do not work with Template element (HTML5) in case of Adding Class...??
I am using Template of HTML 5 for adding new child to root element via javascript.
To makes a good visual effect, I am using some CSS transition. Usually, all of transition of CSS is working as well but I can't make it happen with adding new element from HTML 5 Template
Could someone help me please
My code is simplyfied ad bellow
function transform() {
var root = document.querySelector('#root');
var template_content = document.querySelector('#myElem').content;
root.appendChild(document.importNode(template_content, true));
var el = root.querySelector('.ini');
console.log(root);
el.classList.add('show');
}
.ini {
position: relative;
left: 200px;
top: 200px;
width: 300px;
height: 200px;
background-color: #f0f;
}
.show {
transition: all 3s ease;
left: 200px;
top: 200px;
width: 500px;
height: 200px;
background-color: #f0f;
}
<body>
<h1 class="text-center">Component Test Bed</h1>
<!-- <div class="ini"></div> -->
<div id="root"></div>
<button onclick="transform()">Click</button>
<template id="myElem">
<div class="ini"></div>
</template>
</body>
Thank in advance

A quick and dirty .setTimeout() fixes your problem. I have no clue why it does that but I have found this trick to be very useful in different situations.
Snippet:
var myElem = document.querySelector('#myElem');
var root = document.querySelector('#root');
var myButton = document.getElementsByTagName('button')[0];
myButton.addEventListener('click', transform, false);
function transform() {
root.appendChild(document.importNode(myElem.content, true));
setTimeout(function() {
var el = root.querySelector('.ini');
el.classList.add('show');
}, 100);
}
.ini {
position: relative;
left: 200px;
top: 200px;
width: 300px;
height: 200px;
background-color: #f0f;
}
.show {
transition: all 3s ease;
left: 200px;
top: 200px;
width: 500px;
height: 200px;
background-color: #f0f;
}
<h1 class="text-center">Component Test Bed</h1>
<div id="root"></div>
<button>Click</button>
<template id="myElem">
<div class="ini"></div>
</template>
jsFiddle of the same. Hope this helps. This article on Custom Elements may also help.

I got a solution but more complicated... By using CSS3 keyframe and listen event of Animation end
CSS
.ini {
position: relative;
left: 200px;
top: 200px;
width: 300px;
height: 200px;
background-color: #f0f;
animation: GROWUP 2s ;
}
#keyframes GROWUP {
0% { width: 300px; }
100% { width: 500px; }
}
function transform() {
var root = document.querySelector('#root');
var template_content = document.querySelector('#myElem').content;
root.appendChild(document.importNode(template_content, true));
var el = root.querySelector('.ini');
console.log(root);
el.addEventListener("animationend", function(){
console.log(this);
this.style.height = "50px";
}, false);
}
HTML
<body>
<h1 class="text-center">Component Test Bed</h1>
<!-- <div class="ini"></div> -->
<div id="root"></div>
<button onclick="transform()">Click</button>
<template id="myElem">
<div class="ini"></div>
</template>
</body>

align divs passed the browsers width with a slide in effect

How can I align the following coloured divs next to each other, so that each one is the full width of the browser window (responsive) and only one is display at a time?
http://codepen.io/anon/pen/gpxvjm
HTML:
<div class="content-area">
<div class="p1">Page 1</div>
<div class="p2">Page 2</div>
<div class="p3">Page 3</div>
</div>
<a class="previous-page" href="#">Previous Page</a>
<a class="next-page"href="#">Next Page</a>
CSS:
body {background: grey;}
.p1 {
background: red;
float: left;
width: 100%;
display: inline;
overflow: hidden;
}
.p2 {
background: blue;
float: left;
width: 100%;
display: inline;
overflow: hidden;
}
.p3 {
background: green;
float: left;
width: 100%;
display: inline;
overflow: hidden;
}
.content-area {
width: 100%;
overflow: hidden;
}
Also, when the user selects the previous and next buttons, how can I then push the divs either left or right depending on which anchor link is selected?

I would really recommend slick.js to create the carousel effect you are after.
It is super easy to setup, allows for responsive design, is quite compatible with old IE and has features like arrows and dots built in!
If you want to run your own, i would suggest toggling classes in javascript which leverage css transforms & transitions to ensure maximum performance.
For example,
.page{
width: 100%;
height: 500px;
position: absolute;
top: 0;
transition: .5s;
}
.hide-left{
transform: translateX(-100%);
}
.hide-right{
transform: translateX(100%);
}
Adding browser specific prefixes where required.

This is one of solution, define parent with (number of pages) x 100% width and each child of page 100% / (number of pages) width :
var currentPage = 0;
$('.previous-page').on('click', function() {
currentPage--;
$('.content-area').css('left', (currentPage * -100) + '%');
});
$('.next-page').on('click', function() {
currentPage++;
$('.content-area').css('left', (currentPage * -100) + '%');
});
body {background: grey;}
.content-area div {
float: left;
width: 33.3333%;
display: inline;
overflow: hidden;
}
.p1 {
background: red;
}
.wrap {
width: 100%;
position: relative;
overflow: hidden;
}
.content-area {
width: 300%;
overflow: hidden;
left: 0;
position: relative;
-webkit-transition: left 2s;
transition: left 2s;
}
.p2 {
background: blue;
}
.p3 {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content-area">
<div class="p1">Page 1</div>
<div class="p2">Page 2</div>
<div class="p3">Page 3</div>
</div>
</div>
<a class="previous-page" href="#">Previous Page</a>
<a class="next-page"href="#">Next Page</a>
You can improve the script, i just made it to illustrate the slider.

Here, I've created a jsfiddle here for what I think it is that you want. I've also created a snippet below.
$(document).ready(function () {
for (var i = 0; i < $(".content-area div").length; i++) {
$(".content-area div").eq(i).css({
left: "+=" + parseInt($(".content-area").width() * i, 10)
});
}
});
var currentPage = 0; //0th index
$(".previous-page").click(function () {
changePage(-1);
});
$(".next-page").click(function () {
changePage(1);
});
function changePage(updown) {
if ($(".content-area div")[currentPage + updown]) {
$(".content-area div").animate({
left: "+=" + parseInt($(".content-area").width() * -updown, 10)
},1600);
currentPage += updown;
}
}
body, html {
background: grey;
margin: 0;
padding: 0;
}
.p1 {
background: red;
}
.p2 {
background: blue;
}
.p3 {
background: green;
}
.content-area {
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
overflow: hidden;
}
.content-area div {
position:absolute;
left:0;
width: 100%;
height:100%;
}
.next-page, .previous-page {
z-index:2;
position:fixed;
bottom:5px;
}
.next-page {
right:5px;
}
.previous-page {
left:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-area">
<div class="p1">Page 1</div>
<div class="p2">Page 2</div>
<div class="p3">Page 3</div>
</div>
<a class="previous-page" href="#">Previous Page</a>
<a class="next-page" href="#">Next Page</a>