How to make gradient border with mouse hover 360 degree rotation - javascript

.clients-img::after {
content: '';
position: relative;
background-image: url('https://i.stack.imgur.com/Y2vyB.png');
background-repeat: no-repeat;
float: left;
margin-left: 15px;
transition: all 1.8s ease;
width: 135px;
height: 135px;
}
.clients-slider-inside img {
border-radius: 50%;
position: absolute;
padding: 14px;
left: 0px;
top: 0px;
width: 135px;
height: 135px;
}
.clients-img:hover::after {
transform: rotate(360deg) translate(0px);
}
<div class="clients-slider-inside">
<div class="clients-img"> <img src="https://i.stack.imgur.com/tz2aw.png" alt="clients img"> </div>
</div>
On Mouse hover rotate 360 degree and On Mouse out no any effect.
This type gradient border. So can you please help me for perfect rotation in circle.

You can avoid using an image and recreate the gradient using multiple linear-gradient on the background of the container. Then the idea is to rotate the whole container and rotate the image in the opposite direction so you create the effect of background rotation.
.clients-img {
display: inline-block;
position: relative;
border-radius: 50%;
background: linear-gradient(to right, #fff 50%, transparent 50%), linear-gradient(-15deg,#6fda44 25%, #fff 80%);
transition:1s all;
}
.clients-img img {
border-radius: 50%;
width: 135px;
height: 135px;
padding: 15px;
vertical-align: top;
transition:1s all;
}
.clients-img:hover {
transform: rotate(360deg);
}
.clients-img:hover img{
transform: rotate(-360deg);
}
<div class="clients-img"> <img src="https://i.stack.imgur.com/tz2aw.png" alt="clients img"> </div>

Related

Making a css animation using a transparent gradient mask

I am currently making an animation that will apply a gradient mask on an image. The mask is a transparent mask and it will transform from right to left of the image. Here is my code.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100vh;
width: 100vw;
background-color: white;
position: relative;
}
.first {
background-image: url('https://i.ibb.co/17zzm7P/flower.jpg');
background-size:cover;
position: absolute;
height: 100%;
width: 100%;
-webkit-mask-image: linear-gradient(to left, transparent 0px, black 20rem, black);
-webkit-animation: rightToLeft 5s forwards;
}
#keyframes rightToLeft {
0% {
-webkit-mask-position: 100vw 0%;
mask-position: 100vw 0%;
}
100% {
-webkit-mask-position: 0vw 0vw;
mask-position: 0vw 0vw;
}
}
</style>
</head>
<body>
<div class="container">
<div id="first" class="first"> </div>
</div>
</body>
</html>
Basically, the animation works well. However, the mask image is only applied to a specific area when it moves from right to left. Because the mask is transparent, I expect when it moves to the new area, the previous area it passed through is also transparent. How can I do to make the previous area transparent too?
Thank you so much for your time.
You are almost good, you only need to disable the repetition by using mask-repeat: no-repeat
.container {
height: 100vh;
background-color: white;
position: relative;
}
.first {
background-image: url('https://i.ibb.co/17zzm7P/flower.jpg');
background-size: cover;
position: absolute;
height: 100%;
width: 100%;
-webkit-mask-image: linear-gradient(to left, transparent, black 20rem);
-webkit-mask-repeat: no-repeat;
-webkit-animation: rightToLeft 5s forwards;
}
#keyframes rightToLeft {
0% {
-webkit-mask-position: 100vw 0%;
mask-position: 100vw 0%;
}
100% {
-webkit-mask-position: 0vw 0vw;
mask-position: 0vw 0vw;
}
}
body {
margin:0;
}
<div class="container">
<div id="first" class="first"> </div>
</div>

Center Position a CSS-Animation Playing With rotate(45deg)

