change clip path smoothly on scroll - javascript

<script>
$("flexbox.center").scroll(changeClass);
function changeClass() {
if($("#coverphoto").hasClass('.coverphoto')){
$("#coverphoto").removeClass("coverphoto").addClass("newshape");
}
else{
$("#coverphoto").removeClass("newshape").addClass("coverphoto");
}
}
</script>
clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
transition: 0.5s ease-in-out;
-----
clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
transition: 0.5s ease-in-out;
Hello,
my goal is to smoothly change the shape of a clipped image on scroll.
My approach was to simply switch between the two css properties on scroll but this does not work. (By the way this works perfectly with :hover on the initial css property)
Any hints are highly appreciated and would mean a lot to me!

You have error in your code, the hasClass() function doesn't take a selector but only the class name :
function changeClass() {
if ($("#cover").hasClass('coverphoto')) {
$("#cover").removeClass("coverphoto").addClass("newshape");
} else {
$("#cover").removeClass("newshape").addClass("coverphoto");
}
}
.coverphoto {
clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
transition: 0.5s ease-in-out;
}
.newshape {
clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover" class="coverphoto">
<img src="https://lorempixel.com/400/150/">
</div>
<button onClick="changeClass()">change</button>
By the way you can optimize your logic by simply using toggleClass() :
function changeClass() {
$("#cover").toggleClass("newshape");
}
.coverphoto {
clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
transition: 0.5s ease-in-out;
}
.newshape {
clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover" class="coverphoto">
<img src="https://lorempixel.com/400/150/">
</div>
<button onClick="changeClass()">change</button>
Here is a trigger on scroll event:
$(document).scroll(function() {
if ($(window).scrollTop() <= 150) {
$("#cover").removeClass("newshape");
} else {
$("#cover").addClass("newshape");
}
});
body {
height: 150vh;
}
.coverphoto {
position: fixed;
clip-path: polygon(0% 0%, 100% 0%, 100% 38.5%, 28.5% 65%, 0 65%);
transition: 0.5s ease-in-out;
}
.newshape {
clip-path: polygon(0% 0%, 100% 0%, 100% 53%, 41% 53%, 0 53%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover" class="coverphoto">
<img src="https://lorempixel.com/400/150/">
</div>

Related

I would like my text to appear from left to right and disappear from left to right as well

I made a simple text with a transition, appearing from left to right when I hover it in CSS.
My code is very simple, as seen in the snippet.
So of course, when I remove my mouse cursor, it is animated in the other direction and the text disappears from right to left.
BUT
I'd like it to disappear from left to right and then reset so it can appear again from left to right, and that's where I'm stuck.
What would be your approach to get such an effect?
Thanks!
.text{
transition: max-width 700ms linear;
max-width: 0%;
overflow: hidden;
white-space: nowrap;
}
.container:hover .text{
max-width: 100%;
}
.container{
padding: 10px 0 10px 0;
width: fit-content;
}
<div class="container">
<div class="text">THIS IS MY TEXT</div>
</div>
You could use CSS animations for this - in the non-hovered state the text moves to left: 100% position and in the hovered state it moves from the -100% position to the 0 position.
If you do this with transitions (rather than setting position left) then the container will maintain the width of the child text.
The wrinkle with this approach is that the very first time, ie onload, the text can be seen going from left to right. To get round this this snippet has a little bit of a hack, the container has opacity 0 for the fist 700ms of the page's life and then is seen.
.text {
display: inline-block;
width: fit-content;
animation: out linear 700ms forwards;
transform: translateX(100%);
}
#keyframes out {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
.container:hover .text {
transform: translateX(0%);
animation: in linear 700ms;
}
#keyframes in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
.container {
padding: 10px 0 10px 0;
width: fit-content;
rheight: fit-content;
animation: reveal 700ms linear;
overflow: hidden;
}
#keyframes reveal {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="container">
<div class="text">THIS IS MY TEXT</div>
</div>
I managed to do it, thanks to A Haworth for pointing me in the right direction.
I now need to retrieve the actual clip-path value so when the mouse is not over before the end of the animation, it doesn't 'jump' like this. I guess I'll need some JS here if this is even possible to do.
.text{
animation: out linear 700ms forwards;
}
.container:hover .text{
animation: in linear 700ms;
}
.container{
padding: 10px 0 10px 0;
width: fit-content;
animation: reveal 700ms linear;
}
#keyframes in {
0% {
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
100% {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
}
#keyframes out {
0% {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
100% {
clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}
}
#keyframes reveal {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="container">
<div class="text">THIS IS MY TEXT</div>
</div>
<p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe, praesentium.</p>
.text{
transition: max-width 700ms linear;
opacity: 0;
height: 20px;
overflow: hidden;
max-width: 0px;
}
.text:hover{
opacity: 1;
max-width: 100%;
}

html/css circular progress bar with image inside

I want to create a circular progress bar around an image that should look like this :
I have tried making the circle fill but it just transforms into a spinner with the following code
.wrapper {
width: 152px;
height: 152px;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #21ac62;
width: 120px;
height: 120px;
animation: fill ease-in-out 3s;
transform: rotate(360deg);
}
.wrapper {
background: url('https://i.ibb.co/5T3p5sY/icon-3151974-1280.png') center no-repeat;
background-size:50%;
}
#keyframes fill{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="jQuery-plugin-progressbar.css">
</head>
<body>
<div class="wrapper">
<div class="loader"></div>
</div>
</body>
</html>
I achieved the goal without changing the HTML layout using clip-path animation.
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
.wrapper {
width: 152px;
height: 152px;
background-image: url('https://i.ibb.co/5T3p5sY/icon-3151974-1280.png');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
.loader {
border: 16px solid #21ac62;
border-radius: 50%;
width: 120px;
height: 120px;
animation: fill linear 3s;
}
#keyframes fill {
0% {
clip-path: polygon(50% 0%, 50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
}
12.5% {
clip-path: polygon(50% 0%, 50% 50%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
}
37.5% {
clip-path: polygon(50% 0%, 50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 0%);
}
62.5% {
clip-path: polygon(50% 0%, 50% 50%, 0% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%);
}
87.5% {
clip-path: polygon(50% 0%, 50% 50%, 0% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
100% {
clip-path: polygon(50% 0%, 50% 50%, 50% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
}
<div class="wrapper">
<div class="loader"></div>
</div>
Edit: This should be smoother:
.wrapper {
width: 152px;
height: 152px;
background-image: url('https://i.ibb.co/5T3p5sY/icon-3151974-1280.png');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
.loader {
border: 16px solid #21ac62;
border-radius: 50%;
width: 120px;
height: 120px;
animation: fill linear 3s;
}
#keyframes fill {
0% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
}
12.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
}
25% {
clip-path: polygon(50% -20.71%, 50% 50%, 120.71% 50%, 120.71% 50%, 120.71% 50%, 120.71% 50%, 100% 0%);
}
37.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 0%);
}
50% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% 120.71%, 50% 120.71%, 50% 120.71%, 100% 100%, 100% 0%);
}
62.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 0% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%);
}
75% {
clip-path: polygon(50% -20.71%, 50% 50%, -20.71% 50%, -20.71% 50%, 0% 100%, 100% 100%, 100% 0%);
}
87.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 0% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
100% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% -20.71%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
}
<div class="wrapper">
<div class="loader"></div>
</div>
For more Information and Full Explaination, Reach to https://dev.to/shantanu_jana/circular-progress-bar-using-html-and-css-1oda
body {
background:#d2eaf1;
}
.circle-wrap {
margin: 150px auto;
width: 150px;
height: 150px;
background: #fefcff;
border-radius: 50%;
border: 1px solid #cdcbd0;
}
.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
width: 150px;
height: 150px;
position: absolute;
border-radius: 50%;
}
.circle-wrap .circle .mask {
clip: rect(0px, 150px, 150px, 75px);
}
.circle-wrap .inside-circle {
width: 122px;
height: 122px;
border-radius: 50%;
background: #d2eaf1;
line-height: 120px;
text-align: center;
margin-top: 14px;
margin-left: 14px;
color: #1e51dc;
position: absolute;
z-index: 100;
font-weight: 700;
font-size: 2em;
display:flex;
align-items:center;
justify-content:center;
}
/* color animation */
/* 3rd progress bar */
.mask .fill {
clip: rect(0px, 75px, 150px, 0px);
background-color: #227ded;
}
.mask.full,
.circle .fill {
animation: fill ease-in-out 3s;
transform: rotate(135deg);
}
#keyframes fill{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(135deg);
}
}
<body>
<div class="circle-wrap">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
</div>
<div class="inside-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-apple" viewBox="0 0 16 16">
<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282z"/>
<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282z"/>
</svg> </div>
</div>
</div>
</body>

