Calculate left css value for skewed div - javascript

I have a wiper div which I want to use to wipe diagonally through a parent div.
The wiper div has the following class:
.wiper {
position: absolute;
height: 100%;
top: 0;
left: 0;
background-color: orange;
transform: skew(45deg);
}
I want the wiper to start offscreen to the right, and end offscreen to the left.
When the wiper is halfways, the screen must be completely filled by the wiper.
The problem is, I don't know how big the wipers parent is. So I need to calculate the following:
Width: How wide in percent must the wiper be, to fill the screen when it is halfway.
Startleft: What should the starting left property be in percent, for the wiper to be just offscreen right.
Endleft: What should the ending left property be, for the wiper to be just offscreen left.
Here is an example in jsfiddle, but with hardcoded values. I just don't know how to calculate the relative values, when dealing with a skewed div.
http://jsfiddle.net/jpg850kx/22/

I would do something differently using gradient where you don't need complex calculation:
body,
html {
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
padding: 20px;
}
#wrapper {
width: 60%;
height: 100%;
position: relative;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
color: white;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
.wiper {
position: absolute;
height: 200%;
width: 400%;
top: 0;
left: 100%;
z-index:1;
background-image:
linear-gradient(to bottom left,orange 49.5%,transparent 50%),
linear-gradient(to top right,orange 49.5%,transparent 50%);
background-size:50.1% 100%;
background-repeat:no-repeat;
background-position:left,right;
transition:all 3s;
}
#wrapper:hover .wiper{
left:-300%;
}
<div id="wrapper">
<div class="content">
Old content
</div>
<div class="wiper"></div>
</div>

Related

css/JavaScript resize div content to fit window