I have the following code:
#containerScroll {
height: 5em;
}
scroll {
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
.first-scroll {
left: calc(52.3% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
left: calc(52.3% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
<div id="containerScroll">
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</div>
On my end, the output is looking like this:
This is exactly what I want since the scroll down button is aligned right on top of the text and I achieved this by setting left: calc(52.3% - 1em) !important;. On my end, this property is whats making it align perfectly on top of the text.
The problem is that when I zoom out, I'm getting this output:
As you can see, the scroll button alignment changes and its moved towards the right, and it is because of the left: calc(52.3% - 1em) !important; property I'm pretty sure. But I do not want to change or remove this property since this is whats making it align perfectly on 100% zoom. Is there a way to make this fixed? For example, when I zoom out on the website, the scroll button alignment does not change and remains constant? Any suggestions?
That's a really cool animation!
To perfectly center it, I made the following changes:
This was being used to center the div, left: calc(52.3% - 1em) !important;; I have removed this completely and have used a simple <center> tag to center it.
The animation code itself then runs directly right of center (which is off-center). You can fix this by moving an element to the left of itself by 50% of its own width with translateX(-50%).
Of course, you can't actually use 50%, because a square box, rotated on its side, increases its width by a factor of about 45%, which means we need to translateY not by 50%, but by 66%.
#containerScroll {
height: 5em;
}
scroll {
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
.first-scroll {
margin: auto;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg) translateX(-66%);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg) translateX(-66%);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg) translateX(-66%);
opacity: 0.7;
}
}
<div id="containerScroll">
<center>
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</center>
</div>
<div style="border:1px solid black;">
<center>•<br>
This dot is perfectly centered.
</center>
</div>
Without a full snippit that allows one to fully recreate your issue, I can only attempt to recreate it using the code you have.
You could place the my-story and containerScroll elements within the section title together. Then make the containerScroll position absolute change the display to flex. Make its top position 0 and declare the width 100% and height 10em or what ever you wish its height to be, just make sure the my-story element has the same top margin set in its css as that of your height from the containerScroll.
I have tested this and when I ZOOM in or out using CNTL + MOUSE WHEEL there is no displacement of the two elements in reference to each other.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
--top-dis: 10em; /* use variable so only change once in dynamic locations */
}
body {
height: 2000px;
}
section {
padding: 60px 0;
overflow: hidden;
}
#containerScroll {
position: absolute;
display: flex;
top: 0%;
background-color: #ddd;
width: 100%;
height: var(--top-dis);
}
.section-title {
text-align: center;
padding-bottom: 30px;
margin-top: var(--top-dis);
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
.first-scroll {
left: calc(50% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
left: calc(50% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
<div class="section-title">
<h2>My Story</h2>
<div id="containerScroll">
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</div>
</div>
On the CSS just add this property to the #containerScroll
position:
fixed;
left: 50%;
top: 90%; transform: translate(-50%, -50%);

Smooth Scroll CSS Property

I have the following code. Even though I have added scroll-behavior: smooth; to .containerScroll, why does it not scroll smoothly to the next section? How can I make it so it scrolls smoothly to the next section? Right now, its not scrolling smoothly to the next section even though I made use of the property. How can I fix this?
.containerScroll {
--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-right: auto;
margin-left: auto;
scroll-behavior: smooth;
}
.first-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
}
#media (min-width:320px) and (max-width:480px) {
.containerScroll {
display: none;
}
}
.long-container {
height: 600px;
background: yellow;
}
#about {
height: 600px;
background: green;
}
<a href="#about">
<div class="containerScroll">
<div class="first-scroll"></div>
<div class="second-scroll"></div>
</div>
</a>
<div id="" class="long-container">
long old container
</div>
<div id="about">
scroll to me
</div>
Add to root html tag:
html {
scroll-behavior: smooth;
}
The smooth scroll behavior should be added to the element that is being scrolled, not to the element that triggers the scroll.
CSS property scroll-behavior: smooth with html tag should wrap the #about div tag. And need CSS property overflow-y: scroll and height prop also.
Idk for some reason this site's code snippet shows error, So if you want to see my explanation in code, visit below codepen.
https://codepen.io/junzero741/pen/zYEWWEK
function scrollf() {//js function
let e = document.getElementById("about");//Your id to scroll
e.scrollIntoView({
block: 'start',
behavior: 'smooth',
inline: 'start'
});
}
.containerScroll {
/*--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-right: auto;
margin-left: auto;
scroll-behavior: smooth; //removed these unwanted lines,u may un comment*/
}
.first-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
cursor: pointer; /*added this for cursor click-like effect*/
}
.second-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
cursor: pointer; /*added this for cursor click-like effect*/
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
}
#media (min-width:320px) and (max-width:480px) {
.containerScroll {
display: none;
}
}
.long-container {
height: 600px;
background: yellow;
}
#about {
height: 600px;
background: green;
}
<div class="containerScroll" onclick="scrollf()"><!--use div with js-->
<div class="first-scroll"></div>
<div class="second-scroll"></div>
</div>
<div id="" class="long-container">
long old container
</div>
<div id="about">
scroll to me
</div>
ReadMe: Nowadays we are not understand what the anchor a tag does,even though it opens a div in the same page
what it actually does is reload the page and show the div.//yes this is false it may not reload the page ,its only my opinion
so in the above code we us pure js to scroll ,
we call this function when containerScroll is clicked,
since its js we dont get a pointable-mouse when we hover over those arrows, so we use cursor: pointer; in css for first-scroll&second-scroll.
This one below is another approach that I got from https://stackoverflow.com/a/70553396/14862885
It preserves your animation, fixed glitches & bugs but still not recommended, unless You need to avoid js
.containerScroll {
--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-right: auto;
margin-left: auto;
scroll-behavior: smooth;
}
.first-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
position: sticky; /*makes scroll arrow to stick to container*/
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: sticky;/*makes scroll arrow to stick to container*/
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
}
#media (min-width:320px) and (max-width:480px) {
.containerScroll {
display: none;
}
}
.long-container {
height: 600px;
background: yellow;
}
#about {
height: 600px;
background: green;
}
.smooth-container {
width: 100%;
height: 600px;
overflow: scroll;
scroll-behavior: smooth;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box;
}
.parent {
width: 100%;
height: 600px;
overflow: hidden;
}
<!-- div tag with class `smooth-container` is wrapping the `long-container` and `about`. and with CSS, `overflow-y: scroll` and `height` value. -->
<div class="parent">
<div class="smooth-container">
<div id="" class="long-container">
long old container
<a href="#about"><!-- added anchor tag inside long-container-->
<div class="containerScroll">
<div class="first-scroll"></div>
<div class="second-scroll"></div>
</div>
</a>
</div>
<div id="about">
scroll to me
</div>
</div>
</div>

