I'm trying to make an animation. The essence of the animation is that when scrolling down, the text decreases, and if up, it increases. And when scrolling down it should remain fixed. But I have a problem: when you zoom in and out, the text is not linked to any point, so it is more clear to attach a gif
An example of how it should be: Click
An example of what actually happens: Click
HTML
<div class="main__logo">
<h1 id="logo">
Fashion
</h1>
</div>
CSS
.main__logo {
font-size: 200px;
position: fixed;
margin-top: 0;
}
.main__logo .logo__sticky {
position: fixed;
font-size: 24px;
margin-top: -80px;
}
#logo {
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
jQuery
$(window).scroll(function () {
if ($(this).scrollTop() > 80) {
$("#logo").addClass("logo__sticky");
} else {
$("#logo").removeClass("logo__sticky");
}
});
I suggest you use animate it will make it easier for you to animate every frame just like the video.
Related
Does anybody know how to play transitions from two separate Components
with the same styling at the same time.
Here is a video, which shows my problem.
https://youtu.be/WNu4Mdfn98U
Important CSS Parts
.Container_Active .Description {
max-height: 500px;
margin-top: 5px;
color: var(--ifm-color-on-primary);
transition: max-height 1000ms ease-in; /* Transiation 1 */
}
.Description {
max-height: 0;
margin: 0;
font-size: var(--ifm-font-size-18);
overflow: hidden;
transition: max-height 1000ms ease-out; /* Transiation 2 */
}
Important HMTL Parts
<div
className={clsx(styles.Container, {
[styles.Container_Active]: active,
})}
>
</div>
<SectionRightItem
key={i}
title={section.title}
description={section.description}
onClick={() => {
setIndex(i);
}}
icon={section.icon}
active={index === i}
/>
My goal is that the one element slowly shows the description and the other element slowly hides the expanded description at the same time.
But somehow the transitions are played in a row, although they are triggered at the same time.
Thank you ^^
Actually your animation is starting at the same time, but the problem is that you use the transition of max-height with a value that's too high, so the transition will start from the height of 500px to 0px, but your content height doesn't even reach half of it, so it appears like there's a delay between your transition
To resolve the problem, you can lower the value of .Container_Active to match your actual description height, or change it to height rather than max-height with an average height of your actual description
Here's a simple snippet about the difference between max-height (light blue) and height (red) for the transition which makes your transition looks like it's delayed, both height / max-height is set to 0 when not opened and 10em when opened
$(function() {
setInterval(function() {
$('div').toggleClass('open');
}, 1500);
});
div {
position: absolute;
}
#front {
max-height: 0;
overflow: hidden;
background: lightblue;
transition: max-height 1000ms ease-in-out;
padding-left: 3em;
}
#front.open {
max-height: 10em;
transition: max-height 1000ms ease-in-out;
}
#back {
height: 0;
background: red;
transition: height 1000ms ease-in-out;
opacity: .75;
}
#back.open {
height: 10em;
transition: height 1000ms ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='front' class='open'>
Hello World Welcome<br/>World</br>Welcome
</div>
<div id='back' class='open'>
BACK
</div>
I have a problem, I need to add a logo to the image. The logo should show up only on hover. Currently, I have this class that is reacting by darkening on hovering:
.et_pb_video_overlay_hover {
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
But when I add there content:url(...) it will show up in the class straight away.
I tried to do
.et_pb_video_overlay :hover{
content: url(https://www.aatevr.com/wp-content/uploads/2019/11/te-Aate-VR-healthcare-Virtual-Reality-e1574673050893.png);
}
But then it doesn't inherit the fading in and out beside the size is all over the image and I would need it to be smaller and in the center.
Is there any way, that I can move just around the content property to make it easy in and out and scale it down without messing up the previous property?
You can move it on :before
like this:
.content:hover:before {
content: "";
background-image: url(https://www.aatevr.com/wp-content/uploads/2019/11/te-Aate-VR-healthcare-Virtual-Reality-e1574673050893.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center;
width: 100px;
height: 100px;
}
Enjoy!
https://codesandbox.io/s/hover-logo-image-show-jtrh4
Set content empty by default in this class .et_pb_video_overlay
.et_pb_video_overlay{
content: '';
}
and then on hover
.et_pb_video_overlay:hover{
content: url(https://www.aatevr.com/wp-content/uploads/2019/11/te-Aate-VR-healthcare-Virtual-Reality-e1574673050893.png);
}
It will work and also you both classes are different .et_pb_video_overlayand .et_pb_video_overlay_hover
I'm not great at making websites but am trying to make my own. Basically i split my page up in two, the left side being a menu bar and the right side containing content. To get a 'cool' blur effect over my menu bar i overlay it with a coloured image, where as the user hovers over it, the opacity changes (with a transition).
It is working as intended except when you click on a link and a new page loads, it doesn't register the hover until you move the mouse, this means the opacity of the image is full until you move even a tiny bit, then it jumps to 0.
Ideally when a new page opens and your mouse is already in the left region, the opacity of the overlaying image would already be 0.
#left {
text-indent: 1cm;
width: 23%;
height: 100%;
position: fixed;
background: rgba(51, 51, 51, 1);
}
#right {
padding-top: 2cm;
width: 77%;
height: auto;
position: absolute;
right: 0;
background: white;
}
#img {
position: absolute;
opacity: 0.6;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
color: #000;
left: 0;
}
#left:hover>#img {
opacity: 0;
}
I hope i have given enough information, thanks in advance
Bas
How do you 'load' the page? is it ajax.load or? because if so, that language is already in use and therefor better to make a hover handler function in there because there is no way your CSS file is gonna notice on load wether the mouse is on your picture already or not untill you`ve moved it
Sorry i cant put comments down therefor i wrote here.
I bought this template a couple of days ago and there is a hover effect which I would like to change. Right now is it like this , that you see couple of pics and if you go with your mouse over it , it will hover ( in gold and some text ) . What im trying is that I would like to change it. I would like to have it at first in this gold way and after you go with the mouse over it , it should be clear.
I'm sitting now since three days on it and I dont know what to do. There are so many script files.
<div class="portfolio-item border portrait fashion">
<div class="portfolio-item-hover">
<div class="portfolio-item-hover-info">
<hr/>
<h3>Schuppenflechten</h3>
<hr/>
</div>
</div>
</div>
here is one of the html code and on this page you can see my problem. It would be very nice if you can help me test
.portfolio-item-hover {
opacity: 0;
}
change opacity to .9 here.
and
.portfolio-item: hover {
opacity: .9;
}
chage opacity to 0 here.
It works..
In your css file fineliner.css, line 836, look for the following
.portfolio-item:hover .portfolio-item-hover {
opacity: 0.9; //change this to 0
}
.portfolio-item-hover {
background: #C5AE87;
height: 100%;
opacity: 0; //change this to 0.9
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
transition: opacity .18s ease-in-out;
-moz-transition: opacity .18s ease-in-out;
-webkit-transition: opacity .18s ease-in-out;
-o-transition: opacity .18s ease-in-out;
}
That's it
I am looking at creating a simple animation in where if you move the mouse open the button opens and you see a word, if you move off of it, the button closes.
What I want though is a reverse order of it opening, so when the mouse moves from the button it slowly closes instead of snapping shut, just like how it opened.
Is there a way to make this possible using only XHTML or HTML5?
If I understood your request right, this is what you want:
<div id="button">
<span>This is your Text</span>
</div>
<style>
#button{
height: 20px;
width: 100px;
background-color: blue;
color: white;
transition: height 0.25s linear 0.25s;
}
#button span{
opacity: 0;
transition: opacity 0.1s linear;
}
#button:hover{
height: 50px;
transition: height 0.25s linear;
}
#button:hover span{
opacity: 1;
transition: opacity 0.1s linear 0.25s;
}
</style>
This snippet creates a button 100x20px and on hover (when you move with your mouse over) it gets bigger and the text gets shown.