I have a page with a lot of images positioned on top of another image.
The position of the smaller images is relative, and the left and top distance is given using px.
When I scale the window, the collection of images moves and stays in the right place. But I want it to also scale when I resize the window. (The ratio of the images should stay the same, but smaller/larger.)
All the images are contained in an overlaying div.
Is there any way for me to do this without having to reposition all the images? (I'm very new to css/JavaScript)
Here's an example of what is happening: https://codepen.io/gwenvere/pen/MWJdvJp
What I want is for the red ball to stay on top of the mountain, but for the mountain and ball to shrink if the window becomes smaller.
Here is an example of the css of one of the smaller images:
position: relative;
left: 161.7px;
top: 208.7px;
width: 79px;
height: 79px;
background-color: rgba(56, 152, 236, 0);
background-image: url('../images/Medium.png');
background-position: 0px 0px;
background-size: cover;
}
The css of the larger image:
.image-11 {
position: absolute;
left: 0%;
top: 148px;
right: 0%;
bottom: 0%;
width: 1200px;
max-width: 1200px;
margin-top: -37px;
margin-right: auto;
margin-left: auto;
}
css of the overlaying div:
.div-block-3 {
position: relative;
width: 1200px;
height: 800px;
max-height: none;
max-width: none;
min-height: auto;
min-width: auto;
margin-right: auto;
margin-left: auto;
background-color: rgba(83, 39, 39, 0);
-webkit-transform-origin: top left;
}
The image in your Codepen is set to position: absolute at a fixed width and height of 1200px and 800px, so it doesn’t resize.
As your description of your question talks about resizing the window, I’m assuming you want your main image to scale up and down and for the red dot to stay in the same relative position.
One way to do it using CSS would be to use percentages of the width and height to position the red dot, and use a percentage of the width to scale the size of the dot (using a ratio to set the dot’s height.
body {
padding: 0;
margin: 0;
}
.body {
position: relative;
width: 100%;
max-width: 1200px;
margin-top: 147px;
margin-right: auto;
margin-left: auto;
background-color: rgba(83, 39, 39, 0);
}
.largeImage {
width: 100%;
height: auto;
}
.smallImage {
display: block;
position: absolute;
left: 57.5%;
top: 26.17%;
width: 6.67%;
height: auto;
transform: translate(-50%,50%);
background-color: rgba(56, 152, 236, 0);
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Circle_Burgundy_Solid.svg/1024px-Circle_Burgundy_Solid.svg.png");
background-position: 0px 0px;
background-size: cover;
margin: 0 auto;
}
.smallImage::before {
display: block;
padding-top: 100%;
content: "";
}
.smallImage a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="body">
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" loading="lazy" alt="" class="largeImage">
<div class="smallImage">
</div>
</div>
I included a margin above the image as you had that in your Codepen.

Is there a way to have a responsive parallax image always take 100% of the viewpoint?

I've been following this solution to add responsiveness to my parallax images in my right grid. The responsiveness is working fine except the image doesn't takes up the WHOLE viewpoint.
I have put a red border around the image to show this: https://jsfiddle.net/65r3bth1/3/
When it becomes responsive, the image doesn't fill up the left side of the viewpoint unless I change the background-size and mess around with my background positioning. Is it possible to ensure my image takes up the whole viewpoint while maintaining its responsiveness?
.image-greet {
background: url("http://placekitten.com/g/800/800")
calc(75% + 120px) 50px /120px auto;
/*calc (middle of right grid + how pushed to the rigth) how far push down from top / zoom*/
border-top: 20px;
background-size: 40% auto;
width: 78%;
height: 12%;
margin: 15% auto 0;
background-attachment: fixed;
background-repeat: no-repeat;
border: 1px solid red;
}
Is it possible to ensure my image takes up the 100% of the viewpoint while maintaining responsiveness in its original background position?
Thank you!
The solution that you are following can be achieved with CSS, without the need for JS, as you can see in this fiddle. Hope this helps!
.body {
display: flex;
}
.container {
border: 1px solid red;
width: 100%;
height: 400px;
margin-top: 50px;
}
.sidebar {
height: 2000px;
width: 50px;
background-color: #333333;
margin-right: 30px;
}
.bg {
background: url('https://loremflickr.com/320/240');
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100%;
display: block;
}
<div class="body">
<div class="sidebar"></div>
<div class="container">
<div class="bg"></div>
</div>
</div>

How can I create a circle with elements at the very end of its axis?

I'll be using some SVGs that will be those avatars on the axis. For now all I need is a hint on how to set those avatars at the very end of every axis.
I am trying to achieve this:
This the code I have so far:
body {
background-color: #de4e40;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
}
.squareLoader {
height: 200px;
width: 200px;
background-color: white;
border: 1px solid black;
border-radius: 50%;
}
<div class='squareLoader'></div>
And here is a codepen in case you want to take a look.
Is there any guide or someone can help me on how to achieve this?
I can use flexbox and also I am using React Native. Just in case.
Make squareLoader a relative parent
Position element in corners using translate, top, left
Share styles wherever possible
Store repeated offset value in CSS variable
:root {
--offset: -1.4em;
}
body {
background-color: #de4e40;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
}
.squareLoader {
height: 200px;
width: 200px;
background-color: white;
border: 1px solid black;
border-radius: 50%;
position: relative;
}
.squareLoader img {
position: absolute;
width: 50px;
}
.one, .three {
left: 50%;
transform: translateX(-50%);
}
.two, .four {
top: 50%;
transform: translateY(-50%);
}
.one {
top: var(--offset);
}
.two {
right: var(--offset);
}
.three {
bottom: var(--offset);
}
.four {
left: var(--offset);
}
<div class="squareLoader">
<img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="one">
<img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="two">
<img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="three">
<img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="four">
</div>
https://jsfiddle.net/uf2t5p6r/3/
If I understand your post correctly, you want to place SVG images on the North, South, East, and West points of a circle with CSS; It is definitely possible to do this with CSS, but it depends completely on the size of the container and the size of the images being used.
The example circle you provided has a set height and width, so assuming that your SVG images are also a set size and do not change with page size you can do something like this.
body {
background-color: #de4e40;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
}
.squareLoader {
/* added 'position: relative', because parent elements of absolute positioned elements have to be positioned to prevent mayhem */
position: relative;
height: 200px;
width: 200px;
background-color: white;
border: 1px solid black;
border-radius: 50%;
}
.avatar {
position: absolute;
left: 75px;
top: 75px;
border: 1px solid black;
height: 50px;
width: 50px;
}
.avatarN {
top: -25px;
}
.avatarS {
top: 175px;
}
.avatarE {
left: 175px;
}
.avatarW {
left: -25px;
}
and the HTML with .avatar <div>s (you can stick the SVG images inside these divs):
<div class='squareLoader'>
<div class="avatar avatarN"></div>
<div class="avatar avatarS"></div>
<div class="avatar avatarE"></div>
<div class="avatar avatarW"></div>
</div>
In the previous example all four avatar <div>s are given a height and width of 50px.
.avatarN has a top position of -25px because that is half of the image's height and a left position of 75px (half of .squareLoader's width minus half of the image's width).
.avatarW has a top position of 75px (half of .squareLoader's height minus half of the image's height) and a left position of 25px, which is half of the image's height.
And so on for the other divs.
If you are going to make your .squareLoader <div> resize based on the page size, and the images resize based on page size, you can use the calc() CSS function which can be used anywhere a length unit is allowed in CSS.
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
w3Schools has a pretty decent cursory explanation of all the units allowed in CSS:
https://www.w3schools.com/cssref/css_units.asp
And also, here's their page on position values in CSS as well:
https://www.w3schools.com/cssref/pr_class_position.asp
Whether or not you are using flexbox, you'll still have to use the position property to get the images where you want them.
One idea to create this is to consider only background and it will be easier to handle:
body {
background-color: #de4e40;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
}
.squareLoader {
height: 250px;
width: 250px;
background:
url(https://picsum.photos/50/50?image=1069) top center,
url(https://picsum.photos/50/50?image=1069) bottom center,
url(https://picsum.photos/50/50?image=1069) left center,
url(https://picsum.photos/50/50?image=1069) right center,
/*the circle*/
radial-gradient(farthest-side,
#fff calc(100% - 32px),#000 calc(100% - 30px),
#000 calc(100% - 30px),#000 calc(100% - 20px),
transparent calc(100% - 18px));
background-repeat:no-repeat;
}
<div class='squareLoader'></div>

Achieve animated seesaw -ish effect with linear-gradient (pure CSS)

I have an element with one diagonal side achieved by adjusting linear-gradient and height - in two different states. Now I try to toggle between these states and have a smooth transition of the red triangle, so that it would look like a seesaw :-) The problem is, that from one state to another it changes the direction and is jumpy, I did not find a way to animate it fluently .. Is there a way to to what I want using pure CSS e.g. using transitions?
let btn = document.getElementsByTagName('button')[0];
let stage = document.getElementById('stage');
btn.addEventListener('click', function() {
stage.classList.toggle('fixie');
});
body,
ul {
padding: 0;
margin: 0;
}
#stage {
width: 100%;
height: 14em;
background: pink;
padding: 0;
border: 1px solid blue;
}
#stage::before {
display: block;
position: relative;
width: 100%;
height: 100%;
/*as high as #stage*/
opacity: 0.4;
content: '';
z-index: 1;
background: linear-gradient(to left bottom, red 50%, pink 50%);
/*transition: height 4s;*/
/*transition: linear-gradient 4s 8s;*/
}
#stage.fixie::before {
height: 30%;
background: linear-gradient(to right bottom, red 50%, pink 50%);
}
<div id="stage"></div>
<button>animate gradient</button>
Here is my FIDDLE
As you can't animate linear-gradient, here is a workaround using transform
In this sample I used skew. As the degree of skew will differ based on the width/height, and as long as its ratio is kept, this will be fully responsive, else you'll need a small script.
(function(){
let btn = document.getElementsByTagName('button')[0];
let stage = document.getElementById('stage');
btn.addEventListener('click', function() {
stage.classList.toggle('fixie');
});
})();
body, ul {
padding: 0;
margin: 0;
}
#stage {
position: relative;
overflow: hidden;
width: 90vw;
height: calc(90vw * 0.2677); /* 0.2677, aspect ratio that match skew degree */
background: pink;
padding: 0;
border: 1px solid blue;
}
.navi {
width: 100%;
min-height: 4em;
height: auto;
background: green;
z-index: 2;
position: relative;
}
#stage::before {
content: '';
position: absolute;
width: 100%;
height: 100%; /*as high as #stage*/
bottom: 100%;
opacity: 0.4;
z-index: 1;
background: red;
transform: skewY(15deg);
transform-origin: left bottom;
transition: transform 2s;
}
#stage.fixie::before {
transform: skewY(-15deg) translateY(100%);
}
.navi ul {
list-style: none;
display: flex;
background: lightblue;
justify-content: flex-end;
}
.navi ul li {
display: flex;
align-items: center;
justify-content: center;
min-width: 4em;
width: auto;
height: 2em;
margin: 1px;
background: yellow;
}
<div id="stage"></div>
<button>
animate
</button>
Side note:
One can use any fixed value instead of vw, as long as the #stage's ratio is kept. If to change ratio, you'll either need a script, since CSS calc can't do math with sqrt and sin/cos etc. to get the angle, or using media query's, and have angle's and ratio's manually set for different screens.

Horizontally fix background image to logo in header

my problem is quite simple. I need the diagonal line in the background image to align with the "X" in the logo and make it stay there no matter how wide the viewport is. I tried to achieve it with css only but with no result. It´s gonna need some javascript I suppose but I have no idea where to start.
<body>
<header>
<div class="container">
<svg class="logo"></svg>
</div>
</header>
</body>
* {
box-sizing: border-box
}
body {
background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
header {
opacity: 1;
height: 135px;
line-height:135px;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 5;
transition: all 0.3s;
z-index: 1000;
text-align: center;
}
.container {
width: 100%;
max-width: 1200px;
line-height: 135px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
padding: 0 80px;
}
.logo {
max-width: 200px;
float: left;
}
http://codepen.io/easynowbaby/pen/qdLbgP
Thanks!
looks like what you want is to play around with the background position, try something like this,
background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center -110px;

Categories