How to make the button in such a way that hovering it results in the rotation and spinning of another object?

I have the following code in which the star is automatically "spinning" around the crescent and hovering it makes it "rotate". There is also a button on the left side: when it is hovered, it only changes its background-color and text-color; however, I want the star to start spinning and rotating when the button is hovered (and also want the effects of the button i.e. changing its background color and text color, to maintain simultaneously). I tried using different codes but everything I do results in messing the code up further.
<!DOCTYPE html>
<html>
<head>
<style>
body {
position: relative;
right: -500px;
bottom: -150px;
}
.moon,
.star {
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: 120%; /* Resize the background image to cover the entire container */
-moz-border-radius: 50%; /* to make circle shape */
-webkit-border-radius: 50%;
border-radius: 50%;
}
.moon {
background-color: transparent;
background-image: url("https://i.stack.imgur.com/0bcIk.png");
position: absolute;
width: 200px;
height: 200px;
margin: 50px;
}
.star {
position: relative;
background-color: transparent;
background-image: url("https://i.stack.imgur.com/gjbgR.png");
width: 100px;
height: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.moon:hover .counterrotate {
width: 50%;
height: 50%;
-webkit-animation: ccircle 10s infinite linear;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg);
}
to {
-webkit-transform: rotateZ(360deg);
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg);
}
to {
-webkit-transform: rotateZ(0deg);
}
}
.moon:hover .counterrotate {
animation-name: inherit;
animation-duration: 5s;
transition-duration: 0.2s;
}
button {
background-color: white;
color: black;
text-align: center;
padding: 16px 32px;
font-size: 16px;
cursor: pointer;
border: 2px solid green;
display: inline-block;
transition-duration: 0.3s;
position: relative;
left: -350px;
border-radius: 50px;
bottom: -100px;
}
button:hover {
background-color: green;
color: white;
display: inline-block;
border: 1px solid white;
transition: 0.5s;
}
</style>
</head>
<body style="background-color: green">
<div class="moon">
<div class="rotate">
<div class="counterrotate">
<div class="star"></div>
</div>
</div>
</div>
<button>Hover</button>
</body>
</html>
How can I do that?
If I have understood the requirement correctly, you do not need Javascript for this.
However, CSS is not currently able to style a sibling element that is before a hovered element (it can't 'go back up' the DOM). But it can style a sibling element that follows the hovered element.
So the first change is to put the button element before the moon element. Now when the button element is hovered we can select its immediate sibling using the + combinator and from there we can select the rotate and moon elements to give them the animations required for rotating and spinning. (In this case we have left the definition of rotate as it is in the code in the question and introduced the spin animation to keep the star spinning around its center).
Now when the button is hovered the star rotates (moves in a large circle) and spins (rotates about its own center).
This snippet also makes the star spin when it is hovered and doesn't have any movement when there is no hovering. Obviously you can change the styling to have what you want there. Also the counterrotation is removed and the -webkit- prefixes, just to simplify things (and you don't want -webkit- with no vanilla setting set as well as some browsers may not interpret it).
<!DOCTYPE html>
<html>
<head>
<style>
body {
position: relative;
right: -500px;
bottom: -150px;
}
.moon,
.star {
background-position: center;
/* Center the image */
background-repeat: no-repeat;
/* Do not repeat the image */
background-size: 120%;
/* Resize the background image to cover the entire container */
border-radius: 50%;
}
.moon {
background-color: transparent;
background-image: url("https://i.stack.imgur.com/0bcIk.png");
position: absolute;
width: 200px;
height: 200px;
margin: 50px;
}
.star {
position: relative;
background-color: transparent;
background-image: url("https://i.stack.imgur.com/gjbgR.png");
width: 100px;
height: 100px;
transform: rotate(0deg);
}
button:hover+.moon .star,
.star:hover {
animation: spin 5s infinite linear;
}
#keyframes spin {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
button:hover+.moon .rotate {
width: 100%;
height: 100%;
animation: circle 10s infinite linear;
}
#keyframes circle {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
button {
background-color: white;
color: black;
text-align: center;
padding: 16px 32px;
font-size: 16px;
cursor: pointer;
border: 2px solid green;
display: inline-block;
transition-duration: 0.3s;
position: relative;
left: -350px;
border-radius: 50px;
bottom: -100px;
}
button:hover {
background-color: green;
color: white;
display: inline-block;
border: 1px solid white;
transition: 0.5s;
}
</style>
</head>
<body style="background-color: green">
<button>Hover</button>
<div class="moon">
<div class="rotate">
<div class="star"></div>
</div>
</div>
</body>
</html>

