I have the problem, that I want to create a page and there is one image over another and I want to make it go to different places on the second, larger image while you are scrolling.
So if you scroll down, the website should not go down, but on the second picture ( id="maps"
the first picture id="train" should move.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vorstellung meiner Herausforderung</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src = "images/maps.png" alt = "Maps" id="maps">
<img src="images/zug.png" alt= "Zug" id="train">
<h1>Meine Herausforderung</h1>
</body>
</html>
And the css:
* {
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2
}
h1 {
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
#maps {
width: 100%;
position: absolute;
}
#train {
position: absolute;
margin-left: 55%;
margin-top: 10%;
width: 3%;
}
Thanks for any help and sorry for my english.
Would be very happy to help you, if you provide more insight about the problem.
From the Problem statement I assume, you want to move a small image which is on top of a large image when you mouseover on it, without scrolling the body/window viewport.
Please check this helps you
const $train = $('#train')
document.addEventListener('scroll', function (event) {
$train.css({left: window.pageYOffset*10});
}, true /*Capture event*/);
* {
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2
overscroll: scroll;
}
h1 {
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
#map-container {
width: 100%;
height: 100vh;
position: relative;
background: url(https://upload.wikimedia.org/wikipedia/commons/9/95/World_map_green.png);
background-attachment: fixed;
background-size: cover;
}
#map, .inner-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow:scroll;
}
.inner-container {
background: transparent;
z-index: 2;
}
#train {
width:50px;
height:50px;
top: 20%;
position: absolute;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vorstellung meiner Herausforderung</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="map-container">
<!-- <img src = "" id="maps"> -->
<div class="inner-container">
<img src="https://png2.cleanpng.com/sh/0f45ce863aeba0805894dc22bf651040/L0KzQYm3UsAzN5Dqj5H0aYP2gLBuTgRzaZpzRdVqcoTyf7A0kvFqdF55itN3c4DygsW0kvVlNaV3edt3LUXkR4WCWcdiQGpmfNcBLkC3RIq6UMg3OWY2T6cEMEmzRoa9U8kveJ9s/kisspng-train-cartoon-rail-transport-red-train-5a74997a89ade6.0449308615175909065639.png" alt= "Zug" id="train">
</div>
</div>
<h1>Meine Herausforderung</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
Related
I created a vertical line on my webpage, and want the line to grow/shrink as the user scrolls by it. Right now the line is just staying the same height the entire time. If you look at this website, https://robbowen.digital/ a good example of what I would like is shown. I have been looking into parallax but can't quite seem to figure it out. Can anyone help? Is this something simple that can be implemented? Here is my codepen https://codepen.io/atrain42/pen/OJQLPqx
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="vertical"></div>
<header>
<h1>hello</h1>
</header>
<section>
<h1>section 01</h1>
</section>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
header {
position: relative;
width: 100vw;
height: 100vh;
background-color: aquamarine;
z-index: 1;
}
header h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
}
section {
position: relative;
width: 100vw;
height: 100vh;
background-color: rgb(235, 198, 245);
z-index: 1;
}
section h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
}
.container {
position: relative;
z-index: 2;
}
.vertical {
position: absolute;
top: 30%;
left: 20%;
height: 40rem;
z-index: 2;
color: black;
border-right: 2px solid black;
background-attachment: fixed;
}
You can do so adding an event listener to scroll and set the height of div according to the scroll value, take a look:
const verticalLine = document.getElementById("vertical")
document.addEventListener('scroll', function(e) {
// use division by two to limit the height size
scrollPosition = window.scrollY / 2 ;
// set the current scroll position as the height of div
verticalLine.style.height = `${lastKnownScrollPosition}px`
});
See the example on codepen
the output that I want
the one that I have implemented so far
The grey colour background is the background colour of the lined div which is in absolute position to show the crop selection. I want the area inside the line without any colour so that part of the image would be visible and rest should be of grey background as it is.
.bounded-image {
width: fit-content;
position: relative;
}
img {
width: 292px;
}
.bordered-image {
position: absolute;
border: 1px dashed #5035e1;
box-sizing: border-box;
width: 140.816px;
height: 260.12px;
top: 71.2428px;
left: 76.4561px;
background: transparent;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 4;
background: black;
opacity: 0.4
}
<div className="bounded-image">
<img src="https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a"/>
<div className="bg-image"></div>
<div className="bordered-image" ></div>
</div>
I have prepared a possible solution to your problem. However, the question is whether the inner <div class="bordered-image"> is a fixed size? Because otherwise you need to adjust the value of the background-size: calc(170%); property.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bounded-image {
width: fit-content;
position: relative;
width: 500px;
height: 700px;
}
img {
width: 100%;
}
.bordered-image {
position: absolute;
border: 1px dashed #5035e1;
width: 300px;
height: 450px;
top: 130px;
left: 100px;
background: url(https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a);
background-position: center;
background-size: calc(170%);
background-repeat: no-repeat;
z-index: 5;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: black;
opacity: 0.4;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="bounded-image">
<img src="https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a"/>
<div class="bordered-image"></div>
<div class="bg-image"></div>
</div>
</body>
</html>
I saw this example in w3schools where you set svg line attributes like x1, y1, x2, y2 and a line appears on screen. I am using same method to draw svg line between div elements using javascript and it doesn't seem to work.
I have two circle from which I read there x and y values using boundingClientRect in javascript and setting it on svg line using set attribute. I want line connecting those two circles
Here is my code
const circle1 = document.querySelector('.circle--1');
const circle2 = document.querySelector('.circle--2');
const line1 = document.querySelector('#line-1');
line1.setAttribute('x1', circle1.getBoundingClientRect().x);
line1.setAttribute('y1', circle1.getBoundingClientRect().y);
line1.setAttribute('x2', circle2.getBoundingClientRect().x);
line1.setAttribute('y2', circle2.getBoundingClientRect().y);
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient(to right, #64b5f6, #1976d2);
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: grey;
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle--2 {
right: 10%;
bottom: 60%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle circle--1">1</div>
<div class="circle circle--2">2</div>
<svg>
<line
id="line-1"
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>
</header>
<script src="./script.js"></script>
</body>
</html>
An svg element has a size, and your line is outside of the that area.
The default setting for an svg is:
svg:not(:root) {
overflow: hidden;
}
so your line won't be visible.
If you add this to your style:
svg {
overflow: visible;
border: 1px solid red;
}
You will see where your svg is located and its dimension, and overflow: visible; makes the line visible:
const circle1 = document.querySelector('.circle--1');
const circle2 = document.querySelector('.circle--2');
const line1 = document.querySelector('#line-1');
line1.setAttribute('x1', circle1.getBoundingClientRect().x);
line1.setAttribute('y1', circle1.getBoundingClientRect().y);
line1.setAttribute('x2', circle2.getBoundingClientRect().x);
line1.setAttribute('y2', circle2.getBoundingClientRect().y);
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient(to right, #64b5f6, #1976d2);
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: grey;
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle--2 {
right: 10%;
bottom: 60%;
}
svg {
overflow: visible;
border: 1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle circle--1">1</div>
<div class="circle circle--2">2</div>
<svg>
<line
id="line-1"
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>
</header>
<script src="./script.js"></script>
</body>
</html>
But instead of using overflow: visible; you should change the size and/or positioning of the svg.
I have divided an html page into four sections. I have created four buttons inside it which contain images. I also want text to be displayed at the center of each button. But due to the images the texts are moving below the button. Please tell me how to achieve this.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
button {
width: 50%;
height: 50%;
float: left;
margin: 0;
padding: 0;
cursor: pointer;
text-align: center;
}
button img {
width: 100%;
height: 100%;
}
button:hover {
opacity: 0.4;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Nature</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button><img src="https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">Himalaya</button>
<button><img src="https://images.unsplash.com/photo-1508831084156-40f6573bbe6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""></button>
<button><img src="https://images.unsplash.com/photo-1585889574476-af7bcb00d9c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""></button>
<button><img src="https://images.unsplash.com/photo-1543763479-fb7533fcbf3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""></button>
<script src="script.js"></script>
</body>
</html>
Use background-image: url('https://someurl.com');
instead of placing the image inside the button tag.
See: How to add background image for input type="button"?
You can use the CSS property background-image to set the background of the image for a css property, and you can use your text-align to center the text:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
button {
width: 50%;
height: 50%;
float: left;
margin: 0;
padding: 0;
cursor: pointer;
text-align: center;
}
button:hover {
opacity: 0.4;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Nature</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button style="background-image: url('https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80')">Himalaya</button>
<button style="background-image: url('https://images.unsplash.com/photo-1508831084156-40f6573bbe6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80')"></button>
<button style="background-image: url('https://images.unsplash.com/photo-1585889574476-af7bcb00d9c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80')"></button>
<button style="background-image: url('https://images.unsplash.com/photo-1543763479-fb7533fcbf3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80')"></button>
<script src="script.js"></script>
</body>
2 possibiities:
1.) Use an element with position: absolute for the text
or
2.) Use the images as background-images
As mentioned above, you could use background-image instead of img elements. But on hover, opacity:0.4 will apply to both image and text. If you want to keep the text at opacity:1 on hover, wrap up the text in a span and position it absolute center it, and apply opacity on hover to img only:
HTML:
<button><img src="https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""><span>Himalaya</span></button>
CSS:
button {
width: 50%;
height: 50%;
float: left;
margin: 0;
padding: 0;
cursor: pointer;
text-align: center;
position: relative;
}
button img {
width: 100%;
height: 100%;
}
button span {
position: absolute;
width: 100%;
left: 0;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
button:hover img {
opacity: 0.4;
}
Example: https://jsfiddle.net/1q879w3p/
It has been two days im trying to solve this and i cant.
I made a customized div that displays images in a kind of a bar that auto-adjusts itself and stays centered.
And i made it work here:
https://codepen.io/SCalmStorm/pen/povwaed
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.imgstyle{
display: inline-block;
width: 40px;
height: auto;
background-position: 50px 50px;
background-size: cover;
border-radius: 50%;
margin-right: 10px;
}
#containerItem{
margin: auto;
Position: relative;
top: 65px;
background: green;
min-width: 10px;
max-width: 700px;
height:50px;
border-radius: 50px;
box-shadow: 0 0 10px 2px;
z-index: 21;
padding: 5px 5px;
white-space:nowrap;
overflow-x: auto;
overflow-y: hidden;
}
body {
background-size: cover;
background-color: khaki;
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link href="styles.css" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Quantico&display=swap" rel="stylesheet">
<title>Quiz App</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
</head>
<div class="bg"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<body>
<div id="containerItem">
</div>
</body>
<script>
number = Math.floor(Math.random() * 20) + 1
alert(number)
for (i = 0; i < number; i++) {
var img = document.createElement('img')
document.getElementById('containerItem').appendChild(img);
img.src = "https://i.pinimg.com/originals/54/a2/c6/54a2c62234d05c174e344b235cbb6f49.jpg";
img.className = "imgstyle";
}
var newDiv = document.createElement('img')
newDiv.id = "containerItem"
</script>
</html>
And that is great. But as i worked on my other script i needed it inserted in another div with the class StandardSlide. But it completely breaks apart :(. And the only thing i understand is that it conflicts with the position:fixed. But when i turn it off, or change it to others it messes up my container. How can i solve this without messing it up? Or without changing the fixed? Why is the fix from this new container affecting the other divs :(, i know it has to do with the relative that inherits the parent style :(:
This one, it no longer adjusts the green bar to the images.
https://codepen.io/SCalmStorm/pen/xxbPqVw
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.imgstyle{
display: inline-block;
width: 40px;
height: auto;
background-position: 50px 50px;
background-size: cover;
border-radius: 50%;
margin-right: 10px;
}
.StandardSlide{
Position: fixed;
top: 10%;
background: rgba(75, 39, 73, 0.7);
left: 15%;
right: 15%;
/*width: 80%;*/
bottom: 5%;
/*background-color: white;*/
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
z-index: 20;
}
#containerItem{
margin: auto;
Position: relative;
top: 65px;
background: green;
min-width: 10px;
max-width: 700px;
height:50px;
border-radius: 50px;
box-shadow: 0 0 10px 2px;
z-index: 21;
padding: 5px 5px;
white-space:nowrap;
overflow-x: auto;
overflow-y: hidden;
}
body {
background-size: cover;
background-color: khaki;
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link href="styles.css" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Quantico&display=swap" rel="stylesheet">
<title>Quiz App</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
</head>
<div class="bg"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<body>
<div class="StandardSlide">
<div id="containerItem">
</div>
</div>
</body>
<script>
number = Math.floor(Math.random() * 20) + 1
//alert(number)
for (i = 0; i < number; i++) {
var img = document.createElement('img')
document.getElementById('containerItem').appendChild(img);
img.src = "https://i.pinimg.com/originals/54/a2/c6/54a2c62234d05c174e344b235cbb6f49.jpg";
img.className = "imgstyle";
}
var newDiv = document.createElement('img')
newDiv.id = "containerItem"
</script>
</html>