I want every element in my document to resize proportionally based on screen size and screen resizing..
please look at this Codepen.
and here is the article of the codepen.
In the Codepen you can see that the content is right at the center of the gray container and if you resize the gray container the content resizes proportionally and still at the center of the gray container right?
Now I want my whole document to behave like the gray container. the only difference is I want the content resize when the screen resizes not when user grab and resize the gray container. does it make sense?
So I created this container scale-container and I'll put every element inside it :
const $el = $("#scale-container");
const elHeight = $el.outerHeight();
const elWidth = $el.outerWidth();
window.addEventListener('resize', () => {
doResize();
});
function doResize(event, ui) {
let scale, origin;
scale = Math.min(getViewPortWidth() / elWidth, getViewPortHeight() / elHeight);
console.log(scale)
$el.css({ transform: `translate(-50%, -50%) scale(${scale})` });
function getViewPortWidth() {
return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
}
function getViewPortHeight() {
return Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
}
}
doResize();
body {
background: #ccc;
overflow: hidden;
margin: 0;
}
.scale-container {
/*fill whole screen if it's 1920*1080 */
width: 1536px;
height: 864px;
text-align: center;
background: white;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: center center;
}
.ui-resizable-se {
width: 10px;
height: 10px;
background: orange;
position: absolute;
bottom: 0;
right: 0;
}
.bigred {
color: red;
font-size: 5rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="scale-container" id="scale-container">
<h1>I am designed just so.</h1>
<p>My design is intentional. I want to be scaled in such a way that scales the design. No reflows or anything, just straight up scaling. Kinda like SVG.</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skull-and-crossbones.svg" alt="" />
<p class="bigred"> ✖ ✖ ✖ </p>
</div>
<script SRC="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" TYPE="text/javascript"></script>
<script SRC="script.js" TYPE="text/javascript"></script>
</body>
</html>
The issue is obvious, I want scale-container to fill the whole screen when it's possible (when the aspect ratio doesn't change) and I want it at the center of the screen ...
How can I fix this?
Try using this. in ./iframe.html, just use viewport units and you should be fine.
* {
padding: 0px;
border: 0px;
margin: 0px;
}
html {
width: 100vw;
height: 100vh;
}
body {
width: 100vw;
background-color: rgb(19, 19, 19);
}
div#mainContainer {
margin: calc((100vh - ((6/7) * 100vw)) / 2) 0px;
width: 100vw;
height: calc((6/7) * 100vw);
background-color: rgb(180, 180, 180);
z-index: 1;
}
iframe {
width: 100%;
height: 100%;
}
#media only screen and (min-aspect-ratio: 7/6) {
div#mainContainer {
margin: 0px calc((100vw - ((7/6) * 100vh)) / 2);
width: calc((7/6) * 100vh);
height: 100vh;
}
}
<html>
<head>
<title></title>
</head>
<body>
<div id="mainContainer">
<iframe src="./iframe.html"></iframe>
</div>
</body></html>
Related
Hello everyone here i am trying to show progress bar for my website but i ma facing problem of not display background-color on scroll, please help on this also find the code at below starting from html, css and jquery ...
HTML Code
<div class="progress-bar-container"><div id="progressbar" value="0"></div></div>
CSS Code
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
jQuery Code
$(window).scroll(function () {
var s = $(document).scrollTop(),
d = $(document).height() - $(window).height();
$("#progressbar").attr('max', d);
$("#progressbar").attr('value', s);
});
});
Here please guide how i can display backgroud-color on scroll. Thanks in Advance!!
There are a couple of issues with your code, HTML width attribute does not support div element. Also, the value attribute is not supported by div either. For creating the progress bar you could use CSS. Instead of updating $("#progressbar").attr('value', s); value just update the width of the element $("#progressbar").width(s);
Here is the complete working example -
$(window).scroll(function () {
var s = $(document).scrollTop(),
d = $(document).height() - $(window).height();
$("#progressbar").width(s);
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.progress-bar-container{
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="progress-bar-container"><div id="progressbar"></div></div>
<div style="height: 120vh"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
You should calculate the procentage and set it as width for `progressbar``
have a look.
$(window).scroll(function () {
var d = $(document).height() - $(window).height(),
s = $(document).scrollTop();
var width= (s / d) * 100 // in Procent
$("#progressbar").attr('max', d);
$("#progressbar").attr('value',s).css("width",width +"%");
});
body{
height: 1000px;
}
.progress-bar-container{
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-bar-container">
<div id="progressbar" value="0"></div>
</div>
The function I want to implement is that a parent element that contains an indefinite number of child elements can automatically extend its height to the furthest point of the children when the total height of the children exceeds the parent's. The parent has a fixed height if the children's total height do not exceed that height. Here's the diagram:
I've tried and searched for hours and still couldn't get it to work. Don't know what's been missing here. Here's a demo snippet and when you click on the blue panel it will exceed the white panel but the white one does not extend accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
html,
body {
height: 100%;
background-color: grey;
margin: 0;
}
#left-panel {
position: relative;
width: 256px;
height: 100%;
background-color: white;
}
#child-panel {
position: absolute;
width: 30%;
height: 40%;
top: 20%;
left: 30%;
background-color: blue;
}
</style>
<script>
window.onload = init;
function init() {
var leftPanel = document.getElementById("left-panel");
var childPanel = document.getElementById("child-panel");
childPanel.onclick = function(ev) {
if (childPanel.offsetHeight < leftPanel.offsetHeight) {
childPanel.style.height = leftPanel.offsetHeight + 100 + "px";
leftPanel.style.height = leftPanel.offsetHeight + 100 + "px";
} else {
childPanel.style.height = "40%";
leftPanel.style.height = "100%";
}
}
}
</script>
</head>
<body>
<div id="left-panel">
<div id="child-panel"></div>
</div>
</body>
</html>
it is simple, you don't need javascript to get the right bhavior
first i used this html and css code that gives the same ui as yours in the pictures :
<div class="parent-purpel">
<div class="firstChild-yellow">
<div class="thirdChild-orange">
</div>
</div>
it gives me the result below :
then i used flex in the css :
.firstChild-yellow{
background-color: yellow;
width: 30%;
height: auto;
margin : 30px;
display: flex; /* <====================== */
flex-direction: column; /* <======= to get orange squares in vertical align */}
important ! :
we have to use an auto height in the yellow and the purpel divs :
.parent-purpel{
background-color: purple;
width: 100%;
height: auto; /*<===== important*/ }
.firstChild-yellow{
background-color: yellow;
width: 30%;
height: auto; /*<===== important*/
margin : 30px;
display: flex;
flex-direction: column;}
Now even we add orange elements to the yellow div we will have variable height of the divs yellow and purpel like that :
i hope that will help you thanks !
here is the full code :
html : test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="test1.css">
<title>Document</title>
</head>
<body>
<div class="parent-purpel">
<div class="firstChild-yellow">
<div class="thirdChild-orange">
</div>
<div class="thirdChild-orange">
</div>
<div class="thirdChild-orange">
</div>
<div class="thirdChild-orange">
</div>
</div>
</div>
</body>
</html>
CSS : test1.css
.parent-purpel{
background-color: purple;
width: 100%;
height: auto;}
.firstChild-yellow{
background-color: yellow;
width: 30%;
height: auto;
margin : 30px;
display: flex;
flex-direction: column;}
.thirdChild-orange{
background-color: orange;
width: 60%;
height: 200px;
margin: 30px;}
Try this one:
var childTop = childPanel.offsetTop
if (childPanel.offsetHeight < leftPanel.offsetHeight) {
childPanel.style.height = leftPanel.offsetHeight - childTop + "px";
leftPanel.style.height = leftPanel.offsetHeight + "px";
}
you were setting child height (cHeight) as parent height (pHeight) so let's assume
pHeight = 100px;
cheight = pHeight in your case childPanel.style.height = leftPanel.offsetHeight
it means both elements are having the same height but child element also have top: 20%; that you have to reduce from the height of the child.
Calculate Top of the child: var childTop = childPanel.offsetTop
and then reduce from height
childPanel.style.height = leftPanel.offsetHeight - childTop + "px";
Why don't you just try something like;
<!-- min height will be the height that you want to keep fixed if lesser number of children -->
<div style="border:1px solid black; padding:5px; min-height:50px">
<div>
Child 1
</div>
<div>
Child 2
</div>
<div>
Child 3
</div>
<div>
Child 4
</div>
</div>
it's the:
#child-panel {
position: absolute;
}
that is causing the behaviour, to get the position use padding and margin:
#left-panel {
padding: 5% 2%;
}
#child-panel {
margin: auto;
}
The key is to use
min-height: 100%;
height: auto;
for parent panel and don't use
position: absolute;
for the child panels. If you want to re-position the child panels use a wrapper panel instead. Here's the code that when you click on the blue panels the parent and the panels are all extended accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
html, body {
height: 100%;
background-color: grey;
margin: 0;
}
#left-panel {
width: 256px;
min-height: 100%;
height: auto;
background-color: white;
}
.child-panel-wrapper {
width: 30%;
height: auto;
background-color: yellow;
position: relative;
left: 30%;
}
.child-panel {
background-color: blue;
height: 200px;
}
</style>
<script>
window.onload = init;
function init() {
var childPanels = document.getElementsByClassName("child-panel");
for (var i = 0; i < childPanels.length; i++) {
var panel = childPanels[i];
panel.addEventListener("click", function (evt) {
if (this.offsetHeight <= 200) {
this.style.height = 600 + "px";
} else {
this.style.height = 200 + "px";
}
})
}
}
</script>
</head>
<body>
<div id="left-panel">
<div class="child-panel-wrapper">
<div class="child-panel"></div><br>
<div class="child-panel"></div><br>
<div class="child-panel"></div>
</div>
</div>
</body>
</html>
I do this :
I need to separate the circle , I want to draw something like dart game, and I need to calculate the time that mouse still inside the circle.
If you can help me to do this ?
And how to make this responsive with mobile ?
And can any one build like this with android or react ?
html :
<body>
<div id="outer-circle" onmouseover="stext()" onmouseout="rest1()">
<div id="inner-circle" onmouseover="htext()" onmouseout="stext()">
<div id="inner-circle1" onmouseover="htext()" onmouseout="stext()">
</div>
</div>
</div>
</body>
css :
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 500px;
width: 500px;
position: relative;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
#inner-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 300px;
width: 300px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -150px 0px 0px -150px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
js:
function stext() {
var x = document.getElementById("outer-circle");
x.style.background = 'blue';
}
function rest1() {
var x = document.getElementById("outer-circle");
x.style.background = '#385a94';
}
function htext() {
var x = document.getElementById("outer-circle");
var y = document.getElementById("inner-circle");
y.style.background = 'red';
x.style.background = 'blue';
}
You can use Date.now() at two times (mouseover & mouseout) and calculate difference.
Get time difference between two dates in seconds
Edit:
Here's the code. It's responsive and it haves perfectly centered circles.
css transform
css units (length)
Enjoy your code!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>asd</title>
<style>
body {
margin: 0px;
}
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 100vmin;
width: 100vmin;
position: relative;
margin: auto;
}
#middle-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 60vmin; /*responsive */
width: 60vmin;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /*center the circle*/
}
#inner-circle {
position: absolute;
background: #f99;
border-radius: 50%;
height: 20vmin;
width: 20vmin;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="outer-circle" onmouseover="stext()" onmouseout="rest1()">
<div id="middle-circle" onmouseover="htext()" onmouseout="stext()"></div>
<div id="inner-circle" onmouseover="htext()" onmouseout="stext()"></div>
</div>
</body>
</html>
I horizontally split a page of the browser with two divs, and I want to increase the height of a div and reduce it in the other using the mouse position on the y axis. It would enlarge the first div when I'm in the upper part of the page and enlarge the second one when I'm at the bottom, but keeping both divs sum height equal to the height of the page.
This is my code
<html><head>
<meta charset="UTF-8">
<style>
*{
margin: 0 auto;
}
#container{
height: 100vh
}
#alto{
width: 100vw;
height: 50vh;
background-color: mediumpurple;
}
#basso{
width: 100vw;
height: 50vh;
background-color: royalblue;
}
</style>
</head>
<body>
<div id="alto" onMousemove="myFunction()" ></div>
<div id="basso" ></div>
<script>
function myFunction() {
var y = event.clientY + "px";
document.getElementById("basso").style.height = y ;
}
</script>
</body>
</html>
Take a look at this.
var section1 = document.getElementById("section1");
var section2 = document.getElementById("section2");
document.onmousemove = function(event) {
section1.style.height = event.clientY + 'px';
section2.style.height = "calc(100% - "+ event.clientY + 'px';
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
background: gray;
height: 100vh;
}
#section1, #section2{
height: 50%;
transition: all 0.1s;
}
#section1{
background: hotpink;
}
#section2{
background: pink;
}
<div class="container">
<div id="section1"></div>
<div id="section2"></div>
</div>
You can achieve a simpler version of this effect (ie. without constantly changing heights relative to the mouse position) with CSS alone.
Working Example:
body {
margin: 0;
padding: 0;
}
div {
width: 100vw;
height: 50vh;
margin: 0 auto;
transition: height 0.3s linear;
}
div:hover {
height: 80vh;
}
body:not(:hover) div {
height: 50vh;
}
div:not(:hover) {
height: 20vh;
}
.alto {
background-color: mediumpurple;
}
.basso {
background-color: royalblue;
}
<div class="alto"></div>
<div class="basso" ></div>
I would like to make a website with mouse parallax effect like in this page http://brightmedia.pl background mouse parallax is so smooth..
I have two questions:
When you mouseover on a container from, let's say, the top left corner, the image jumps. How can I make a smooth animation?
When you mouseout of a container, how can I make the image move a little bit and stop with a smooth animation?
What would code to solve these problems be?
Here is basic code:
$('.container').mousemove( function(e){
var xPos = e.pageX;
var yPos = e.pageY;
$('#par1').css({marginLeft: -xPos/20});
});
.container {
position: relative;
width: 100%;
height: 800px;
background: grey;
overflow: hidden;
margin: 0 auto;
}
.container img {
width: 110%;
height: 100vh;
position: absolute;
}
body{
height: 1000px;
}
h1{
font-size: 60px;
z-index: 10;
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="container" id="container">
<img id="par1" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
<h1>TEXT</h1>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
As I had solved the problem long time ago and I forgot about this post so I decided to update with the answer. Maybe it will be helpful for anyone else.
Problem solved by using GSAP. Below You can see the code that works exactly as I wanted
let wrap = document.getElementById('container');
let request = null;
let mouse = { x: 0, y: 0 };
let cx = window.innerWidth / 2;
let cy = window.innerHeight / 2;
document.querySelector('.container').addEventListener('mousemove', function(event) {
mouse.x = event.pageX;
mouse.y = event.pageY;
cancelAnimationFrame(request);
request = requestAnimationFrame(update);
});
function update() {
dx = mouse.x - cx;
dy = mouse.y - cy;
let tiltx = (dy / cy );
let tilty = - (dx / cx);
TweenMax.to("#container img", 1, {x:-tilty*20, y:-tiltx*20, rotation:0.01, ease:Power2.easeOut});
}
window.addEventListener('resize', function(event){
window.innerWidth / 2;
window.innerHeight / 2;
});
* {
margin:0;
padding:0;
box-sizing:border-box;
}
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.container img {
width: 110%;
height: 120vh;
position: absolute;
}
h1 {
z-index:100;
font-size: 6rem;
z-index: 10;
color:#333;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="container" id="container">
<img id="par1" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
<h1>GSAP Mouse Parallax</h1>
</div>
You can rely one mouseenter / mouseleave to add animation:
$('.container').mousemove(function(e) {
var xPos = e.pageX;
var yPos = e.pageY;
$('#par1').css({
marginLeft: -xPos / 10
});
});
$('.container').mouseenter(function(e) {
var xPos = e.pageX;
var yPos = e.pageY;
$('#par1').animate({
"marginLeft": -xPos / 10
}, "slow");
});
$('.container').mouseleave(function(e) {
$('#par1').animate({
"marginLeft": "0"
}, "slow");
});
.container {
position: relative;
width: 100%;
height: 800px;
background: grey;
overflow: hidden;
margin: 0 auto;
}
.container img {
width: 110%;
height: 100vh;
position: absolute;
}
body {
height: 1000px;
}
h1 {
font-size: 60px;
z-index: 10;
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
}
<div class="container" id="container">
<img id="par1" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
<h1>TEXT</h1>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
As Temani said, playing with transition and eventually delay should do the job.
For 1st question: transition seems appropriate, associated with a mousein listener. Or even better, use the $(element).animate() function that allows to set the animation duration. That way, you don't set any value for transition duration.
For 2nd question: listener on mouseout > same process, but shorter animation (for the img shifting as well as the animation duration).
This should also give you some ideas:
https://codepen.io/Aldlevine/pen/Jowke
Based on Teemani below code example:
$('.container').mousemove(function(e) {
var xPos = e.pageX;
var yPos = e.pageY;
$('#par1').css("margin-left", -xPos / 10);
});
$('.container').mouseenter(function(e) {
var xPos = e.pageX;
var yPos = e.pageY;
$('#par1').css("margin-left", -xPos / 10);
});
$('.container').mouseleave(function(e) {
$('#par1').css({"transition": "margin-left 1s ease-in-out", "margin-left": "0"});
setTimeout( function() {
$('#par1').css("transition", "initial");
}, 500);
});
.container {
position: relative;
width: 100%;
height: 800px;
background: grey;
overflow: hidden;
margin: 0 auto;
}
.container img {
width: 110%;
height: 100vh;
position: absolute;
transition: margin-left 0.2s;
/* transition: margin-left 0.2s ease-in-out 0.2s;*/
}
body {
height: 1000px;
}
h1 {
font-size: 60px;
z-index: 10;
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="container">
<img id="par1" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
<h1>TEXT</h1>
</div>