Here's an example of what I am trying to recreate: https://www.hioscar.com/get-quote/
When a user has finished entering information into the input area or selected an option the current line will animate (using translate & opacity, I believe) and the next line will come into view.
I've started something very basic just to get a feel for how it's meant to work using on hover but I'm not sure on how to complete replicate this animation in my own form.
div {
margin-top: 500px;
}
div:hover {
transform: translate(0px, -300px);
opacity: 0.3;
transition: opacity 0.05s linear;
}
<div>
<p>Hello, I am a very basic example</p>
</div>
So you had several problems, you were only animating opacity and if you move the div from under the mouse cursor when you hover it, it won't work.
So I activated all transitions, not just opacity, made the div as tall as the browser, and used the div's internal padding.
body, html {
/* needed so that the div can also be 100% of window */
height: 100%;
}
div {
height: 100%;
padding-top: 500px;
}
div:hover {
padding-top: 300px;
transition: all 0.05s linear;
}
<div>
<p>Hello, I am a very basic example</p>
</div>
Related
I'm trying to use the same button to open and close a menu, I'm sure this is super simple but I'm new to the world of jQuery. I'm using the Wordpress builder 'Oxygen' if that helps. Here's my code:
The modal is an in-built feature in the website builder so I can't provide much code on that. It's basically set to trigger when element with class "open" is clicked, and close with element class "oxy-modal-close".
jQuery
jQuery("#toggle").click(function () {
jQuery('#plus').toggleClass('rotate');
jQuery('#toggle').toggleClass('open oxy-modal-close');
});
HTML
<div id="toggle" class="open">
<img id="plus" src="http://hausse.co.uk/wp-content/uploads/2021/01/plus.svg"/>
</div>
CSS
#plus {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 0.3s;
width: 35px;
position: fixed;
top: 20px;
right: 20px;
}
.rotate {
transform: rotate(45deg);
}
Basically on the 2nd click, the class is re-adding the class "open", which is causing the menu to flicker as the two actions are conflicting with each other. Video here - https://gph.is/g/ZnNQddo
I have tried adding a delay to the class "open", but for some reason the delay is only working on the first click - on the second it's changing class instantly. This is the code I'm trying for that.
jQuery("#toggle").click(function () {
jQuery('#plus').toggleClass('rotate');
jQuery('#toggle').toggleClass('oxy-modal-close');
var el = jQuery("#toggle");
window.setTimeout(function() {
el.toggleClass('open');
}, 500);
});
You are referencing the id again within the click - you need to reference $(this)... to toggle the class on the click
Also - you need to start with one of the states - that way it can toggle the class to the other state on each click as per the snippet (the cross icon is on the right of the snippet widow as per styling ) - now when you click it rotates as intended.
$("#toggle").click(function() {
$('#plus').toggleClass('rotate');
$(this).toggleClass('open oxy-modal-close');
});
#plus {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 0.3s;
width: 35px;
position: fixed;
top: 20px;
right: 20px;
}
.rotate {
transform: rotate(45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toggle" class="open">
<img id="plus" src="http://hausse.co.uk/wp-content/uploads/2021/01/plus.svg"/>
</div>
I am making a marquee in Javascript and CSS that displays various notifications.
Right now, I am using Javascript to update the transform: translateX() on a specified interval.
Here's a codepen of what I have working so far.
I would like to have the marquee wrap around so that there is always text present on the screen. Currently, it does not wrap around until everything has disappeared.
I have found a similar example (using CSS keyframes) that seems to have solved this issue by including the marquee text twice in a row. I would prefer not to have to do this if at all possible, as the marquee won't be text when live, but rather a bunch of icons and other elements, and that could get messy.
You have to have the text twice to achieve the effect you are looking for. The codepen you reference controls the widths so that both texts are never in the visible marquee simultaneously. Here is another example that does this by tying the width of the outer div to the width of the inner div with jQuery, and uses white-space: nowrap. I didn't write this codepen, BTW.
HTML
<div id="maindiv">
<div id="div1">
Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
</div>
<div id="div2">
Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
</div>
</div>
CSS
#maindiv{
border: 2px solid black;
overflow: hidden;
white-space: nowrap;
}
#div1 {
display: inline-block;
animation: marquee 10s linear infinite;
}
#div2 {
display: inline-block;
animation: marquee2 10s linear infinite;
animation-delay: 5s;
}
#keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
#keyframes marquee2 {
from {
transform: translateX(0%);
}
to {
transform: translateX(-200%);
}
}
jQuery
$('#maindiv').width($('#div1').width());
I am trying to get a container to come down when i click on an item in my menu. The animation downwards works fine. But the moment i click a different item in my menu, it doesnt animate upwards.
Css:
.card{
width: 100%;
background: blue;
transform: translateY(-100px);
opacity: 0;
height:0;
min-height: 0;
transition-timing-function: cubic-bezier(.175,.885,.32,1.275);
transition-property: opacity,transform;
transition-duration: 1s;
}
.card-appeared{
margin-top: 0;
opacity: 1;
transform: translateY(0);
min-height: 300px;
transition-delay: 1s;
height:auto;
width: 100%;
}
Html:
<div id="aboutme" class="container card ">
About me
</div>
<div id="gallery" class="container card card-appeared">
Gallery
</div>
Basic javascript for adding and removing classes
function appear(child){
parent.classList.remove("card-appeared");
let others = document.getElementsByClassName("card-appeared");
for(var i = 0; i < others.length;i++){
others[i].classList.remove("card-appeared");
}
child.classList.add("card-appeared");
}
function dissapear(child) {
child.classList.remove("card-appeared");
parent.classList.add("card-appeared");
}
others is the list of other cards in the page and the parent is the very first container.
If you need any other code, please let me know. I cannot seem to get the upwards animation working but the animation down does work.
Thank you.
Since an explicit height is only specified when the class card-appeared is added, with the property min-height, the expected behaviour cannot be observed when this class is removed again, since the inherit state of the element in question has no explicit height defined. So it just "pops" back up.
To resolve this, consider the below:
.card {
width: 100%;
background: blue;
transform: translateY(-600px); /* adjusted */
opacity: 0;
height: 0;
min-height: 300px; /* added */
transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
transition-property: opacity, transform;
transition-duration: 1s;
}
.card-appeared {
margin-top: 0;
opacity: 1;
transform: translateY(-300px); /* adjusted */
transition-delay: 1s;
height: auto;
width: 100%;
}
Breakdown: Since static positioning is being used here, elements with y-positioning offsets will still occupy space in the DOM. In order to account for this, the values of the transform: translateY() properties must be adjusted accordingly now that the elements in question always have a minimum height defined.
For Consideration: A better solution to this may be utilizing absolute positioning; this will remove the elements in question from the natural flow of the document, meaning you will not have to account for space occupied in the DOM by these elements, so transform: translateY() property values can remain intuitive.
I am trying to show a div with animation using ng-hide and ng-show, it is not working properly. When I mention a specific height it is working correctly, if I mention min-height it is not working.
here is my css code
.sample-show-hide {
opacity: 1;
min-height: 180px;
}
.sample-show-hide.ng-hide-add,
.sample-show-hide.ng-hide-remove {
transition: all linear 0.5s;
}
.sample-show-hide.ng-hide {
min-height: 0px;
opacity: 0;
}
here is my example html code
<div class="row" ng-click="showDiv=true">
<h2>Click me</h2>
</div>
<div class="row sample-show-hide" ng-show="showDiv=!showDiv">
<h2>some data</h2>
<h2>some data</h2>
<h2>some data</h2>
<h2>some data</h2>
</div>
If I mention a specific height like below it is working correctly, then if I add some more extra data to that div then it is taking the height as 80px only the remaining data is not showing because of that specific height, so if I add extra text also that div has to take height automatically
.sample-show-hide {
opacity: 1;
height: 80px;
}
.sample-show-hide.ng-hide-add,
.sample-show-hide.ng-hide-remove {
transition: all linear 0.5s;
}
.sample-show-hide.ng-hide {
height: 0px;
opacity: 0;
}
So, I managed to obtain what I think you want, except that the size transition is not necessarily in sync with the opacity transition, but looks good either way.
The idea is to use max-width and the ease-in and ease-out transitions.
.sample-show-hide {
max-height: 999px;
opacity: 1;
}
.sample-show-hide.ng-hide-add {
transition: all ease-out 0.5s;
}
.sample-show-hide.ng-hide-remove {
transition: all ease-in 0.5s;
}
.sample-show-hide.ng-hide {
max-height: 0px;
opacity: 0;
}
NOTE that the speed of the size depends on the max-height that you set (e.g. 999px) - you can increase this if you expect the div to have bigger size but then also increase the transition time (you could separate the opacity transition from the size transition to make them more compatible)
Hope this helps.
Seems to work fine, I made a jsfiddle for it just in case. I added one extra line though, to be sure.
min-height: 80px;
height: auto;
It works in my example https://jsfiddle.net/c6xnv0pj/2/, maybe I'm missing something?
Maybe you didn't inject ngAnimate to your app?
angular.module('myApp', ['ngAnimate']);
I am currently developing a HTML game for one of my programming classes and I want to add a "game over" screen that will display an image and information on their score before dying.
What I would like to happen is for the image to overlay the body of the page and start small in the middle of the screen and "expand" or zoom into the screen to a specific size. I'm not sure if that's clear but here is what I'm sort of looking for:
But I would like it to zoom in rather than just appear. Any links or help would be greatly appreciated because I don't even know what to search on google to get information on this!
Thanks in advance for any help!
It's really rough but you can do something like this:
JS
var $foo = $('#foo');
grow = function (size) {
if (size < 50) {
console.log(size);
$foo.css('width', size + '%');
$foo.css('height', size + '%');
size++;
setTimeout(grow, 10, size);
}
}
grow(0);
CSS
#foo {
position: fixed;
right: 0;
left: 0;
top:0;
bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top:auto;
margin-bottom:auto;
width: 0%;
height: 0%;
background-color: red;
}
https://jsfiddle.net/a05s1a44/
Change the timeout length to control the speed. Adjust the CSS as needed. Scale the size variable for the dimensions of your box. Change the limit. Do whatever. Should be enough to get you going.
FIDDLE: https://jsfiddle.net/shfv0b3f/
Using transform: scale and transition:
div {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
On game over:
div.zoom {
transform: scale(1);
}
This is what I have made for you and I hope it would help.
basically in a container which it may be the window of your game, I have added the "game over" container you want to show.
The rest of the html is just so you see some false content inside game container:
<div class="container">
<div class="stuff">and here is stuff</div>
<div class="stuff">etc, ect, ect</div>
<div class="stuff">more text</div>
<div class="stuff">and more</div>
<div class="button">Click here</div>
<div class="this-is-your-game-over"></div>
</div>
You can see there's also a class called button that I have used as to trigger the "game over" container zoom effect. In your game development you may use something else to do it.
Then, basically, you will have a "game over" container positioned as this:
.this-is-your-game-over {
position:absolute;
height:0px;
width:0px;
background-color:blue;
right:0;
left:0;
bottom:0;
top:0;
margin: auto;
}
so It is always centered and by jquery:
$(document).ready(function () {
$('.button').click(function () {
$('.this-is-your-game-over').toggleClass("this-is-your-game-over-ADDED");
});
});
When you click on button you add another class to the "game over" container that will make it grow to your desire size with a simple transition:
.this-is-your-game-over-ADDED {
height:80%;
width:50%;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
This is the FIDDLE to see verything in action
important: If in your html the this-is-your-game-over div is not at the end of your html you may need to add a positive z-indexto it.
This is perfect use case for CSS transitions and transforms.
Very basically:
#image {
transition: all 0.5s;
}
#image.hidden {
visibility: hidden;
opacity: 0;
transform: scale(0.5);
}
Then you just toggle the .hidden class somehow, probably by JS.
Also, don't forget to add vendor prefixes (or use Autoprefixer).
See http://codepen.io/anon/pen/waaMvM for better example.