Clip-path arc shape

I'm trying to make arc shape of pseudo-element of the parent div, I'm trying to achieve this look by using clip-path, this is simplified example of the look that I'm after:
I'm kinda limited in what I can change in the current markup, background color is dynamic and that's why I need to inherit it in pseudo element and also there is background image in that whole container. That's why I'm trying to do this with pseudo-elements and clip-path. This is what I tried:
div {
position: relative;
background: rgba(0,0,0,0.5);
height: 100px;
width: 100px;
margin: 100px auto;
}
div:before {
content: '';
position: absolute;
z-index: 2;
height: 50px;
width: 50px;
right: -50px;
bottom: 0;
background: inherit;
clip-path: polygon(0 100%, 0 0, 3% 15%, 6% 27%, 11% 34%, 19% 43%, 26% 53%, 35% 63%, 46% 71%, 54% 77%, 65% 83%, 70% 86%, 81% 91%, 91% 95%, 100% 100%);
}
<div></div>
But as you can see it's far from perfect, you can see the points and it doesn't have that smooth arc look. I'm using SCSS, also I'm open to any JS suggestions.
This is a job for mask:
div {
position: relative;
background: rgba(0,0,0,0.5);
height: 100px;
width: 100px;
margin: 100px auto;
}
div:before {
content: '';
position: absolute;
z-index: 2;
height: 50px;
width: 50px;
left:100%;
bottom: 0;
background: inherit;
-webkit-mask:radial-gradient(farthest-side at top right,transparent 99%,#fff 100%);
mask:radial-gradient(farthest-side at top right,transparent 99%,#fff 100%);
}
<div></div>

Categories