How to make earth progress pie [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I would want to add to my website a progress bar with this design:
The progress pie
How do I make a progress pie with an image inside it, and when it moves it display the image inside it with colors?
This is non-trivial but could be achieved by using two images, clip-path and a script, a greyscale image and a coloured image.
Position the greyscale image under the coloured one.
Use clip-path to only show a portion of the coloured image.
Adjust the clip-path values using a JavaScript loop OR using a css key-frames animation
Here's a simplified keyframes example:
.greyscale {
filter: grayscale(1);
}
.color {
overflow: hidden;
animation: clippy 2s infinite;
}
#keyframes clippy {
0% { clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0); }
12.5% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 0, 100% 0, 100% 0, 100% 0); }
25% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 50%, 100% 50%, 100% 50%); }
37.5% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%); }
50% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 100%, 50% 100%); }
62.5% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 100%); }
75% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 0 50%); }
87.5% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 0 0); }
100% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); }
}
div {
border-radius: 50%;
height: 200px;
overflow: hidden;
position: relative;
width: 200px;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
position: absolute;
}
<div>
<img class="greyscale" src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg">
<img class="color" src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg">
</div>

CSS: Change background every few sec?

So I'm new to HTML & CSS and I'm currently doing some research.
I am using this Template and I'm trying to change the background image every 5 seconds.
I already found out, that the background image is defined in the CSS.
#bg:after {
-moz-transform: scale(1.125);
-webkit-transform: scale(1.125);
-ms-transform: scale(1.125);
transform: scale(1.125);
-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
background-image: url("../../images/bg1.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
I would like to have multiple backgrounds that change every few seconds.
How is this possible?
Thanks.
Use this code to change the background color for every 5 seconds.
body {
-webkit-animation-name: bgcolor;
-webkit-animation-duration: 5s;
animation-name: bgcolor;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#-webkit-keyframes bgcolor {
0% {
background: radial-gradient(at 50% -20%, #16113B, #16113B) fixed;
}
14.3% {
background: radial-gradient(at 50% -20%, #9b00a1, #16113B) fixed;
}
28.6% {
background: radial-gradient(at 50% -20%, #0062a1, #16113B) fixed;
}
42.9% {
background: radial-gradient(at 50% -20%, #00a18e, #16113B) fixed;
}
57% {
background: radial-gradient(at 50% -20%, #00a144, #16113B) fixed;
}
71% {
background: radial-gradient(at 50% -20%, #a18200, #16113B) fixed;
}
85.6% {
background: radial-gradient(at 50% -20%, #a10000, #16113B) fixed;
}
100% {
background: radial-gradient(at 50% -20%, #a10000bd, #16113B) fixed;
}
}
#keyframes bgcolor {
0% {
background: radial-gradient(at 50% -20%, #16113B, #16113B) fixed;
}
14.3% {
background: radial-gradient(at 50% -20%, #9b00a1, #16113B) fixed;
}
28.6% {
background: radial-gradient(at 50% -20%, #0062a1, #16113B) fixed;
}
42.9% {
background: radial-gradient(at 50% -20%, #00a18e, #16113B) fixed;
}
57% {
background: radial-gradient(at 50% -20%, #00a144, #16113B) fixed;
}
71% {
background: radial-gradient(at 50% -20%, #a18200, #16113B) fixed;
}
85.6% {
background: radial-gradient(at 50% -20%, #a10000, #16113B) fixed;
}
100% {
background: radial-gradient(at 50% -20%, #a10000bd, #16113B) fixed;
}
}
function run(interval, frames) {
var int = 1;
function func() {
document.body.id = "b"+int;
int++;
if(int === frames) { int = 1; }
}
var swap = window.setInterval(func, interval);
}
run(1000, 10); //milliseconds, frames
#b1 { background: hsl(0, 50%, 50%); }
#b2 { background: hsl(30, 50%, 50%); }
#b3 { background: hsl(60, 50%, 50%); }
#b4 { background: hsl(90, 50%, 50%); }
#b5 { background: hsl(120, 50%, 50%); }
#b6 { background: hsl(150, 50%, 50%); }
#b7 { background: hsl(180, 50%, 50%); }
#b8 { background: hsl(210, 50%, 50%); }
#b9 { background: hsl(240, 50%, 50%); }
#b10 { background: hsl(270, 50%, 50%); }

CSS3 Animation conflicting with CSS3 transition that's triggered by jQuery?

I set up a div so that on click of a button the div would expand upwards to view more content. On second click the button would slide down. I used JS to do this and it works fine.
Secondly I have added an animation to the same div so that at certain points within the animation the div slides up and down. As soon as I added this the animation works fine but the transition and on click of the button to slide the div up/down no longer works and I can't understand why?
Below is the code with both transition and animation applied to the div. There are two fiddles one showing the jQuery slide up/down on its own and the second demonstrating the code below.
Any help would really be appreciated.
HTML
<div class="wrapper">
<div class="content-wrapper">
<div class="padLeft">
<h2>Project Title</h2>
<div class="crossRotate"> Open </div>
</div>
<div class="padLeft">
<p>Paragraph Goes Here</p>
<h3>Play Video</h3>
</div>
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 100px;
position: absolute;
overflow: hidden;
margin: 0;
padding:0;
z-index: 1;
}
#-webkit-keyframes titledrop {
0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
}
#-moz-keyframes titledrop {
0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
}
#keyframes titledrop {
0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
}
.content-wrapper {
position: absolute;
z-index: 999;
background: red;
bottom: -90px;
width: 100%;
-webkit-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
-moz-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
-o-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
-ms-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
-webkit-transition: bottom 1s ease-in;
-moz-transition: bottom 1s ease-in;
-o-transition: bottom 1s ease-in;
-ms-transition: bottom 1s ease-in;
transition: bottom 1s ease-in;
}
.crossRotate {
position: absolute;
background-color: blue;
z-index: 1;
cursor: pointer;
}
JS
var clicked=true;
$(".crossRotate").on('click', function() {
if(clicked) {
clicked=false;
$(".content-wrapper").css({"bottom": "-90px"});
} else {
clicked=true;
$(".content-wrapper").css({"bottom": "0"});
}
});
jsFiddle One - http://jsfiddle.net/8ZFMJ/64/
jsFiddle Two - http://jsfiddle.net/8ZFMJ/63/
I dont know what is you want but if i understand it, this is u need. I dont it like this, but u know what u want. Here for help. Regards!
var clicked=false;
$(".crossRotate").on('click', function(){
if(clicked){
clicked=false;
$(".content-wrapper").animate({"height": "162px"});
}else{
clicked=true;
$(".content-wrapper").animate({"height": "280px"});
}
});
http://jsfiddle.net/8ZFMJ/65/

Categories