I have this simple container, and generated some vertical stripes to use as background.
export default function App() {
return <div className="container"></div>;
}
.container {
height: 200px;
width: 100%;
background-image: linear-gradient(
45deg,
#000000 12.5%,
#ffffff 12.5%,
#ffffff 50%,
#000000 50%,
#000000 62.5%,
#ffffff 62.5%,
#ffffff 100%
);
background-size: 11.31px 11.31px;
position: relative;
}
I want to create a pointer (arrow), that is positioned at the top, or bottom, but that has the same background as the parent. And no matter which value I give to left or right, it should have the stripes aligned with the parent's.
Right now, I have this code for the pseudo-element.
.container::after {
content: "";
position: absolute;
bottom: 100%;
background-image: inherit;
background-size: inherit;
width: 25px;
height: 25px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
left: 27px;
}
But as you can see in the Sandbox below, the stripes are not aligned correctly of the .container, I mean, they do not come as "continuation" of the said background. Is there a possible trick I can make it part of the same background?
Sandbox link: https://codesandbox.io/s/hopeful-browser-tnt8zq
Here's also a picture for reference.
https://i.imgur.com/D3VbYAa.png
The stripes should blend like this, no matter where the arrow is positioned horizontally.
https://i.imgur.com/kb0uQTK.png
Use This code
.container {
height: 200px;
width: 100%;
background-image: linear-gradient(
45deg,
#000000 12.5%,
#ffffff 12.5%,
#ffffff 50%,
#000000 50%,
#000000 62.5%,
#ffffff 62.5%,
#ffffff 100%
);
background-size: 11.31px 11.31px;
position: relative;
}
.container::after {
content: "";
position: absolute;
bottom: 100%;
background-image: inherit;
background-size: inherit;
width: 25px;
height: 25px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
left: 48%;
top:50%;
}
You can make things quite flexible, easy to change, by using CSS variables.
This snippet scraps the pseudo element, makes the container a bit bigger and cuts out the shape required. The way you are assured of getting the correctly aligned background.
Set the width, height and distance along the left of the pointy bit as you require in those CSS variables.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 50px;
}
.container {
--aH: 25px;
/* height of the arrow */
--aW: 25px;
/* width of the arrow */
--aL: 27px;
/* distance along the top of the start of the arrow */
--h: 200px;
/* height of container */
height: calc(var(--h) + var(--aH));
width: 100%;
background-image: linear-gradient( 45deg, #000000 12.5%, #ffffff 12.5%, #ffffff 50%, #000000 50%, #000000 62.5%, #ffffff 62.5%, #ffffff 100%);
background-size: 11.31px 11.31px;
position: relative;
clip-path: polygon(0 var(--aH), var(--aL) var(--aH), calc(var(--aL) + (var(--aW) / 2)) 0, calc(var(--aL) + var(--aH)) var(--aH), 100% var(--aH), 100% 100%, 0 100%);
}
<div class="container"></div>
UPDATE: there is a requirement to have the container height fixed by its content, not a px value. This snippet is as above except the background image and its associated clip path is put onto the container's before pseudo element. That way it can pick up the height of the container and add further height to accommodate the arrow.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 50px;
}
.container {
--aH: 25px;
/* height of the arrow */
--aW: 25px;
/* width of the arrow */
--aL: 27px;
/* distance along the top of the start of the arrow */
position: relative;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
--h: 100%;
/* height of container */
height: calc(var(--h) + var(--aH));
width: 100%;
transform: translateY(calc(-1 * var(--aH)));
background-color: pink;
background-image: linear-gradient( 45deg, #000000 12.5%, #ffffff 12.5%, #ffffff 50%, #000000 50%, #000000 62.5%, #ffffff 62.5%, #ffffff 100%);
background-size: 11.31px 11.31px;
clip-path: polygon(0 var(--aH), var(--aL) var(--aH), calc(var(--aL) + (var(--aW) / 2)) 0, calc(var(--aL) + var(--aH)) var(--aH), 100% var(--aH), 100% 100%, 0 100%);
z-index: -1;
}
<div class="container">some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br></div>
We can play with clip-path values and position left values to get the desire outcome.
please try with below code.
.container::after {
content: "";
position: absolute;
bottom: 100%;
background-image: inherit;
background-size: inherit;
width: 25px;
height: 25px;
clip-path: polygon(40% 0%, 0% 100%, 100% 95%);
left: 20px;
}
Related
I have a card and images are fetched from BE. The image is a background image of a card. The text goes above this image. I need to add a gradient above the image and below text. Also when user hovers over the card, gradient color should change. How do I make the image to fill the entire card and show linear-gradient on an image?
.card {
position: relative;
margin-left: 25px;
min-width: 245px;
height: 293px;
border-radius: 20px;
box-shadow: 0px 4px 12px 1px var(--box-shadow-color);
margin-right: 1rem;
display: flex;
flex-direction: column;
align-items: center;
align-items: center;
justify-content: center;
z-index: 2;
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transform: scale(1);
transition-duration: 300ms;
}
<ul class="carousel" data-target="carousel">
<li class="card" data-target="card">
<img class="background" src="../scr/images/image.png">
<h2> Title
<h2>
</li>
</ul>
// enter code here
.card {
position: relative;
margin-left: 25px;
min-width: 245px;
height: 293px;
border-radius: 20px;
box-shadow: 0px 4px 12px 1px var(--box-shadow-color);
margin-right: 1rem;
display: flex;
flex-direction: column;
align-items: center;
align-items: center;
justify-content: center;
z-index: 2;
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transform: scale(1);
transition-duration: 300ms;
display:inline-block;
}
.pickgradient {
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
img{
position:relative;
z-index:-1;
display:block;
height:200px; width:auto;
}
<ul class="carousel" data-target="carousel">
<li class="card" data-target="card">
<div class="pickgradient">
<img src="https://i.imgur.com/5I0iHYf.jpg" />
</div>
<h2> Title dfdf
</h2>
</li>
</ul>
try this.
body {
font-family: 'Segoe UI', 'San Francisco', Calibri, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.c-graidient {
background: #000;
background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-size: 400% 400%;
background-repeat: no-repeat;
display: flex;
width: 500px;
height: 500px;
max-width: 100vw;
max-height: auto;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
cursor: pointer;
transition: .5s all;
}
.c-graidient__img {
position: absolute;
left: 0;
top: 0;
background-position: center center;
background-repeat: no-repeat;
background: #000;
background-size: cover;
width: 100%;
height: auto;
z-index: 1;
opacity: .5;
mix-blend-mode: screen;
}
.c-graidient__title {
position: relative;
z-index: 10;
text-transform: uppercase;
letter-spacing: .05em;
}
.c-graidient:hover {
background-position: 100% 100%;
}
.c-graidient:hover__title {
text-shadow: 0 0 20px black;
}
<a class="c-graidient">
<img class="c-graidient__img" src="https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb" />
<h2 class="c-graidient__title">Gradient Hover Effect</h2>
</a>
Here is a solution, try this.
body {
font-family: 'Segoe UI', 'San Francisco', Calibri, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.c-graidient {
background: #000;
background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-size: 400% 400%;
background-repeat: no-repeat;
display: flex;
width: 500px;
height: 500px;
max-width: 100vw;
max-height: 100vh;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
cursor: pointer;
transition: .5s all;
}
.c-graidient__img {
position: absolute;
left: 0;
top: 0;
background: #000 url(https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb) no-repeat center center;
background-size: cover;
width: 100%;
height: 100%;
z-index: 1;
opacity: .5;
mix-blend-mode: screen;
}
.c-graidient__title {
position: relative;
z-index: 10;
text-transform: uppercase;
letter-spacing: .05em;
}
.c-graidient:hover {
background-position: 100% 100%;
}
.c-graidient:hover__title {
text-shadow: 0 0 20px black;
}
<a class="c-graidient">
<div class="c-graidient__img"></div>
<h2 class="c-graidient__title">Gradient Hover Effect</h2>
</a>
I need to reverse the wipe animation when the mouse moves off the button. Is there a way to do this in only CSS?
I know I can reverse the animation, but I'm not sure where to put in the CSS file in order to get the right animation. If I put it in .get-started, it wipes the border and I'm unable to interact with the button completely.
HTML:
<div class="get-started" id="button">
<h4 class="part1">Get <span class="part2">Started</span></h4>
</div>
CSS:
body {
background:black;
}
#button {
display: flex;
font-size: 2.5rem;
color: white;
align-items: center;
justify-content: center;
width: 250px;
height: 75px;
position: relative;
top: -30%;
left: calc(50% - 125px);
}
.get-started {
--borderWidth: 5px;
position: relative;
border-radius: var(--borderWidth);
background-color: #8551FF;
box-shadow: inset 0 0 0 5px white;
z-index:1;
}
.get-started h4.part1 {
color: #FFFFFF;
font-family: 'Coves Light';
font-weight: normal;
}
.get-started span.part2 {
color: #5EFF00;
font-family: 'Coves';
font-weight: bold;
}
.get-started:after {
content: '';
position: absolute;
}
.get-started:hover:after {
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 2px;
background-size: 300% 300%;
animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
}
/* motion */
#keyframes gradient-animation {
0% {
background-position: 15% 0%;
}
50% {
background-position: 85% 100%;
}
100% {
background-position: 15% 0%;
}
}
#keyframes frame-enter {
0% {
clip-path: polygon(0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 5px), 5px 100%, 100% 100%, 100% 0%, 0% 0%);
}
25% {
clip-path: polygon(0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 100% 100%, 100% 0%, 0% 0%);
}
50% {
clip-path: polygon(0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, 100% 0%, 0% 0%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 5px 100%, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 0%, 0% 0%);
}
100% {
-webkit-clip-path: polygon(0% 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 0% 100%);
}
}
Runnable Snippet
You could try
.get-started:not(:hover):after {}
with an inversed animation. But it can have unwanted behaviour on initial pageload, it always starts with this animation I guess. Sometimes you can't avoid javascript. Adding a class on mouseout and removing it again on mouseenter might work, so you can assign a reverse animation to this class.
var els = document.querySelectorAll('.get-started');
for (var i = 0; i < els.length; i++) {
els[i].addEventListener('mouseleave', function(e) {
e.target.classList.add('mouseleaveAnimationClass');
});
els[i].addEventListener('mouseenter', function(e) {
e.target.classList.remove('mouseleaveAnimationClass');
});
}
Image: Circular spinner rotating along the border rim of other solid circle
Please visit: https://codepen.io/sadashivjp/pen/oqqzwg
I have create a UI codepen here. You are free to make any changes in this, and post the solution here.
The same code is as follows:
.outer-circle{
width:330px;
height:330px;
border:30px solid #001b33;
position:absolute;
top:0; bottom:0; left:0;right:0;
margin:auto;
border-radius:50%;
}
.spinner {
animation: rotate 5s linear infinite;
border-radius: 50%;
height: 360px;
width: 360px;
position: relative;
left: -15px;
top: -15px;
}
.spinner:before,
.spinner:after {
content: '';
position: absolute;
}
.spinner:before {
border-radius: 50%;
background:
linear-gradient(0deg, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%) 0% 0%,
linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.5) 100%) 100% 0%,
linear-gradient(180deg, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%,
linear-gradient(360deg, hsla(0, 0%, 100%, 0.60) 0%, hsla(0, 0%, 100%, 0.70 ) 100%) 0% 100%
;
background-repeat: no-repeat;
background-size: 50% 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}
.spinner:after {
background: black;
border: 15px solid #001b33;
border-radius: 50%;
top: 3%;
bottom: 3%;
left: 3%;
right: 3%;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<div class="outer-circle">
<div class="spinner"></div>
</div>
There are two problems in this code:
1) It is causing wobbling(shaking) effect of spinner circle in IE11 browser. But, works perfect in Google chrome browser.
2) As in attached image, need the similar effect of half moon shaped(cylindrical bottom shaped) at the leading edge at the front of the inner white spinner circle.
How to solve these two issues?
Modification of my existing code or providing solution with SVG or Canvas on any other would be fine.
Add a div inside your spinner.
.outer-circle{
width:330px;
height:330px;
border:30px solid #001b33;
position:absolute;
top:0; bottom:0; left:0;right:0;
margin:auto;
border-radius:50%;
}
.spinner {
animation: rotate 5s linear infinite;
border-radius: 50%;
height: 360px;
width: 360px;
position: relative;
left: -15px;
top: -15px;
}
.spinner:before,
.spinner:after {
content: '';
position: absolute;
}
.spinner:before {
border-radius: 50%;
background:
linear-gradient(0deg, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%) 0% 0%,
linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.5) 100%) 100% 0%,
linear-gradient(180deg, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%,
linear-gradient(360deg, hsla(0, 0%, 100%, 0.60) 0%, hsla(0, 0%, 100%, 0.70 ) 100%) 0% 100%
;
background-repeat: no-repeat;
background-size: 50% 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}
.spinner:after {
background: black;
border: 15px solid #001b33;
border-radius: 50%;
top: 3%;
bottom: 3%;
left: 3%;
right: 3%;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.circle{
background: #b1bac1;
width: 10px;
height: 10px;
position: absolute;
top: 177px;
bottom: 0;
left: 0;
right: 0;
border-radius: 50% 50%;
}
<div class="outer-circle">
<div class="spinner">
<div class="circle">
</div>
</div>
</div>
.outer-circle{
width:330px;
height:330px;
border:30px solid #001b33;
position:absolute;
top:0; bottom:0; left:0;right:0;
margin:auto;
border-radius:50%;
}
.spinner {
animation: rotate 5s linear infinite;
border-radius: 50%;
height: 360px;
width: 360px;
position: relative;
left: -15px;
top: -15px;
}
.spinner:before,.spinner:after,
.outer-circle:after {
content: '';
position: absolute;
}
.spinner:before {
border-radius: 50%;
background:
linear-gradient(0deg, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%) 0% 0%,
linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.5) 100%) 100% 0%,
linear-gradient(180deg, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%,
linear-gradient(360deg, hsla(0, 0%, 100%, 0.60) 0%, hsla(0, 0%, 100%, 0.70 ) 100%) 0% 100%
;
background-repeat: no-repeat;
background-size: 50% 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}
.spinner:after{
background: #afb7bf;
height: 15px; width:15px;
border-radius: 50%;
top: 175px;
left: -1px;
right: -100px;
bottom: 0px;
}
.outer-circle:after {
background: black;
border: 15px solid #001b33;
border-radius: 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<div class="outer-circle">
<div class="spinner"></div>
</div>
I hope this is the solution you are looking for!
Image: Spinner rotating along the border rim of other solid circle
Visit https://codepen.io/bygrace1986/pen/wmyarb
HTML:
<div class="outer-circle">
<div class="spinner"></div>
</div>
CSS:
.outer-circle{
width:330px;
height:330px;
border:30px solid #001b33;
position:absolute;
top:0; bottom:0; left:0;right:0;
margin:auto;
border-radius:50%;
}
.spinner {
animation: rotate 4s linear infinite;
border-radius: 50%;
height: 360px;
width: 360px;
position: relative;
left: -15px;
top: -15px;
}
.spinner:before,
.spinner:after {
content: '';
position: absolute;
}
.spinner:before {
border-radius: 50%;
background:
linear-gradient(0deg, hsla(0, 0%, 100%, 1) 50%, hsla(0, 0%, 100%, 0.9) 100%) 0% 0%,
linear-gradient(90deg, hsla(0, 0%, 100%, 0.9) 0%, hsla(0, 0%, 100%, 0.6) 100%) 100% 0%,
linear-gradient(180deg, hsla(0, 0%, 100%, 0.6) 0%, hsla(0, 0%, 100%, 0.3) 100%) 100% 100%,
linear-gradient(360deg, hsla(0, 0%, 100%, 0.3) 0%, hsla(0, 0%, 100%, 0 ) 100%) 0% 100%
;
background-repeat: no-repeat;
background-size: 50% 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}
.spinner:after {
background: white;
border: 15px solid #001b33;
border-radius: 50%;
top: 3%;
bottom: 3%;
left: 3%;
right: 3%;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
The inner spinner circle is wobbling(shaking) in IE 11 browser. It works perfectly in Google chrome. Have to test in IE browser only to look at the issue. Appreciate any suggestion/help here...........................................................................................................................................................
I have created a fixed menu for my website.
Everything is working quite fine, the problem is;
When I scroll down, as soon as the fixed menu starts animating, if I scroll down faster it stops, and when I stop scrolling down, the animation continues until it gets fixed.
The JS is below;
function init() {
window.addEventListener("scroll", function() {
var topbar = $("#topbar"),
header = $("#header-main"),
hdr_img = $("#header-main .inner img"),
hdr_inner = $("#header-main .inner"),
search = $("#search"),
cart = $("#cart");
$(window).width() > 1200 && ($(this).scrollTop() > 235 ? (header.addClass("sabit"), hdr_inner.addClass("sabit"), search.addClass("sabit"), cart.addClass("sabit"), hdr_img.addClass("sabit"), topbar.addClass("sabit"), header.stop().animate({
top: "-44px",
opacity: 1
}, 800), topbar.stop().animate({
top: "-44px",
opacity: 0
}, 900)) : $(this).scrollTop() < 1 && (header.stop().animate({
top: "0px",
opacity: 1
}, 800), topbar.stop().animate({
top: "0",
opacity: 1
}, 1300), header.removeClass("sabit"), hdr_inner.removeClass("sabit"), search.removeClass("sabit"), cart.removeClass("sabit"), hdr_img.removeClass("sabit"), topbar.removeClass("sabit")))
})
}
window.onload = init();
Also CSS codes are below;
#topbar {
color: #7BBD42;
background: #2e3a47;
background-image: url("//images....com./sprites/kullanicimenupat.png");
padding: 5px 0;
min-height: 30px;
border-bottom: 1px solid #7bbd42;
border-width: 3px;
}
#topbar.sabit {
position: fixed;
width: 100%;
z-index: 99;
top: 0;
}
#header-main {
background-color: #ffffff;
min-height: 107px;
color: #8c8c8c;
}
#header-main.sabit{
position : fixed;
width: 100%;
z-index: 1010;
padding-top: 35px;
border-bottom: 1px solid #AFC999;
min-height: 100px;
min-height: 99px;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(245,245,245,1)), color-stop(93%, rgba(237,237,237,1)), color-stop(99%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
}
#header-main .inner {
text-align: left;
margin-top: 25px;
padding: 0;
#header-main .logo img {
/*background-color: #7bbd42;*/
transition: all 0.4s ease-in 0s;
}
#header-main .inner.sabit{
margin-bottom: -15px;
margin-top: 18px;
}
#header-main .inner.sabit img {
max-width: 75%;
margin-top: -4px;
transition: all 0.5s ease 0s;
}
Use a setTimeout inside the scroll event:
var timerX = -1;
$(window).on('scroll', function () {
clearTimeout(timerX);
timnetToChangVp = setTimeout(function() {
init();
}, 200);
});
This is happening because of .stop().
Stop the currently-running animation on the matched elements.
Every time when you scrolling it stopping animation and starting again. Remove .stop() you can see effect then.