I have a DIV utilizing a css background, animation, and clip-path. The svg won't scale responsively whether I'm using vh/vw or percent. It'll scale properly when you change the window's height, but not when you change the window's width. Can you help me figure out which SVG implementation to use to get it to scale 1:1 responsively? I'd like to accomplish this without js but I'm open to it.
HTML
.imageHero {
max-width: 100%;
max-height: 100%;
width: 65vh;
height: 65vh;
margin: 40px;
clip-path: url('#my-clip-path');
animation: clipRotateAnim 6s linear infinite;
position: relative;
overflow: hidden;
}
.imageHero::before {
content: "";
position: absolute;
top: -10%;
bottom: -10%;
left: -10%;
right: -10%;
background: var(--i) center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
animation: inherit;
animation-direction: reverse;
}
#keyframes clipRotateAnim {
to {
transform: rotate(360deg);
}
}
.r0tate {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}
.svg-content {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<center>
<div class="r0tate">
<div class="imageHero" style="--i:url(https://source.unsplash.com/600x600?summer)" width="100%" height="100%">
</div>
<svg class="svg-content" viewBox="0 0 616.8 599" preserveAspectRatio="xMinYMin meet" height="0" width="0">
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.5,0.768 L0.366,1 L0.366,0.732,0.134,0.866 L0.268,0.634 L0,0.634 L0.232,0.5,0,0.366 L0.268,0.366,0.134,0.134 L0.366,0.268 L0.366,0 L0.5,0.232,0.634,0 L0.634,0.268,0.866,0.134 L0.732,0.366 L1,0.366 L0.768,0.5 L1,0.634,0.732,0.634,0.866,0.866 L0.634,0.732 L0.634,1"></path></clipPath>
</svg>
</div>
</center>
fiddle here
Part of the problem are your width and max-width definitions.
Essentially you have to ensure your clipped image keeps its aspect ratio.
You might actually use the css aspect-ratio property – but browser support is still not perfect. Thus we take the old-school aspect-ratio hack.
.imageHero::before {
content: "";
padding-bottom: 100%;
width: 100%;
display: block;
}
.imageHero {
max-width: 65vh;
margin: 0 auto;
clip-path: url('#my-clip-path');
animation: clipRotateAnim 6s linear infinite;
position: relative;
overflow: hidden;
}
/* force aspect ratio 1:1 */
.imageHero::before {
content: "";
padding-bottom: 100%;
width: 100%;
display: block;
}
/* image */
.imageHero::after {
content: "";
position: absolute;
top: -10%;
bottom: -10%;
left: -10%;
right: -10%;
background: var(--i) center;
background-size: cover;
animation: inherit;
animation-direction: reverse;
}
#keyframes clipRotateAnim {
to {
transform: rotate(360deg);
}
}
.imageHero-wrp {
position: relative;
overflow: hidden;
padding: 40px;
background: #eee;
}
.svg-content {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
<main>
<div class="imageHero-wrp">
<div class="imageHero" style="--i:url(https://source.unsplash.com/600x600?summer)" width="100%" height="100%">
</div>
<svg class="svg-content" viewBox="0 0 1 1">
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
<path
d="M0.5,0.768 L0.366,1 L0.366,0.732,0.134,0.866 L0.268,0.634 L0,0.634 L0.232,0.5,0,0.366 L0.268,0.366,0.134,0.134 L0.366,0.268 L0.366,0 L0.5,0.232,0.634,0 L0.634,0.268,0.866,0.134 L0.732,0.366 L1,0.366 L0.768,0.5 L1,0.634,0.732,0.634,0.866,0.866 L0.634,0.732 L0.634,1z">
</path>
</clipPath>
</svg>
</div>
</main>
Smil animated clip-path
As an alternative you might also animate the clip-path itself via <animateTransform>
.imageHero {
max-width: 65vh;
margin: 40px auto;
clip-path: url('#my-clip-path');
position: relative;
overflow: hidden;
}
/* force aspect ratio 1:1 */
.imageHero::before {
content: "";
padding-bottom: 100%;
width: 100%;
display: block;
}
/* image element */
.imageHero::after {
content: "";
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
background: var(--i) center;
background-size: cover;
}
.r0tate {
position: relative;
width: 100%;
padding-bottom: 100%;
overflow: hidden;
}
.svg-content {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
<main>
<div class="r0tate">
<div class="imageHero" style="--i:url(https://source.unsplash.com/600x600?summer)" width="100%" height="100%">
</div>
<svg class="svg-content" viewBox="0 0 1 1" aria-hidden="true">
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
<path
d="M0.5 0.755l-0.127 0.22l0-0.254l-0.221 0.127l0.128-0.22l-0.255 0l0.22-0.128l-0.22-0.127l0.255 0l-0.128-0.22l0.221 0.127l0-0.255l0.127 0.221l0.127-0.221l0 0.255l0.221-0.127l-0.128 0.22l0.255 0l-0.22 0.127l0.22 0.128l-0.255 0l0.128 0.22l-0.221-0.127l0 0.254z">
<animateTransform attributeName="transform"
type="rotate"
from="0 0.5 0.5"
to="360 0.5 0.5"
dur="6s"
repeatCount="indefinite"/>
</path>
</clipPath>
</svg>
</div>
</main>
This might actually be more performant since you're just rotating the the clip-path and not both image and parent element.
I've prepared a solution, if that's what you mean. .imageHero{position: absolute;} That's all I've set it to, plus r0tate{display: flex; justify-content: center;} if you want to center it.
.imageHero {
max-width: 60%;
max-height: 60%;
width: 65vh;
height: 65vh;
margin: 40px;
clip-path: url("#my-clip-path");
animation: clipRotateAnim 6s linear infinite;
position: absolute;
overflow: hidden;
}
.imageHero::before {
content: "";
position: absolute;
top: -10%;
bottom: -10%;
left: -10%;
right: -10%;
background: var(--i) center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
animation: inherit;
animation-direction: reverse;
}
#keyframes clipRotateAnim {
to {
transform: rotate(360deg);
}
}
.r0tate {
display: flex;
justify-content: center;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}
.svg-content {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!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>
<center>
<div class="r0tate">
<div
class="imageHero"
style="--i: url(https://source.unsplash.com/600x600?summer)"
width="100%"
height="100%"
></div>
<svg
class="svg-content"
viewBox="0 0 616.8 599"
preserveAspectRatio="xMinYMin meet"
height="0"
width="0"
>
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
<path
d="M0.5,0.768 L0.366,1 L0.366,0.732,0.134,0.866 L0.268,0.634 L0,0.634 L0.232,0.5,0,0.366 L0.268,0.366,0.134,0.134 L0.366,0.268 L0.366,0 L0.5,0.232,0.634,0 L0.634,0.268,0.866,0.134 L0.732,0.366 L1,0.366 L0.768,0.5 L1,0.634,0.732,0.634,0.866,0.866 L0.634,0.732 L0.634,1"
></path>
</clipPath>
</svg>
</div>
</center>
</body>
</html>
jsfiddle: https://jsfiddle.net/rmcnt9a1/
I am making a hover effect on the image. I set the image to grayscale by default and when it hovered over, a circle follows the cursor and shows the colored part. Basically, there are two images. grayscale one is shown by default and on hover inside the circle, the colored part is shown.
Everything is working good except when I try to size the image using background-size the circle part doesn't follow. As the background property sets the circle part image according to its size. See the code:
I set the background-size of video card to 100% to fill up its parent container but when I do it for the circle, the image is sized inside the circle.
$('.video-card').mousemove(function(e) {
var offs = $(this).offset(),
p = {
x: offs.left,
y: offs.top
},
mPos = {
x: e.pageX,
y: e.pageY
},
x = mPos.x - p.x - 75,
y = mPos.y - p.y - 75;
$('.gray', this).css({
left: x,
top: y,
backgroundPosition: -x + 'px ' + -y + 'px'
});
});
.video-card {
position: relative;
width: 100%;
height: 950px;
overflow: hidden;
background-size: 100% !important;
}
.video-card-overlay {
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: gray;
filter: grayscale(100%);
background-size: 100% !important;
}
.gray {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
display: none;
border-radius: 50%;
}
.video-card:hover>.gray {
display: block;
}
.video-gallery-section .container {
max-width: 100%;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-card" style="background: url('assets/img/home/1.png') no-repeat">
<div class="video-card-overlay" style="background: url('assets/img/home/1.png') no-repeat"></div>
<div class="gray" style="background: url('assets/img/home/1.png') no-repeat"></div>
</div>
How about using clip-path instead of trying to achieve the same effect through positioning?
const $overlay = $('.video-card-overlay');
$('.video-card').mousemove(function (e) {
$overlay.css({
clipPath: `circle(150px at ${e.offsetX}px ${e.offsetY}px)`
})
});
.video-card {
height: 950px;
position: relative;
width: 100%;
}
.gray,
.video-card-overlay {
background-image: url('assets/img/home/1.png');
background-position: center center;
background-size: cover;
inset: 0;
position: absolute;
}
.gray {
filter: grayscale(100%);
}
.video-card:not(:hover) .video-card-overlay {
display: none;
}
<div class="video-card">
<div class="gray"></div>
<div class="video-card-overlay"></div>
</div>
See how much shorter the code became!
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
I am making an animated wave loading page, and I wanted to switch my current loader with a loading bar, but my loading bar seems to stick at the top I cant put it in the middle of the screen, where the current loader is, I have tried using the centered class that the current loader has and when I use that class the loading bar disapears, how could I do it?
<title>Loading...</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,400;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
</head>
<script>
var i = 0;
var txt = '...';
var speed = 250;
function letterbyletter() {
if (i < txt.length) {
document.getElementById("lbl").innerHTML += txt.charAt(i);
i++;
setTimeout(letterbyletter, speed);
}
}
var o = 0;
function move() {
if (o == 0) {
o = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
o = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
</script>
<body onload="letterbyletter(); move()">
<div class="waveWrapper waveAnimation">
<div id="myProgress">
<div id="myBar"></div>
</div>
<div class="centered"><div class="loader"></div></div>
<div class="centered" style="padding-top: 10%"><h4>A carregar as suas mensagens</h4><h4 id="lbl"></h4></div>
<div class="waveWrapperInner bgMiddle">
<div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div>
</div>
<div class="waveWrapperInner bgBottom">
<div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div>
</div>
</div>
</body>
body{
background-color: #076585;
font-family: 'Lato', sans-serif !important;
}
.loader {
border: 8px solid #fff;
border-radius: 80%;
border-top: 8px solid #076585;
width: 60px;
height: 60px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#myProgress {
width: 100%;
background-color: #fff;
}
#myBar {
width: 1%;
height: 5px;
background-color: #000000;
}
h4{
position: relative;
display: inline-block;
font-weight: 2000;
font-size: 15px;
}
.centered{
position: fixed;
top: 50%;
left: 50%;
z-index: 20;
transform: translate(-50%, -50%);
}
.waveWrapper {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
background: linear-gradient(0deg, hsla(195, 90%, 27%, 1) 0%, hsla(0, 0%, 100%, 1) 100%, hsla(0, 0%, 100%, 1) 100%);
}
.bgMiddle {
z-index: 10;
opacity: 0.75;
}
.bgBottom {
z-index: 5;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.waveMiddle {
background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
animation: move_wave 10s linear infinite;
}
.waveBottom {
background-size: 50% 100px;
}
.waveAnimation .waveBottom {
animation: move_wave 15s linear infinite;
}
Your class centered works for me. You can add it into your div #myProgress but you have to add margin auto to center your bar inside that div. This works when you need to center a display block element inside another display block element.
<div id="myProgress" class="centered">
<div id="myBar"></div>
</div>
#myBar {
width: 10%;
height: 5px;
background-color: #000000;
margin: 0 auto;
}
I'm trying to arrange 2 divs inside a parent div so that is looks like the parent div is being divided into 2 parts diagonally. The diagram below will show what is required
This is the code i have tried.
App.js
import React, { Component } from "react";
import "./App.css";
class InnerMainDiv extends Component {
constructor() {
super();
this.section = React.createRef();
}
componentDidMount() {
this.handleResize();
window.addEventListener("resize", this.handleResize);
}
componentWillUnmount() {
window.addEventListener("resize", null);
}
handleResize = (WindowSize, event) => {
let h = this.section.current.clientHeight;
let w = this.section.current.clientWidth;
let angle = Math.atan(h / w) * 57.29577;
let rotateProperty = "rotate(" + angle + "deg)";
this.section.current.style.webkitTransform = rotateProperty;
this.section.current.style.transform = rotateProperty;
this.section.current.style.mozTransform = rotateProperty;
};
render() {
return (
<div className="maindiv">
<section ref={this.section}>
<div href="#1" />
</section>
<section ref={this.section}>
<div href="#2" />
</section>
</div>
);
}
}
export default InnerMainDiv;
App.css
html,
body,
div {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
div {
overflow: hidden;
position: relative;
}
section {
position: absolute;
top: -100%;
height: 5000vw;
width: 5000vh;
background: #ccc;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
section + section {
background: #666;
top: 0%;
}
section div {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
Any ideas or suggestions on how to achieve this?.
You can use clip-path to achieve this:
.container {
width: 200px;
height: 200px;
position: relative;
}
.container > * {
height: 100%;
background: red;
}
.container :last-child {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: blue;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 100%);
}
<div class="container">
<div></div>
<div></div>
</div>
But in case you want more browser support you can use rotation like this:
.container {
width: 200px;
height: 200px;
position: relative;
overflow:hidden;
}
.container > * {
height: 100%;
background: red;
}
.container :last-child {
position: absolute;
top: 0;
left: 0;
width: 141%; /* = 1.41 * 100% --> 1.41 = sqrt(2) */
height: 141%;
background: blue;
transform-origin:top left;
transform:rotate(-45deg);
}
<div class="container">
<div></div>
<div></div>
</div>
I need help with setting a diagonal line in css to fit into many resolutions via mobile.
Theres a div with 100% width and a diagonal line that supposed to stay in its place inside that div but every time I change the resolution of the window the line moves up or down.
There must be something I can do.
Heres an example:
.wrapper
{
width: 100%;
position: relative;
border: 1px solid red;
overflow: hidden;
padding-bottom: 12px;
}
.upper-triangle
{
-moz-transform: rotate(-3.5deg);
-o-transform: rotate(-3.5deg);
-webkit-transform: rotate(-3.5deg);
-ms-transform: rotate(-3.5deg);
transform: rotate(-3.5deg);
border-color: black;
border-style: solid;
border-width:2px;
position: relative;
top: -21px;
zoom: 1;
width: calc(100% - -2px);
right: 1px;
}
.arrow-wrapper
{
position: absolute;
top: 41px;
left: 22px;
z-index: 1;
}
.arrow-wrapper::before
{
border-style: solid;
border-width: 16px 0px 0px 20px;
border-color: transparent transparent transparent black;
position: absolute;
content: "";
}
.arrow-wrapper::after
{
position: absolute;
content: "";
width: 0;
height: 0;
margin-top: 8px;
margin-left: 4px;
border-style: solid;
border-width: 16px 0 0 20px;
border-color: transparent transparent transparent white;
}
HTML:
<div class="wrapper">
<div class="headline">
<img class="image" width="36" height="36"/>
</div>
http://jsfiddle.net/MkEJ9/417/
You need to set the anchor point from where to apply the rotation. Your transform is changing the position, because it by default pivots from the center, which in this case is not what you want.
Use in your css:
.upper-triangle {
...
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
...
}
Check this updated fiddle:
http://jsfiddle.net/MkEJ9/420/
Note: in your fiddle I had to change the top to 10px.
Maybe something like this works? fiddle
<script>
$(document).ready(function(){
var viewportHeight = $(window).height();
var viewportWidth = $(window).width();
var width = viewportWidth;
var height = viewportHeight*0.6;
var imgSize = "100%" + ' ' + "100%";
$('.div').css("width", width);
$('.div').css("height", height);
$('.div').css("background-size", imgSize);
});
$(window).resize(function(){
var viewportHeight = $(window).height();
var viewportWidth = $(window).width();
var width = viewportWidth;
var height = viewportHeight*0.6;
var imgSize = width + ' ' + height;
$('.div').css("width", width);
$('.div').css("height", height);
$('.div').css("background-size", imgSize);
});
</script>
<style>
.div { background-image: url('http://indesignsecrets.com/wp-content/uploads/2010/07/step_1.jpg'); background-position: left top; background-repeat: no-repeat; background-color: yellow; }
</style>
<div class="div"></div>
Better to use SVG, which gives nice responsive diagonal lines, works on almost all browsers.
.box {
width: 20rem;
height: 10rem;
background-color: hsla(0, 0%, 70%, 0.3);
cursor: pointer;
position: relative;
}
.svg-stroke {
position: absolute;
width: 100%;
height: 100%;
}
<div class="box">
<svg class='svg-stroke' viewBox='0 0 10 10' preserveAspectRatio='none'>
<line x1='0' y1='0' x2='10' y2='10' stroke='red' stroke-width='.6' stroke-opacity='0.2' />
<line x1='10' y1='0' x2='0' y2='10' stroke='red' stroke-width='.6' stroke-opacity='0.2' />
</svg>
</div>